@dktunited-techoff/techoff-suite-ui 0.8.0

package/esm/layouts/Header/Header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/layouts/Header/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAqB,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,MAAM,MAAM,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IACxD,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,aAAa,CAAC,CAAC,CAAC;IAC5F,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC;IAEhG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL;QACE,iCAAM,YAAY,CAAO;QACzB,iCAAM,cAAc,CAAO,CACpB,CACV,CAAC;AACJ,CAAC,CAAC"}

package/esm/layouts/Header/Header.types.d.ts

@@ -0,0 +1,4 @@
+export type HeaderProfileProps = {
+    firstname: string;
+    lastname: string;
+};

package/esm/layouts/Header/Header.types.js

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

package/esm/layouts/Header/Header.types.js.map

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

package/esm/layouts/Header/HeaderActions.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+export declare const HeaderActions: ({ children }: PropsWithChildren) => React.JSX.Element;

package/esm/layouts/Header/HeaderActions.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export const HeaderActions = ({ children }) => {
+    // #########
+    // Rendering
+    return React.createElement("div", { className: "header-actions" }, children);
+};
+//# sourceMappingURL=HeaderActions.js.map

package/esm/layouts/Header/HeaderActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderActions.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC/D,YAAY;IACZ,YAAY;IACZ,OAAO,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAAC;AAC1D,CAAC,CAAC"}

package/esm/layouts/Header/HeaderProfile.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { HeaderProfileProps } from './Header.types';
+export declare const HeaderProfile: ({ firstname, lastname }: HeaderProfileProps) => React.JSX.Element;

package/esm/layouts/Header/HeaderProfile.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Icon } from '../../components/Icon/Icon';
+import { capitalize } from '../../utils/string.utils';
+export const HeaderProfile = ({ firstname, lastname }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "header-profile" },
+        React.createElement("div", { className: "header-profile--icon" },
+            React.createElement(Icon, { name: "user", size: "16" })),
+        React.createElement("div", { className: "header-profile--name" },
+            capitalize(firstname),
+            " ",
+            lastname.charAt(0).toUpperCase(),
+            ".")));
+};
+//# sourceMappingURL=HeaderProfile.js.map

package/esm/layouts/Header/HeaderProfile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderProfile.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderProfile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAGtD,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAsB,EAAE,EAAE;IAC3E,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,gBAAgB;QAC7B,6BAAK,SAAS,EAAC,sBAAsB;YACnC,oBAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC1B;QAEN,6BAAK,SAAS,EAAC,sBAAsB;YAClC,UAAU,CAAC,SAAS,CAAC;;YAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;gBACrD,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/layouts/Header/HeaderTitle.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+export declare const HeaderTitle: ({ children }: PropsWithChildren) => React.JSX.Element;

package/esm/layouts/Header/HeaderTitle.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+const svg = '<?xml version="1.0" encoding="utf-8"?><!-- Generator: Adobe Illustrator 27.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --><svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"	 viewBox="0 0 335 62.6" style="enable-background:new 0 0 335 62.6;" xml:space="preserve"><style type="text/css">	.st0{fill:#0883C4;}	.st1{fill:#FFFFFF;}</style><path d="M126.2,24.4c-3.1-3.3-7.4-5.3-12.4-5.3c-9.2,0-16,6.8-16,16.1c0,9.3,6.7,16.2,16,16.2c5.3,0,9.6-2.4,12.6-6l8.1,7.3	c-5.4,6.5-12.1,9.8-20.7,9.8C98,62.6,86.4,51,86.4,35.3C86.4,19.5,98,8,113.8,8c8.2,0,15.4,3,20.3,8.5L126.2,24.4z"/><polygon points="46.8,9.5 80.3,9.5 80.3,19.9 58,19.9 58,30.8 77.3,30.8 77.3,40.9 58,40.9 58,52.1 80.3,52.1 80.3,62.6 46.8,62.6 	"/><polygon points="265.4,8.7 297,8.7 297,19.2 276.6,19.2 276.6,32.6 294,32.6 294,42.8 276.6,42.8 276.6,61.8 265.4,61.8 "/><polygon points="303.4,8.7 335,8.7 335,19.2 314.6,19.2 314.6,32.6 332,32.6 332,42.8 314.6,42.8 314.6,61.8 303.4,61.8 "/><polygon points="174.5,40.1 152,40.1 152,61.8 140.8,61.8 140.8,8.7 152,8.7 152,29.2 174.5,29.2 174.5,8.7 185.7,8.7 185.7,61.8 	174.5,61.8 "/><polygon points="0,9.5 40.3,9.5 40.3,20.4 25.8,20.4 25.8,62.6 14.6,62.6 14.6,20.4 0,20.4 "/><polyline points="188.4,15.9 198.6,0 209.9,0 199.7,15.9 188.4,15.9 "/><path d="M231.7,8c-15.8,0-27.4,11.5-27.4,27.3c0,15.8,11.6,27.3,27.4,27.3c15.7,0,27.2-11.5,27.2-27.3C258.9,19.5,247.4,8,231.7,8z"	/><polygon class="st0" points="208,36.3 243.1,15.9 243,56.6 "/><polygon class="st1" points="231.1,56.7 230.6,37.4 214.2,47.6 "/></svg>';
+export const HeaderTitle = ({ children }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "header-title-container" },
+        React.createElement("div", { className: "header-title" }, children),
+        React.createElement("div", { className: "header-by" }, "BY"),
+        React.createElement("div", { className: "header-techoff", dangerouslySetInnerHTML: { __html: svg } })));
+};
+//# sourceMappingURL=HeaderTitle.js.map

package/esm/layouts/Header/HeaderTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderTitle.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,GAAG,GACP,wjDAAwjD,CAAC;AAE3jD,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC7D,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,wBAAwB;QACrC,6BAAK,SAAS,EAAC,cAAc,IAAE,QAAQ,CAAO;QAC9C,6BAAK,SAAS,EAAC,WAAW,SAAS;QACnC,6BAAK,SAAS,EAAC,gBAAgB,EAAC,uBAAuB,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,GAAI,CACxE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/layouts/Header/__stories__/Header.stories.mdx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Header } from '../Header';
+import { HeaderActions } from '../HeaderActions';
+import { HeaderTitle } from '../HeaderTitle';
+import { HeaderProfile } from '../HeaderProfile';
+import { Button } from '../../../components/Button/Button';
+
+<Meta title="Layouts/Header" />
+
+# Header
+
+The header will allow users to quickly find the information they need at a glance but also make some actions. The header is therefore central in the design of each application: it contains all the essential information, obvious shortcuts, which will help boost Deacthlon Techoff brand image.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      children: [
+        <HeaderTitle>Techoff Suite UI</HeaderTitle>,
+        <HeaderActions>
+          <Button icon="plus" size="lg" variant="shadow" rounded onClick={() => {}} />
+          <HeaderProfile firstname="John" lastname="Doe" />
+        </HeaderActions>,
+      ],
+    }}
+  >
+    {args => <Header>{args.children}</Header>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Header} />

package/esm/layouts/Navigation/Navigation.css

@@ -0,0 +1,74 @@
+.navigation {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 24px;
+}
+
+/* ############ */
+/* BREADCRUMB   */
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  padding-right: 20px;
+}
+.breadcrumb-container {
+  display: flex;
+  align-items: center;
+}
+.breadcrumb-chevron {
+  padding: 0 8px;
+  color: #00689d;
+}
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  border-radius: 9999px;
+  color: #00689d;
+}
+.breadcrumb-item--highlight {
+  padding: 0 20px;
+  box-shadow: 0px 6px 6px 0px #00537d1a;
+  background: linear-gradient(270.22deg, #007dbc 43.94%, #7ebee0 114.83%);
+  color: #ffffff;
+}
+.breadcrumb-item--link {
+  cursor: pointer;
+}
+.breadcrumb-item--link:hover {
+  text-decoration: underline;
+}
+.breadcrumb-item--icon {
+  padding-right: 8px;
+}
+
+/* ######### */
+/* DIVIDER   */
+.navigation-divider {
+  flex: 1;
+  height: 1px;
+  margin: 4px 0;
+  background: #b3bac3;
+}
+
+/* ######### */
+/* ACTIONS   */
+.navigation-actions {
+  /* flex items-center [&>*]:ml-4 */
+  display: flex;
+  align-items: center;
+}
+.navigation-actions > * {
+  margin-left: 16px;
+}
+
+/* ######### */
+/* 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/Navigation/Navigation.d.ts

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

package/esm/layouts/Navigation/Navigation.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { Children } from 'react';
+import { isSuiteElement } from '../../utils/validator.utils';
+import './Navigation.css';
+export const Navigation = ({ children }) => {
+    const breadcrumbElement = Children.toArray(children).find(c => isSuiteElement(c, 'NavigationBreadcrumb'));
+    const actionsElement = Children.toArray(children).find(c => isSuiteElement(c, 'NavigationActions'));
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "navigation" },
+        breadcrumbElement,
+        React.createElement("div", { className: "navigation-divider" }),
+        actionsElement));
+};
+//# sourceMappingURL=Navigation.js.map

package/esm/layouts/Navigation/Navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAqB,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IAC5D,MAAM,iBAAiB,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,sBAAsB,CAAC,CAAC,CAAC;IAC1G,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAEpG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACxB,iBAAiB;QAClB,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACrC,cAAc,CACX,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/layouts/Navigation/Navigation.types.d.ts

@@ -0,0 +1,5 @@
+export type NavigationBreadcrumbItemProps = {
+    icon?: string;
+    highlight?: boolean;
+    onClick?: () => void;
+};

package/esm/layouts/Navigation/Navigation.types.js

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

package/esm/layouts/Navigation/Navigation.types.js.map

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

package/esm/layouts/Navigation/NavigationActions.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import './Navigation.css';
+export declare const NavigationActions: ({ children }: PropsWithChildren) => React.JSX.Element;

package/esm/layouts/Navigation/NavigationActions.js

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import './Navigation.css';
+export const NavigationActions = ({ children }) => (React.createElement("div", { className: "navigation-actions" }, children));
+//# sourceMappingURL=NavigationActions.js.map

package/esm/layouts/Navigation/NavigationActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationActions.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/NavigationActions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE,CAAC,CACpE,6BAAK,SAAS,EAAC,oBAAoB,IAAE,QAAQ,CAAO,CACrD,CAAC"}

package/esm/layouts/Navigation/NavigationBreadcrumb.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { NavigationBreadcrumbItemProps } from './Navigation.types';
+import './Navigation.css';
+export declare const NavigationBreadcrumbItem: ({ children, icon, highlight, onClick, }: PropsWithChildren<NavigationBreadcrumbItemProps>) => React.JSX.Element;
+export declare const NavigationBreadcrumb: ({ children }: PropsWithChildren) => React.JSX.Element;

package/esm/layouts/Navigation/NavigationBreadcrumb.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Children } from 'react';
+import { Icon } from '../../components/Icon/Icon';
+import { isSuiteElement } from '../../utils/validator.utils';
+import './Navigation.css';
+export const NavigationBreadcrumbItem = ({ children, icon, highlight, onClick, }) => {
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: `
+        breadcrumb-item
+        ${highlight ? 'breadcrumb-item--highlight' : ''} ${onClick ? 'breadcrumb-item--link' : ''}
+      `, onClick: onClick },
+        icon && (React.createElement("div", { className: "breadcrumb-item--icon" },
+            React.createElement(Icon, { name: icon, size: "16" }))),
+        children));
+};
+export const NavigationBreadcrumb = ({ children }) => {
+    const breadcrumbItemElements = Children.toArray(children).filter(c => isSuiteElement(c, 'NavigationBreadcrumbItem'));
+    // #########
+    // Rendering
+    return (React.createElement("div", { className: "breadcrumb" }, breadcrumbItemElements.map((child, index) => (React.createElement("div", { key: index, className: "breadcrumb-container" },
+        child,
+        index !== breadcrumbItemElements.length - 1 && (React.createElement("div", { className: "breadcrumb-chevron" },
+            React.createElement(Icon, { name: "chevron-right" }))))))));
+};
+//# sourceMappingURL=NavigationBreadcrumb.js.map

package/esm/layouts/Navigation/NavigationBreadcrumb.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationBreadcrumb.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/NavigationBreadcrumb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAqB,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,4BAA4B,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAC;AAC7D,OAAO,kBAAkB,CAAC;AAE1B,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,EACvC,QAAQ,EACR,IAAI,EACJ,SAAS,EACT,OAAO,GAC0C,EAAE,EAAE;IACrD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BACE,SAAS,EAAE;;UAEP,SAAS,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE;OAC1F,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,CACP,6BAAK,SAAS,EAAC,uBAAuB;YACpC,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE;IACtE,MAAM,sBAAsB,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,0BAA0B,CAAC,CAAC,CAAC;IAErH,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY,IACxB,sBAAsB,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC5C,6BAAK,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,sBAAsB;QAC9C,KAAK;QAEL,KAAK,KAAK,sBAAsB,CAAC,MAAM,GAAG,CAAC,IAAI,CAC9C,6BAAK,SAAS,EAAC,oBAAoB;YACjC,oBAAC,IAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CACG,CACP,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC"}

package/esm/layouts/Navigation/__stories__/Navigation.stories.mdx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Navigation } from '../Navigation';
+import { NavigationBreadcrumb, NavigationBreadcrumbItem } from '../NavigationBreadcrumb';
+import { NavigationActions } from '../NavigationActions';
+import { Button } from '../../../components/Button/Button';
+import { icons } from '../../../components/Icon/icons';
+
+<Meta title="Layouts/Navigation" />
+
+# Navigation
+
+Breadcrumbs are an important navigation component that shows content hierarchy. They allow users to be aware of their current location in the hierarchical structure of the application. Breadcrumbs enable users to quickly move up to a parent level. Moreover this navigation component allows user to make some actions.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      children: [
+        <NavigationBreadcrumb>
+          <NavigationBreadcrumbItem icon="home" onClick={() => {}}>
+            Home
+          </NavigationBreadcrumbItem>
+          <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>
+          <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
+        </NavigationBreadcrumb>,
+        <NavigationActions>
+          <Button icon="check" onClick={() => {}}>
+            Action 1
+          </Button>
+          <Button icon="plus" onClick={() => {}}>
+            Action 2
+          </Button>
+        </NavigationActions>,
+      ],
+    }}
+  >
+    {args => <Navigation>{args.children}</Navigation>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Navigation} />

package/esm/utils/string.utils.d.ts

@@ -0,0 +1 @@
+export declare const capitalize: (str: string) => string;

package/esm/utils/string.utils.js

@@ -0,0 +1,2 @@
+export const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+//# sourceMappingURL=string.utils.js.map

package/esm/utils/string.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"string.utils.js","sourceRoot":"","sources":["../../src/utils/string.utils.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,GAAW,EAAE,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,GAAG,GAAG,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC"}

package/esm/utils/validator.utils.d.ts

@@ -0,0 +1,2 @@
+import { JSXElementConstructor, ReactElement, ReactNode, ReactPortal } from 'react';
+export declare const isSuiteElement: (element: string | number | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal, name: string) => boolean;

package/esm/utils/validator.utils.js

@@ -0,0 +1,5 @@
+import { isValidElement } from 'react';
+export const isSuiteElement = (element, name) => {
+    return isValidElement(element) && typeof element.type === 'function' && element.type.name === name;
+};
+//# sourceMappingURL=validator.utils.js.map

package/esm/utils/validator.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validator.utils.js","sourceRoot":"","sources":["../../src/utils/validator.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAA+D,cAAc,EAAE,MAAM,OAAO,CAAC;AAEpG,MAAM,CAAC,MAAM,cAAc,GAAG,CAC5B,OAAqH,EACrH,IAAY,EACZ,EAAE;IACF,OAAO,cAAc,CAAC,OAAO,CAAC,IAAI,OAAO,OAAO,CAAC,IAAI,KAAK,UAAU,IAAI,OAAO,CAAC,IAAI,CAAC,IAAI,KAAK,IAAI,CAAC;AACrG,CAAC,CAAC"}

package/lib/components/Button/Button.css

@@ -0,0 +1,93 @@
+.button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  line-height: 16px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all ease 0.3s;
+}
+.button > div {
+  margin-right: 8px;
+}
+.button > div:last-child {
+  margin-right: 0px;
+}
+/* ####### */
+/* BLOCK   */
+.button--block {
+  width: 100%;
+}
+/* ####### */
+/* SIZES   */
+.button--md {
+  height: 32px;
+  padding: 0 14px;
+}
+.button--md.button--icon-only {
+  width: 32px;
+  padding: 0;
+}
+.button--lg {
+  height: 40px;
+  padding: 0 16px;
+}
+.button--lg.button--icon-only {
+  width: 40px;
+  padding: 0;
+}
+/* ########## */
+/* VARIANTS   */
+.button--primary {
+  background: #007dbc;
+  color: #ffffff;
+}
+.button--primary:hover {
+  background: #00689d;
+}
+.button--secondary {
+  background: #e7f3f9;
+  color: #007dbc;
+}
+.button--secondary:hover {
+  background: #bedeef;
+}
+.button--success {
+  background: #02be8a;
+  color: #ffffff;
+}
+.button--success:hover {
+  background: #029e73;
+  color: #ffffff;
+}
+.button--ghost {
+  background: #ffffff;
+  color: #1d1d1b;
+  font-weight: 400;
+}
+.button--ghost:hover {
+  background: #e7f3f9;
+}
+.button--shadow {
+  box-shadow: 0px 12px 12px 0px #00537d1a;
+  background: #ffffff;
+  color: #4e5d6b;
+}
+/* ######### */
+/* ROUNDED   */
+.button--rounded {
+  border-radius: 9999px;
+}
+
+/* ######### */
+/* 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/lib/components/Button/Button.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { ButtonProps } from './Button.types';
+import './Button.css';
+export declare const Button: ({ children, icon, iconDirection, size, variant, block, rounded, onClick, }: PropsWithChildren<ButtonProps>) => React.JSX.Element;

package/lib/components/Button/Button.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = void 0;
+const React = require("react");
+const Icon_1 = require("../Icon/Icon");
+require("./Button.css");
+const Button = ({ children, icon, iconDirection = 'left', size = 'md', variant = 'primary', block, rounded, onClick, }) => {
+    // #########
+    // Rendering
+    return (React.createElement("button", { className: `
+        button button--${size} button--${variant}
+        ${block ? 'button--block' : ''}
+        ${rounded ? 'button--rounded' : ''}
+        ${icon && !children ? 'button--icon-only' : ''}
+      `, onClick: onClick },
+        icon && iconDirection === 'left' && React.createElement(Icon_1.Icon, { name: icon, size: "16" }),
+        children && React.createElement("div", null, children),
+        icon && iconDirection === 'right' && React.createElement(Icon_1.Icon, { name: icon, size: "16" })));
+};
+exports.Button = Button;
+//# sourceMappingURL=Button.js.map

package/lib/components/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,uCAAoC;AAEpC,wBAAsB;AAEf,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,aAAa,GAAG,MAAM,EACtB,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,KAAK,EACL,OAAO,EACP,OAAO,GACwB,EAAE,EAAE;IACnC,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,gCACE,SAAS,EAAE;yBACQ,IAAI,YAAY,OAAO;UACtC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE;UAC5B,OAAO,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,EAAE;UAChC,IAAI,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE;OAC/C,EACD,OAAO,EAAE,OAAO;QAEf,IAAI,IAAI,aAAa,KAAK,MAAM,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QAClE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC7D,CACV,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,MAAM,UA2BjB"}

package/lib/components/Button/Button.types.d.ts

@@ -0,0 +1,9 @@
+export type ButtonProps = {
+    icon?: string;
+    iconDirection?: 'left' | 'right';
+    size?: 'md' | 'lg';
+    variant?: 'primary' | 'secondary' | 'success' | 'ghost' | 'shadow';
+    block?: boolean;
+    rounded?: boolean;
+    onClick: () => void;
+};

package/lib/components/Button/Button.types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=Button.types.js.map

package/lib/components/Button/Button.types.js.map

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

package/lib/components/Button/__stories__/Button.stories.mdx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
+import { Button } from '../Button';
+import { icons } from '../../Icon/icons';
+
+<Meta title="Components/Button" />
+
+export const buttonArgTypes = {
+  children: {
+    control: 'text',
+    description: 'Child of the button.',
+  },
+  icon: {
+    control: 'select',
+    options: Object.keys(icons),
+    description: 'Icon of the button.',
+  },
+  iconDirection: {
+    control: 'inline-radio',
+    options: ['left', 'right'],
+    description: 'Define the direction of the icon.',
+    table: { defaultValue: { summary: 'left' } },
+  },
+  size: {
+    control: 'inline-radio',
+    options: ['md', 'lg'],
+    description: 'Define the size of the button.',
+    table: { defaultValue: { summary: 'md' } },
+  },
+  variant: {
+    control: 'inline-radio',
+    options: ['primary', 'secondary', 'success', 'ghost', 'shadow'],
+    description: "Variant of the button defining it's color and outline.",
+    table: { defaultValue: { summary: 'primary' } },
+  },
+  block: {
+    control: 'boolean',
+    description: 'Define if the button is full width',
+    table: { defaultValue: { summary: 'false' } },
+  },
+  rounded: {
+    control: 'boolean',
+    description: 'Define if the button has its corner full rounded',
+    table: { defaultValue: { summary: 'false' } },
+  },
+};
+
+# Button
+
+Buttons express what action will occur when the users clicks. Buttons are used to initialize an action, either in the background or foreground of an experience.
+
+## Overview
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      children: 'Button',
+      iconDirection: 'left',
+      size: 'md',
+      variant: 'primary',
+      block: false,
+      rounded: false,
+      onClick: () => {},
+    }}
+    argTypes={buttonArgTypes}
+  >
+    {args => <Button {...args}>{args.children}</Button>}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable story="Overview" of={Button} />