@dktunited-techoff/techoff-suite-ui 1.8.1 → 1.8.3

package/esm/components/TsInput/TsInput/TsInput.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { TsIcon } from '../../TsIcon/TsIcon';
+import { TsInputProps } from './TsInput.types';
+import './TsInput.css';
+
+export const TsInput = ({ byDefault, error, icon, label, value, onChange, ...props }: TsInputProps) => {
+  // #########
+  // Rendering
+  return (
+    <div
+      className={`ts-input ${byDefault ? 'ts-input--padding-2' : icon ? 'ts-input--padding-1' : 'ts-input--padding-0'}`}
+    >
+      {label && <div className="ts-input-label">{label}</div>}
+      <div className={`ts-input-container ${error && error !== '' ? 'ts-input-container--error' : ''}`}>
+        <input type="text" value={value} onChange={e => onChange(e.target.value)} {...props} />
+        {byDefault && <div className="ts-input-tag">{byDefault} by default</div>}
+        {icon && (
+          <div className="ts-input-icon">
+            <TsIcon name={icon} size="16" />
+          </div>
+        )}
+      </div>
+
+      {error && error !== '' && (
+        <div className="ts-input-error">
+          <div className="ts-input-error--icon">
+            <TsIcon name="alert-circle" size="16" />
+          </div>
+          <div className="ts-input-error--label">{error}</div>
+        </div>
+      )}
+    </div>
+  );
+};

package/esm/components/TsInput/TsInput/TsInput.types.d.ts

@@ -0,0 +1,8 @@
+import { InputHTMLAttributes } from 'react';
+export type TsInputProps = {
+    byDefault?: string | number;
+    error?: string;
+    icon?: string;
+    label?: string;
+    onChange: (value: string) => void;
+} & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

package/esm/components/TsInput/TsInput/TsInput.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TsInput.types.js.map

package/esm/components/TsInput/TsInput/TsInput.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsInput.types.js","sourceRoot":"","sources":["../../../../src/components/TsInput/TsInput/TsInput.types.tsx"],"names":[],"mappings":""}

package/esm/components/TsInput/TsInput/TsInput.types.tsx

@@ -0,0 +1,9 @@
+import { InputHTMLAttributes } from 'react';
+
+export type TsInputProps = {
+  byDefault?: string | number;
+  error?: string;
+  icon?: string;
+  label?: string;
+  onChange: (value: string) => void;
+} & Omit<Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'>, 'size'>;

package/esm/components/TsInput/TsInput/__stories__/TsInput.stories.mdx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsInput } from '../TsInput';
+import { icons } from '../../../TsIcon/icons';
+
+<Meta title="Components/Input" />
+
+export const inputArgTypes = {
+  byDefault: {
+    control: 'text',
+    description: 'Add "by default" tag.',
+  },
+  error: {
+    control: 'text',
+    description: 'Error of the input.',
+  },
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the input.',
+  },
+  label: {
+    control: 'text',
+    description: 'label of the input.',
+  },
+  placeholder: {
+    control: 'text',
+    description: 'Placeholder of the input.',
+  },
+  value: {
+    control: 'text',
+    description: 'Value of the input.',
+  },
+  disabled: {
+    control: 'boolean',
+    description: 'Enable state of the input.',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  onChange: {
+    control: 'function',
+    description: 'The handler called when entering text (not available on playground).',
+  },
+  onValidate: {
+    control: 'function',
+    description: 'The handler called on input blur (not available on playground).',
+  },
+};
+
+# Input
+
+Input allows the user to enter content and data when the expected user input is a single line of text.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      byDefault: '',
+      error: '',
+      icon: '',
+      label: 'Label',
+      placeholder: 'Enter some text',
+      value: '',
+      disabled: false,
+      onChange: () => {},
+      onValidate: () => {},
+    }}
+    argTypes={inputArgTypes}
+  >
+    {args => <TsInput {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsInput} />

package/esm/components/TsLoader/TsLoader.css

@@ -0,0 +1,42 @@
+@keyframes rotation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.ts-loader {
+  border: 2px solid;
+  border-color: #3643ba transparent;
+  border-radius: 50%;
+  display: inline-block;
+  box-sizing: border-box;
+  animation: rotation 1.5s linear infinite;
+}
+
+/* ####### */
+/* SIZES   */
+.ts-loader--sm {
+  width: 24px;
+  height: 24px;
+}
+.ts-loader--md {
+  width: 32px;
+  height: 32px;
+}
+.ts-loader--lg {
+  width: 44px;
+  height: 44px;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/esm/components/TsLoader/TsLoader.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsLoaderProps } from './TsLoader.types';
+import './TsLoader.css';
+export declare const TsLoader: ({ size }: TsLoaderProps) => React.JSX.Element;

package/esm/components/TsLoader/TsLoader.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import './TsLoader.css';
+export const TsLoader = ({ size = 'md' }) => {
+    return React.createElement("div", { className: `ts-loader ts-loader--${size}` });
+};
+//# sourceMappingURL=TsLoader.js.map

package/esm/components/TsLoader/TsLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsLoader.js","sourceRoot":"","sources":["../../../src/components/TsLoader/TsLoader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,EAAiB,EAAE,EAAE;IACzD,OAAO,6BAAK,SAAS,EAAE,wBAAwB,IAAI,EAAE,GAAI,CAAC;AAC5D,CAAC,CAAC"}

package/esm/components/TsLoader/TsLoader.types.d.ts

@@ -0,0 +1,3 @@
+export type TsLoaderProps = {
+    size?: 'sm' | 'md' | 'lg';
+};

package/esm/components/TsLoader/TsLoader.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TsLoader.types.js.map

package/esm/components/TsLoader/TsLoader.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsLoader.types.js","sourceRoot":"","sources":["../../../src/components/TsLoader/TsLoader.types.ts"],"names":[],"mappings":""}

package/esm/components/TsLoader/__stories__/TsLoader.stories.mdx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsLoader } from '../TsLoader';
+
+<Meta title="Components/Loader" />
+
+export const loaderArgTypes = {
+  size: {
+    control: 'inline-radio',
+    options: ['sm', 'md', 'lg'],
+    description: 'Define the size of the loader.',
+    table: { defaultValue: { summary: 'md' } },
+  },
+};
+
+# Loader
+
+Loader express to user that an action is occuring.
+
+## Overview
+
+<Canvas>
+  <Story name="Overview" args={{ size: 'md' }} argTypes={loaderArgTypes}>
+    {args => <TsLoader {...args}>{args.children}</TsLoader>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsLoader} />

package/esm/components/TsTabs/TsTabs.css

@@ -0,0 +1,69 @@
+.ts-tabs {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+}
+.ts-tabs-header {
+  display: flex;
+  width: 100%;
+  height: 64px;
+  border-bottom: 1px solid #d9dde1;
+}
+.ts-tabs-items-container {
+  flex: 1;
+  height: 100%;
+  padding: 0 16px;
+  overflow: auto;
+}
+.ts-tabs-items {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+.ts-tabs-item {
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  padding: 4px 0;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.ts-tabs-item--selected {
+  border-bottom: 1px solid #3643ba;
+  color: #3643ba;
+}
+.ts-tabs-item--disabled {
+  color: #8c96a2;
+  cursor: not-allowed;
+}
+.ts-tabs-item--selected-pin {
+  width: 6px;
+  height: 6px;
+  margin-left: 8px;
+  border-radius: 50%;
+  background: #3643ba;
+}
+.ts-tabs-actions {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+}
+.ts-tabs-actions > * {
+  margin-left: 10px;
+}
+.ts-tabs-container {
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/esm/components/TsTabs/TsTabs.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsTabsProps } from './TsTabs.types';
+import './TsTabs.css';
+export declare const TsTabs: ({ defaultSelectedTabId, tabs }: TsTabsProps) => React.JSX.Element;

package/esm/components/TsTabs/TsTabs.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { TsIcon } from '../TsIcon/TsIcon';
+import './TsTabs.css';
+export const TsTabs = ({ defaultSelectedTabId, tabs }) => {
+    const [selectedTab, setSelectedTab] = useState(tabs.find(t => t.id === defaultSelectedTabId) ?? tabs[0]);
+    // ########
+    // Handlers
+    const handleSelectTab = (tab) => {
+        setSelectedTab(tab);
+        tab.onClick?.();
+    };
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "ts-tabs" },
+        React.createElement("div", { className: "ts-tabs-header" },
+            React.createElement("div", { className: "ts-tabs-items-container" },
+                React.createElement("div", { className: "ts-tabs-items" }, tabs.map(tab => (React.createElement("div", { key: tab.id, className: `
+                  ts-tabs-item
+                  ${tab.id === selectedTab.id ? 'ts-tabs-item--selected' : ''}
+                  ${tab.disabled ? 'ts-tabs-item--disabled' : ''}  
+                `, onClick: () => !tab.disabled && handleSelectTab(tab) },
+                    tab.icon && (React.createElement("div", { className: "ts-tabs-item--icon" },
+                        React.createElement(TsIcon, { name: tab.icon }))),
+                    React.createElement("div", { className: "ts-tabs-item--label" }, tab.label),
+                    tab.id === selectedTab.id && React.createElement("div", { className: "ts-tabs-item--selected-pin" })))))),
+            selectedTab?.actions && React.createElement("div", { className: "ts-tabs-actions" }, selectedTab?.actions)),
+        React.createElement("div", { className: "ts-tabs-container" }, selectedTab?.element)));
+};
+//# sourceMappingURL=TsTabs.js.map

package/esm/components/TsTabs/TsTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsTabs.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE1C,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,oBAAoB,EAAE,IAAI,EAAe,EAAE,EAAE;IACpE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,oBAAoB,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC;IAElH,WAAW;IACX,WAAW;IACX,MAAM,eAAe,GAAG,CAAC,GAAY,EAAE,EAAE;QACvC,cAAc,CAAC,GAAG,CAAC,CAAC;QACpB,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC;IAClB,CAAC,CAAC;IAEF,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,SAAS;QACtB,6BAAK,SAAS,EAAC,gBAAgB;YAC7B,6BAAK,SAAS,EAAC,yBAAyB;gBACtC,6BAAK,SAAS,EAAC,eAAe,IAC3B,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,6BACE,GAAG,EAAE,GAAG,CAAC,EAAE,EACX,SAAS,EAAE;;oBAEP,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;oBACzD,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE;iBAC/C,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,QAAQ,IAAI,eAAe,CAAC,GAAG,CAAC;oBAEnD,GAAG,CAAC,IAAI,IAAI,CACX,6BAAK,SAAS,EAAC,oBAAoB;wBACjC,oBAAC,MAAM,IAAC,IAAI,EAAE,GAAG,CAAC,IAAI,GAAI,CACtB,CACP;oBACD,6BAAK,SAAS,EAAC,qBAAqB,IAAE,GAAG,CAAC,KAAK,CAAO;oBACrD,GAAG,CAAC,EAAE,KAAK,WAAW,CAAC,EAAE,IAAI,6BAAK,SAAS,EAAC,4BAA4B,GAAG,CACxE,CACP,CAAC,CACE,CACF;YAEL,WAAW,EAAE,OAAO,IAAI,6BAAK,SAAS,EAAC,iBAAiB,IAAE,WAAW,EAAE,OAAO,CAAO,CAClF;QAEN,6BAAK,SAAS,EAAC,mBAAmB,IAAE,WAAW,EAAE,OAAO,CAAO,CAC3D,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/components/TsTabs/TsTabs.types.d.ts

@@ -0,0 +1,14 @@
+import { ReactElement } from 'react';
+export type TabItem = {
+    icon?: string;
+    id: string;
+    label: string;
+    disabled?: boolean;
+    element: ReactElement;
+    actions?: ReactElement;
+    onClick?: () => void;
+};
+export type TsTabsProps = {
+    defaultSelectedTabId?: string;
+    tabs: TabItem[];
+};

package/esm/components/TsTabs/TsTabs.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TsTabs.types.js.map

package/esm/components/TsTabs/TsTabs.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TsTabs.types.js","sourceRoot":"","sources":["../../../src/components/TsTabs/TsTabs.types.ts"],"names":[],"mappings":""}

package/esm/components/TsTabs/__stories__/TsTabs.stories.mdx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { TsButton } from '../../TsButton/TsButton';
+import { TsTabs } from '../TsTabs';
+
+<Meta title="Components/Tabs" />
+
+export const tabsArgTypes = {};
+
+# Tabs
+
+Tabs are used to move from one content to another within the same context.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      tabs: [
+        {
+          id: '1',
+          label: 'Tab item 1',
+          element: <p>Tab item 1 content</p>,
+          actions: (
+            <>
+              <TsButton>Action 1</TsButton>
+              <TsButton>Action 2</TsButton>
+            </>
+          ),
+        },
+        { id: '2', label: 'Tab item 2', element: <p>Tab item 2 content</p> },
+        { id: 'disabled', label: 'Tab item disabled', disabled: true, element: <></> },
+        {
+          id: '3',
+          label: 'Tab item 3',
+          element: <p>Tab item 3 content</p>,
+          actions: <TsButton icon="add">Action</TsButton>,
+        },
+      ],
+    }}
+    argTypes={tabsArgTypes}
+  >
+    {args => <TsTabs {...args} />}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={TsTabs} />

package/esm/hooks/use-click-outside.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const useClickOutside: (callback: () => void) => import("react").RefObject<HTMLDivElement>;

package/esm/hooks/use-click-outside.js

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+export const useClickOutside = (callback) => {
+    const ref = useRef(null);
+    const handleClickOutside = (event) => {
+        if (ref.current && !ref.current.contains(event.target))
+            callback();
+    };
+    useEffect(() => {
+        document.addEventListener('click', handleClickOutside);
+        return () => document.removeEventListener('click', handleClickOutside);
+    }, []);
+    return ref;
+};
+//# sourceMappingURL=use-click-outside.js.map

package/esm/hooks/use-click-outside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-click-outside.js","sourceRoot":"","sources":["../../src/hooks/use-click-outside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,QAAoB,EAAE,EAAE;IACtD,MAAM,GAAG,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzC,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;QAC/C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;YAAE,QAAQ,EAAE,CAAC;IAC7E,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,gBAAgB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,OAAO,EAAE,kBAAkB,CAAC,CAAC;IACzE,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,GAAG,CAAC;AACb,CAAC,CAAC"}

package/esm/index.d.ts

@@ -0,0 +1,11 @@
+export * from './components/TsButton/TsButton';
+export * from './components/TsCheckbox/TsCheckbox';
+export * from './components/TsDropdowns/TsDropdown/TsDropdown';
+export * from './components/TsDropdowns/TsDropdownFilter/TsDropdownFilter';
+export * from './components/TsIcon/TsIcon';
+export * from './components/TsInput/TsInput/TsInput';
+export * from './components/TsLoader/TsLoader';
+export * from './components/TsTabs/TsTabs';
+export * from './layouts/TsHeader/TsHeader';
+export * from './layouts/TsHeader/TsHeaderProfile';
+export * from './layouts/TsNavigation/TsNavigation';

package/esm/index.js

@@ -0,0 +1,12 @@
+export * from './components/TsButton/TsButton';
+export * from './components/TsCheckbox/TsCheckbox';
+export * from './components/TsDropdowns/TsDropdown/TsDropdown';
+export * from './components/TsDropdowns/TsDropdownFilter/TsDropdownFilter';
+export * from './components/TsIcon/TsIcon';
+export * from './components/TsInput/TsInput/TsInput';
+export * from './components/TsLoader/TsLoader';
+export * from './components/TsTabs/TsTabs';
+export * from './layouts/TsHeader/TsHeader';
+export * from './layouts/TsHeader/TsHeaderProfile';
+export * from './layouts/TsNavigation/TsNavigation';
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,4DAA4D,CAAC;AAC3E,cAAc,4BAA4B,CAAC;AAC3C,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oCAAoC,CAAC;AACnD,cAAc,qCAAqC,CAAC"}

package/esm/layouts/TsHeader/TsHeader.css

@@ -0,0 +1,186 @@
+@font-face {
+  font-family: 'Montserrat-Medium';
+  src: url('../../assets/fonts/Montserrat-Medium.ttf');
+}
+@font-face {
+  font-family: 'Roboto-Light';
+  src: url('../../assets/fonts/Roboto-Light.ttf');
+}
+
+/* ######## */
+/* HEADER   */
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 64px;
+  padding: 0 24px;
+}
+.ts-header-aside {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  height: 100%;
+}
+.ts-header-right-side {
+  justify-content: flex-end;
+}
+.ts-header-search-bar {
+  display: flex;
+  align-items: center;
+  width: 400px;
+  height: 100%;
+}
+.ts-header-actions {
+  display: flex;
+}
+.ts-header-actions > * {
+  margin-left: 12px;
+}
+
+/* ################ */
+/* HEADER TECHOFF   */
+.ts-header-techoff {
+  display: flex;
+  height: 18px;
+  margin-left: 4px;
+}
+
+/* ################ */
+/* HEADER PROFILE   */
+.ts-header-profile-container {
+  position: relative;
+}
+.ts-header-profile-dropdown {
+  display: flex;
+  height: 40px;
+  border-radius: 9999px;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  color: #4e5d6b;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+.ts-header-profile-img-container {
+  width: 40px;
+  height: 40px;
+  padding: 4px;
+  border-radius: 9999px;
+}
+.ts-header-profile-img-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: 9999px;
+  background-color: rgb(229, 229, 229);
+}
+.ts-header-profile-name {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  padding-left: 4px;
+  padding-right: 16px;
+}
+.ts-header-profile-chevron {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  padding-right: 14px;
+  border-radius: 9999px;
+}
+.ts-header-profile-menu {
+  position: absolute;
+  right: 0;
+  top: 48px;
+  width: 288px;
+  padding: 4px;
+  border-radius: 8px;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  background-color: #ffffff;
+  z-index: 10;
+}
+.ts-header-profile-menu-item {
+  display: flex;
+  align-items: center;
+  height: 36px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.ts-header-profile-menu-item:hover {
+  background-color: #e7f3f9;
+}
+.ts-header-profile-menu-item-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+}
+.ts-header-profile-menu-item-label {
+  flex: 1;
+  padding: 0 2px;
+}
+
+/* ############### */
+/* HEADER SEARCH   */
+.ts-header-search {
+  position: relative;
+  width: 100%;
+}
+.ts-header-search-items-container {
+  position: absolute;
+  top: calc(100% + 4px);
+  width: 100%;
+  max-height: 200px;
+  border-radius: 8px;
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  background-color: white;
+  overflow-y: auto;
+  z-index: 100;
+}
+.ts-header-search-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+}
+.ts-header-search-no-items {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  color: #8c96a2;
+  font-style: italic;
+}
+.ts-header-search-items {
+  padding: 8px;
+}
+.ts-header-search-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+.ts-header-search-item:hover {
+  background: #e7f3f9;
+}
+.ts-header-search-item--match {
+  background: #cce5f2;
+  color: #007dbc;
+  font-weight: 700;
+}
+
+/* ######### */
+/* GLOBALS   */
+* {
+  font-size: 14px;
+  outline: none;
+  box-sizing: border-box;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
+    'Helvetica Neue', sans-serif;
+}

package/esm/layouts/TsHeader/TsHeader.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { TsHeaderProps } from './TsHeader.types';
+import './TsHeader.css';
+export declare const TsHeader: ({ actions, appName }: TsHeaderProps) => React.JSX.Element;