@progress/kendo-themes-html 14.4.1-dev.0 → 14.4.1-dev.2

package/src/agent-response/templates/tool-call-normal.tsx

@@ -1,3 +1,3 @@
 import ToolCall from '../tool-call.spec';
 
-export const ToolCallNormal = (props: any) => <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts" time="120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable {...props} />;
+export const ToolCallNormal = (props: any) => <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts · 120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable {...props} />;

package/src/agent-response/tests/chain-of-thought.tsx

@@ -5,9 +5,9 @@ import Thought from "../thought.spec";
 export default () => (
   <div id="test-area" className="k-d-flex k-flex-col" style={{ maxWidth: "680px" }}>
     <section>
-      <ChainOfThought label="Thought" time="for 4m 18s" completed expandable />
+      <ChainOfThought label="Thought" secondaryLabel="for 4m 18s" completed expandable />
 
-      <ChainOfThought label="Thought" time="for 4m 18s" completed expandable expanded>
+      <ChainOfThought label="Thought" secondaryLabel="for 4m 18s" completed expandable expanded>
         <Thought icon="search" label="Searched for components" completed />
         <Thought icon="book" label='Found 12 components matching "button". Reviewing variants — identified 3 candidates with primary intent.' completed />
         <Thought icon="book" label="Retrieved design system documentation for Button components." completed>
@@ -25,7 +25,7 @@ export default () => (
         <Thought icon="pencil" label="Edited" secondaryLabel="_theme.scss" linesAdded={3} linesRemoved={1} completed />
       </ChainOfThought>
       <ChainOfThought icon="search" label="Searched for components" completed expandable />
-      <ChainOfThought icon="book" label="Reviewed component variants" time="for 12s" expandable completed />
+      <ChainOfThought icon="book" label="Reviewed component variants" secondaryLabel="for 12s" expandable completed />
 
       <ChainOfThought label="Thinking through request" secondaryLabel="I'm considering the best approach to the problem..." expandable expanded>
         <Thought icon="search" label="Searched for components" completed />
@@ -41,6 +41,9 @@ export default () => (
           </div>
         </Thought>
       </ChainOfThought>
+
+      {/* focused */}
+      <ChainOfThought label="Thought" secondaryLabel="for 4m 18s" completed expandable focus />
     </section>
   </div>
 );

package/src/agent-response/tests/reasoning.tsx

@@ -3,9 +3,9 @@ import { Reasoning } from "..";
 export default () => (
   <div id="test-area" className="k-d-flex k-flex-col" style={{ maxWidth: "680px" }}>
     <section>
-      <Reasoning time="for 48s" completed label="Completed" expandable />
+      <Reasoning secondaryLabel="for 48s" completed label="Completed" expandable />
 
-      <Reasoning time="for 48s" completed label="Completed" expandable expanded>
+      <Reasoning secondaryLabel="for 48s" completed label="Completed" expandable expanded>
         <span>I'll design a resource component system for an AI chat — covering different resource types, states, and variants. Let me read the relevant skills first.</span>
         <span>I'll gather local design system context, then create a comprehensive resource component system.</span>
       </Reasoning>
@@ -16,6 +16,9 @@ export default () => (
         <span>I'll design a resource component system for an AI chat — covering different resource types, states, and variants. Let me read the relevant skills first.</span>
         <span>I'll gather local design system context, then create a comprehensive resource component system.</span>
       </Reasoning>
+
+      {/* focused */}
+      <Reasoning secondaryLabel="for 48s" completed label="Completed" expandable focus />
     </section>
   </div>
 );

package/src/agent-response/tests/tool-call.tsx

@@ -8,40 +8,28 @@ import { MessageBox } from "../../message-box";
 export default () => (
   <div id="test-area" className="k-d-flex k-flex-col">
     <section>
-      <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts" time="120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable />
+      <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts · 120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable />
 
-      <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts" time="120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable />
+      <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts · 120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable />
 
-      <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts" time="120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable expanded>
-        <div>Parameters</div>
-        <Card>
-          <CardBody>
-            <pre style={{ fontSize: "14px", marginTop: "0px" }}>
-              <code>{`cd packages/html && npx tsc --noEmit -p . 2>&1 | head -50`}</code>
-            </pre>
-          </CardBody>
-        </Card>
-        <div>Result</div>
-        <Card>
-          <CardBody>
-            <pre style={{ fontSize: "14px", marginTop: "0px" }}>
-              <code>{`> @progress/kendo-themes-html@14.4.0-dev.1 typecheck
+      <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts · 120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable expanded>
+        <div className="k-tool-call-label">Parameters</div>
+        <pre className="k-pre">
+          <code className="k-code">{`cd packages/html && npx tsc --noEmit -p . 2>&1 | head -50`}</code>
+        </pre>
+        <div className="k-tool-call-label">Result</div>
+        <pre className="k-pre">
+          <code className="k-code">{`> @progress/kendo-themes-html@14.4.0-dev.1 typecheck
 > npx tsc --noEmit --emitDeclarationOnly false --project tsconfig.json
 `}</code>
-            </pre>
-          </CardBody>
-        </Card>
+        </pre>
       </ToolCall>
 
       <ToolCall label="tool_name" status="Awaiting Approval" statusThemeColor="warning" statusIcon="exclamation-circle" expandable expanded>
-        <div>Parameters</div>
-        <Card>
-          <CardBody>
-            <pre style={{ fontSize: "14px", marginTop: "0px" }}>
-              <code>{`cd packages/html && npx tsc --noEmit -p . 2>&1 | head -50`}</code>
-            </pre>
-          </CardBody>
-        </Card>
+        <div className="k-tool-call-label">Parameters</div>
+        <pre className="k-pre">
+          <code className="k-code">{`cd packages/html && npx tsc --noEmit -p . 2>&1 | head -50`}</code>
+        </pre>
         <Card>
           <CardBody>
             <p>This command will execute a TS Typecheck in your codebase.</p>
@@ -54,16 +42,15 @@ export default () => (
       </ToolCall>
 
       <ToolCall label="tool_name" status="Error" statusThemeColor="error" statusIcon="exclamation-circle" expandable expanded>
-        <div>Parameters</div>
-        <Card>
-          <CardBody>
-            <pre style={{ fontSize: "14px", marginTop: "0px" }}>
-              <code>{`cd packages/hmtl && npx tsc --noEmit -p . 2>&1 | head -50`}</code>
-            </pre>
-          </CardBody>
-        </Card>
+        <div className="k-tool-call-label">Parameters</div>
+        <pre className="k-pre">
+          <code className="k-code">{`cd packages/hmtl && npx tsc --noEmit -p . 2>&1 | head -50`}</code>
+        </pre>
         <MessageBox themeColor="error">cd: no such file or directory: packges/hmtl</MessageBox>
       </ToolCall>
+
+      {/* focused */}
+      <ToolCall label="tool_name" secondaryLabel="src/utils/formatDate.ts · 120ms" status="Completed" statusThemeColor="success" statusIcon="check-circle" completed expandable focus />
     </section>
   </div>
 );

package/src/agent-response/thought.spec.tsx

@@ -23,8 +23,6 @@ export type KendoThoughtProps = {
   linesAdded?: number;
   /** Number of lines removed (rendered red with - prefix) */
   linesRemoved?: number;
-  /** Duration string — e.g. "120ms", "4m 18s" */
-  time?: string;
   /** Status badge text — e.g. "Completed", "Awaiting Approval", "No results found" */
   status?: string;
   /** Theme color for the status Badge */
@@ -44,7 +42,7 @@ const defaultOptions = {
  * @ux {Diff stats} Added/removed line counts always render in success/error colors, regardless of completed state.
  */
 export const Thought: KendoComponent<KendoThoughtProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoThoughtProps & React.HTMLAttributes<HTMLDivElement>) => {
-  const { icon, label, labelClassName, secondaryLabel, linesAdded, linesRemoved, time, status, statusThemeColor = "success", statusIcon, completed = defaultOptions.completed, className, children, ...other } = props;
+  const { icon, label, labelClassName, secondaryLabel, linesAdded, linesRemoved, status, statusThemeColor = "success", statusIcon, completed = defaultOptions.completed, className, children, ...other } = props;
 
   return (
     <div
@@ -68,12 +66,6 @@ export const Thought: KendoComponent<KendoThoughtProps & React.HTMLAttributes<HT
         )}
         {linesAdded && <span className="k-agent-step-added">+{linesAdded}</span>}
         {linesRemoved && <span className="k-agent-step-removed">-{linesRemoved}</span>}
-        {time && (
-          <>
-            <span className="k-agent-step-sep">·</span>
-            <span className="k-agent-step-time">{time}</span>
-          </>
-        )}
         {status && (
           <Badge size="small" themeColor={statusThemeColor} rounded="full">
             {statusIcon && <Icon icon={statusIcon} size="small" />}

package/src/agent-response/tool-call.spec.tsx

@@ -1,15 +1,19 @@
 import * as React from "react";
-import { classNames } from "../misc";
-import { AgentStep, KendoAgentStepProps } from "./agent-step";
+import { classNames, States } from "../misc";
+import { AgentStep, KendoAgentStepProps, KendoAgentStepState } from "./agent-step";
 import { KendoComponent, KendoBaseProps } from "../_types/component";
 import { AGENT_RESPONSE_FOLDER_NAME, AGENT_RESPONSE_MODULE_NAME } from "./constants";
 
 export const TOOL_CALL_CLASSNAME = "k-tool-call";
 
-const states = [] as const;
+const states = [
+  States.focus
+] as const;
+
 const options = {};
 
 export type KendoToolCallProps = KendoAgentStepProps;
+export type KendoToolCallState = KendoAgentStepState;
 
 const defaultOptions = {
   icon: "wrench",
@@ -22,8 +26,9 @@ const defaultOptions = {
  * @ux {Expand / Collapse} Clicking or activating the head toggles the tool call body (parameters, results, approval actions) open and closed.
  * @ux {Status} The optional status Badge reflects the call's outcome (e.g. "Completed", "Awaiting Approval", "Error").
  * @ux {Completed state} When completed, the label stops shimmering and the icon/label/expand icon dim to a subtle color.
+ * @ux {Focus feedback} Keyboard focus on the head renders a focus indicator — an inset ring in most themes and an inset outline in Meridian.
  */
-export const ToolCall: KendoComponent<KendoToolCallProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoToolCallProps & KendoBaseProps & React.HTMLAttributes<HTMLDivElement>) => {
+export const ToolCall: KendoComponent<KendoToolCallProps & KendoToolCallState & React.HTMLAttributes<HTMLDivElement>> = (props: KendoToolCallProps & KendoToolCallState & KendoBaseProps & React.HTMLAttributes<HTMLDivElement>) => {
   const { icon = defaultOptions.icon, className, ...other } = props;
 
   return <AgentStep {...other} icon={icon} className={classNames(className, TOOL_CALL_CLASSNAME)} />;

package/src/citation/citation-popover-view.spec.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { classNames } from "../misc";
+import { Icon } from "../icon";
+import { KendoComponent } from "../_types/component";
+import { CITATION_FOLDER_NAME, CITATION_MODULE_NAME } from "./constants";
+
+export const CITATION_POPOVER_VIEW_CLASSNAME = "k-citation-popover-view";
+
+const states = [] as const;
+const options = {};
+
+export type KendoCitationPopoverViewProps = {
+  /** Title of the cited source, rendered in bold */
+  title?: React.ReactNode;
+  /** Short descriptive summary of the cited source */
+  body?: React.ReactNode;
+  /** URL of the cited source; rendered as a link, prefixed with an icon */
+  source?: string;
+  /** Icon shown before the source URL */
+  sourceIcon?: string;
+};
+
+const defaultOptions = {
+  sourceIcon: "globe",
+};
+
+/**
+ * @ux {Structured view} Renders the title, body summary, and source link of a cited source in a consistent layout.
+ */
+export const CitationPopoverView: KendoComponent<KendoCitationPopoverViewProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoCitationPopoverViewProps & React.HTMLAttributes<HTMLDivElement>) => {
+  const { title, body, source, sourceIcon = defaultOptions.sourceIcon, className, children, ...other } = props;
+  return (
+    <div {...other} className={classNames(className, CITATION_POPOVER_VIEW_CLASSNAME)}>
+      {title && <div className="k-citation-popover-view-title">{title}</div>}
+      {source && (
+        <a href={source} className="k-citation-popover-view-source">
+          <Icon icon={sourceIcon} />
+          {source}
+        </a>
+      )}
+      {body && <span className="k-citation-popover-view-body">{body}</span>}
+      {children}
+    </div>
+  );
+};
+
+CitationPopoverView.states = states;
+CitationPopoverView.options = options;
+CitationPopoverView.className = CITATION_POPOVER_VIEW_CLASSNAME;
+CitationPopoverView.defaultOptions = defaultOptions;
+CitationPopoverView.moduleName = CITATION_MODULE_NAME;
+CitationPopoverView.folderName = CITATION_FOLDER_NAME;
+
+export default CitationPopoverView;

package/src/citation/citation-popover.spec.tsx

@@ -15,13 +15,11 @@ export type KendoCitationPopoverProps = {
   pageIndex?: number;
   totalPages?: number;
   body?: React.JSX.Element;
-  currentView?: number;
 };
 
 const defaultOptions = {
-  currentView: 1,
   pageIndex: 1,
-  totalPages: 6,
+  totalPages: 2,
 };
 
 /**
@@ -30,20 +28,20 @@ const defaultOptions = {
  * @ux {Sliding views} Slides between page views using the --kendo-citation-popover-view-current CSS variable instead of unmounting content.
  */
 export const CitationPopover: KendoComponent<KendoCitationPopoverProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoCitationPopoverProps & React.HTMLAttributes<HTMLDivElement>) => {
-  const { body, currentView = defaultOptions.currentView, pageIndex = defaultOptions.pageIndex, totalPages = defaultOptions.totalPages, className, children, ...other } = props;
+  const { body, pageIndex = defaultOptions.pageIndex, totalPages = defaultOptions.totalPages, className, children, ...other } = props;
   return (
     <Popover
       {...other}
       className={classNames(className, CITATION_POPOVER_CLASSNAME)}
-      style={{ "--kendo-citation-popover-view-current": currentView } as React.CSSProperties}
+      style={{ "--kendo-citation-popover-view-current": pageIndex } as React.CSSProperties}
       title={
         <>
           <span className="k-citation-pages">
             {pageIndex}/{totalPages}
           </span>
           <ButtonGroup fillMode="flat">
-            <IconButton icon="arrow-left" fillMode="flat" size="small" aria-label="Previous" />
-            <IconButton icon="arrow-right" fillMode="flat" size="small" aria-label="Next" />
+            <IconButton className="k-group-start" icon="arrow-left" fillMode="flat" size="small" aria-label="Previous" disabled={pageIndex <= 1} />
+            <IconButton className="k-group-end" icon="arrow-right" fillMode="flat" size="small" aria-label="Next" disabled={pageIndex >= totalPages} />
           </ButtonGroup>
         </>
       }

package/src/citation/index.ts

@@ -1,4 +1,5 @@
 export * from './citation.spec';
 export * from './citation-popover.spec';
+export * from './citation-popover-view.spec';
 export * from './templates/citation-normal';
 export * from './templates/citation-opened';

package/src/citation/templates/citation-opened.tsx

@@ -1,5 +1,6 @@
 import Citation from "../citation.spec";
 import CitationPopover from "../citation-popover.spec";
+import CitationPopoverView from "../citation-popover-view.spec";
 
 export const CitationOpened = (props: any) => (
   <>
@@ -7,12 +8,8 @@ export const CitationOpened = (props: any) => (
     <CitationPopover
       body={
         <>
-          <div className="k-citation-popover-view">
-            <div>View 1</div>
-          </div>
-          <div className="k-citation-popover-view">
-            <div>View 2</div>
-          </div>
+          <CitationPopoverView title="View 1" />
+          <CitationPopoverView title="View 2" />
         </>
       }
     />

package/src/citation/tests/citation.tsx

@@ -1,10 +1,11 @@
 import { Citation } from "../citation.spec";
 import CitationPopover from "../citation-popover.spec";
-import Icon from "../../icon/icon.spec";
+import CitationPopoverView from "../citation-popover-view.spec";
 
 const styles = `
     .k-animation-container {
         position: relative;
+        width: 318px;
     }
 `;
 
@@ -16,34 +17,33 @@ export default () => (
         <p>Inline Citation</p>
         <div className="k-d-flex k-flex-wrap k-gap-2 k-align-items-center">
           <Citation domain="some-link.com" count={5} />
-          <Citation domain="some-link.com" count={5} selected />
+          <Citation domain="some-link.com" count={5} hover />
         </div>
       </section>
 
       <section>
         <p>Inline Citation + Popover</p>
         <p>
-          An inline citation component is an interactive UI element that embeds clickable reference badges, like [1] or source names, directly into text. <Citation domain="some-link.com" count={5} selected /> When users hover over or click these badges, the component displays full source details, such as titles, domains, URLs.
+          An inline citation component is an interactive UI element that embeds clickable reference badges, like [1] or source names, directly into text. <Citation domain="some-link.com" count={5} hover /> When users hover over or click these badges, the component displays full source details, such as titles, domains, URLs.
         </p>
         <CitationPopover
           body={
             <>
-              <div className="k-citation-popover-view">
-                <div className="k-font-weight-bold">Advances in Natural Language Processing</div>
-                <span className="k-color-subtle k-font-size-sm k-mt-2">A comprehensive study on the recent developments in natural language processing technologies and their...</span>
-                <a href="#" className="k-d-flex k-align-items-center k-font-size-sm k-mt-1 k-gap-1">
-                  <Icon icon="globe" />
-                  https://example.com/nlp-advances
-                </a>
-              </div>
-              <div className="k-citation-popover-view">
-                <div className="k-font-weight-bold">Advances in Natural Language Processing</div>
-                <span className="k-color-subtle k-font-size-sm k-mt-2">A comprehensive study on the recent developments in natural language processing technologies and their...</span>
-                <a href="#" className="k-d-flex k-align-items-center k-font-size-sm k-mt-1 k-gap-1">
-                  <Icon icon="globe" />
-                  https://example.com/nlp-advances
-                </a>
-              </div>
+              <CitationPopoverView title="Advances in Natural Language" body="A comprehensive study on the recent developments in natural language processing technologies" source="https://example.com/nlp-advances" />
+              <CitationPopoverView title="Advances in Natural Language" body="A comprehensive study on the recent developments in natural language processing technologies" source="https://example.com/nlp-advances" />
+            </>
+          }
+        />
+      </section>
+
+      <section>
+        <p>Inline Citation + Popover with long texts</p>
+        <CitationPopover
+          pageIndex={2}
+          body={
+            <>
+              <CitationPopoverView title="Advances in Natural Language Processing Long Long Long" body="A comprehensive study on the recent developments in natural language processing technologies and their long long long long long long long long long long long long long long long long long long long long long text" source="https://example.com/nlp-advances/long/long/long" />
+              <CitationPopoverView title="Advances in Natural Language Processing Long Long Long" body="A comprehensive study on the recent developments in natural language processing technologies and their long long long long long long long long long long long long long long long long long long long long long text" source="https://example.com/nlp-advances/long/long/long" />
             </>
           }
         />

package/src/datepicker/datepicker.spec.tsx

@@ -35,6 +35,7 @@ const options = {
 };
 
 const defaultOptions = {
+    showClearButton: true
 };
 
 export type KendoDatePickerOptions = {
@@ -48,6 +49,7 @@ export type KendoDatePickerProps = KendoDatePickerOptions & {
     suffix?: React.JSX.Element;
     value?: string;
     placeholder?: string;
+    showClearButton?: boolean;
     opened?: boolean;
     adaptive?: boolean;
     adaptiveSettings?: KendoActionSheetProps;
@@ -88,6 +90,7 @@ export const DatePicker: KendoComponent<KendoDatePickerProps & KendoDatePickerSt
         suffix,
         value,
         placeholder,
+        showClearButton = defaultOptions.showClearButton,
         hover,
         focus,
         valid,
@@ -143,11 +146,11 @@ export const DatePicker: KendoComponent<KendoDatePickerProps & KendoDatePickerSt
                 <InputLoadingIcon
                     loading={loading}
                     disabled={disabled} />
-                <InputClearValue
+                { showClearButton && <InputClearValue
                     loading={loading}
                     disabled={disabled}
                     readonly={readonly}
-                    value={value} />
+                    value={value} />}
                 <InputSuffix>{suffix}</InputSuffix>
                 <Button
                     className="k-input-button"

package/src/form/form-field.tsx

@@ -10,7 +10,7 @@ const states = [
 ];
 
 export type KendoFormFieldProps = {
-    label?: null | string;
+    label?: null | string | React.ReactNode;
     orientation?: string;
     optional?: boolean;
     editorId?: string;

package/src/form/form.spec.tsx

@@ -48,7 +48,8 @@ export const Form: KendoComponent<KendoFormProps & React.HTMLAttributes<HTMLDivE
         cols,
         gutters,
         tag = defaultOptions.tag,
-        children
+        children,
+        style
     } = props;
 
     const Tag = tag;
@@ -76,7 +77,8 @@ export const Form: KendoComponent<KendoFormProps & React.HTMLAttributes<HTMLDivE
                 )} style={{
                     ...(typeof gutters === 'string' && { gap: gutters }),
                     ...(typeof gutters === 'object' && gutters.rows && { rowGap: gutters.rows }),
-                    ...(typeof gutters === 'object' && gutters.cols && { columnGap: gutters.cols })
+                    ...(typeof gutters === 'object' && gutters.cols && { columnGap: gutters.cols }),
+                    ...style
                 }}>
                     {children}
                 </div>

package/src/grid/templates/grid-hierarchy.tsx

@@ -57,7 +57,7 @@ export const GridHierarchy = ({ containerClassName, ...other }: any) => (
                                     <TableTd className="k-detail-cell" role="gridcell" colspan={3}>
                                         <Grid _renderAriaRoot className="k-grid-no-scrollbar">
                                             <GridHeader>
-                                                <div className="k-grid-header-wrap">
+                                                <div className="k-grid-header-wrap" role="none">
                                                     <GridHeaderTable role="none">
                                                         <colgroup>
                                                             <col />

package/src/scheduler/scheduler-cell.spec.tsx

@@ -14,6 +14,7 @@ export type KendoSchedulerCellProps = {
     cellType?: string[];
     allDay?: boolean;
     text?: string;
+    dayText?: string;
     colspan?: number;
     rowspan?: number;
 }
@@ -28,6 +29,7 @@ export const SchedulerCell: KendoComponent<KendoSchedulerCellProps & ( | ( React
         cellType,
         allDay,
         text,
+        dayText,
         colspan,
         rowspan,
         as: Component = 'div',
@@ -54,12 +56,17 @@ export const SchedulerCell: KendoComponent<KendoSchedulerCellProps & ( | ( React
                     [`k-${t}-cell`]: true,
                 }))
             )}>
-            {!allDay && text ?
-                <span className="k-link k-nav-day">
-                    {textOrChildren}
-                </span>
-                :
-                textOrChildren
+            {dayText ?
+                <>
+                    <span className="k-scheduler-date-day">{dayText}</span>
+                    <span className="k-link k-nav-day" aria-label={`${dayText} ${text}`}>{text}</span>
+                </>
+                : !allDay && text ?
+                    <span className="k-link k-nav-day">
+                        {textOrChildren}
+                    </span>
+                    :
+                    textOrChildren
             }
         </Component>
     );