@dktunited-techoff/techoff-suite-ui 0.8.5 → 0.8.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dktunited-techoff/techoff-suite-ui",
-  "version": "0.8.5",
+  "version": "0.8.7",
   "main": "lib/index.js",
   "types": "./lib",
   "module": "esm/index.js",

package/src/components/Icon/icons/index.ts

@@ -24,7 +24,7 @@ export const icons: { [k: string]: string } = {
   'header-bikestudio': '<?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 238.9 17.2" style="enable-background:new 0 0 238.9 17.2;" xml:space="preserve"><style type="text/css">	.st0{fill:#152C47;}	.st1{font-family:\'Montserrat-Medium\';}	.st2{font-size:24px;}	.st3{font-family:\'Roboto-Light\';}	.st4{font-size:11px;}	.st5{fill:#020203;}	.st6{fill:#0D84C5;}	.st7{fill:#FFFFFF;}</style><text transform="matrix(1 0 0 1 -2.52 16.9922)" class="st0 st1 st2">BIKESTUDIO</text><text transform="matrix(1 0 0 1 165.1359 17.0155)" class="st3 st4">BY</text><path class="st5" d="M202.2,10.3c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8s2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L202.2,10.3z"/><polygon class="st5" points="188.2,7.7 194.1,7.7 194.1,9.5 190.2,9.5 190.2,11.4 193.6,11.4 193.6,13.2 190.2,13.2 190.2,15.2 	194.1,15.2 194.1,17 188.2,17 "/><polygon class="st5" points="226.7,7.5 232.2,7.5 232.2,9.4 228.6,9.4 228.6,11.7 231.7,11.7 231.7,13.5 228.6,13.5 228.6,16.9 	226.7,16.9 "/><polygon class="st5" points="233.3,7.5 238.9,7.5 238.9,9.4 235.3,9.4 235.3,11.7 238.4,11.7 238.4,13.5 235.3,13.5 235.3,16.9 	233.3,16.9 "/><polygon class="st5" points="210.7,13 206.7,13 206.7,16.9 204.8,16.9 204.8,7.5 206.7,7.5 206.7,11.1 210.7,11.1 210.7,7.5 	212.7,7.5 212.7,16.9 210.7,16.9 "/><polygon class="st5" points="180,7.7 187.1,7.7 187.1,9.6 184.6,9.6 184.6,17 182.6,17 182.6,9.6 180,9.6 "/><polyline class="st5" points="213.1,8.8 214.9,6 216.9,6 215.1,8.8 213.1,8.8 "/><path class="st5" d="M220.7,7.4c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8s4.8-2,4.8-4.8S223.5,7.4,220.7,7.4z"/><polygon class="st6" points="216.6,12.4 222.7,8.8 222.7,15.9 "/><polygon class="st7" points="220.6,17 220.5,13.6 217.7,15.4 "/></svg>',
   'header-nsc-helmet': '<?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 247.3 17" style="enable-background:new 0 0 247.3 17;" xml:space="preserve"><style type="text/css">	.st0{fill:#152C47;}	.st1{font-family:\'Montserrat-Medium\';}	.st2{font-size:24px;}	.st3{font-family:\'Roboto-Light\';}	.st4{font-size:11px;}	.st5{fill:#020203;}	.st6{fill:#0D84C5;}	.st7{fill:#FFFFFF;}</style><text transform="matrix(1 0 0 1 -2.52 16.8017)" class="st0 st1 st2">NSC HELMET</text><text transform="matrix(1 0 0 1 173.496 16.8009)" class="st3 st4">BY</text><path class="st5" d="M210.6,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1L212,15	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8s2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L210.6,10.1z"/><polygon class="st5" points="196.6,7.5 202.5,7.5 202.5,9.3 198.6,9.3 198.6,11.2 202,11.2 202,13 198.6,13 198.6,15 202.5,15 	202.5,16.8 196.6,16.8 "/><polygon class="st5" points="235.1,7.3 240.6,7.3 240.6,9.2 237,9.2 237,11.5 240.1,11.5 240.1,13.3 237,13.3 237,16.7 235.1,16.7 	"/><polygon class="st5" points="241.7,7.3 247.3,7.3 247.3,9.2 243.7,9.2 243.7,11.5 246.8,11.5 246.8,13.3 243.7,13.3 243.7,16.7 	241.7,16.7 "/><polygon class="st5" points="219.1,12.8 215.1,12.8 215.1,16.7 213.2,16.7 213.2,7.3 215.1,7.3 215.1,10.9 219.1,10.9 219.1,7.3 	221.1,7.3 221.1,16.7 219.1,16.7 "/><polygon class="st5" points="188.4,7.5 195.5,7.5 195.5,9.4 193,9.4 193,16.8 191,16.8 191,9.4 188.4,9.4 "/><polyline class="st5" points="221.5,8.6 223.3,5.8 225.3,5.8 223.5,8.6 221.5,8.6 "/><path class="st5" d="M229.1,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8s4.8-2,4.8-4.8S231.9,7.2,229.1,7.2z"/><polygon class="st6" points="225,12.2 231.1,8.6 231.1,15.7 "/><polygon class="st7" points="229,16.8 228.9,13.4 226.1,15.2 "/></svg>',
   'header-opticost': '<?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 211.7 17.2" style="enable-background:new 0 0 211.7 17.2;" xml:space="preserve"><style type="text/css">	.st0{fill:#152C47;}	.st1{font-family:\'Montserrat-Medium\';}	.st2{font-size:24px;}	.st3{font-family:\'Roboto-Light\';}	.st4{font-size:11px;}	.st5{fill:#020203;}	.st6{fill:#0D84C5;}	.st7{fill:#FFFFFF;}</style><text transform="matrix(1 0 0 1 -1.1519 16.9922)" class="st0 st1 st2">OPTICOST</text><text transform="matrix(1 0 0 1 137.907 16.9861)" class="st3 st4">BY</text><path class="st5" d="M175,10.3c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8s2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L175,10.3z"/><polygon class="st5" points="161,7.7 166.9,7.7 166.9,9.5 163,9.5 163,11.4 166.4,11.4 166.4,13.2 163,13.2 163,15.2 166.9,15.2 	166.9,17 161,17 "/><polygon class="st5" points="199.5,7.5 205,7.5 205,9.4 201.4,9.4 201.4,11.7 204.5,11.7 204.5,13.5 201.4,13.5 201.4,16.9 	199.5,16.9 "/><polygon class="st5" points="206.1,7.5 211.7,7.5 211.7,9.4 208.1,9.4 208.1,11.7 211.2,11.7 211.2,13.5 208.1,13.5 208.1,16.9 	206.1,16.9 "/><polygon class="st5" points="183.5,13 179.5,13 179.5,16.9 177.6,16.9 177.6,7.5 179.5,7.5 179.5,11.1 183.5,11.1 183.5,7.5 	185.5,7.5 185.5,16.9 183.5,16.9 "/><polygon class="st5" points="152.8,7.7 159.9,7.7 159.9,9.6 157.4,9.6 157.4,17 155.4,17 155.4,9.6 152.8,9.6 "/><polyline class="st5" points="185.9,8.8 187.7,6 189.7,6 187.9,8.8 185.9,8.8 "/><path class="st5" d="M193.5,7.4c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8s4.8-2,4.8-4.8S196.3,7.4,193.5,7.4z"/><polygon class="st6" points="189.4,12.4 195.5,8.8 195.5,15.9 "/><polygon class="st7" points="193.4,17 193.3,13.6 190.5,15.4 "/></svg>',
-  'header-reparability': '<?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 357.7 16.8" style="enable-background:new 0 0 357.7 16.8;" xml:space="preserve"><style type="text/css">	.st0{fill:#152C47 !important;}	.st1{font-family:\'Montserrat-Medium\' !important;}	.st2{font-size:24px !important;}	.st3{font-family:\'Roboto-Light\' !important;}	.st4{font-size:11px !important;}	.st5{fill:#020203 !important;}	.st6{fill:#0D84C5 !important;}	.st7{fill:#FFFFFF !important;}</style><text transform="matrix(1 0 0 1 -2.52 16.7998)" class="st0 st1 st2">REPAIRABILITY INDEX</text><text transform="matrix(1 0 0 1 283.9413 16.7998)" class="st3 st4">BY</text><path class="st5" d="M321,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8c0-2.8,2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L321,10.1z"/><polygon class="st5" points="307,7.5 312.9,7.5 312.9,9.3 309,9.3 309,11.2 312.4,11.2 312.4,13 309,13 309,15 312.9,15 312.9,16.8 	307,16.8 "/><polygon class="st5" points="345.5,7.3 351,7.3 351,9.2 347.4,9.2 347.4,11.5 350.5,11.5 350.5,13.3 347.4,13.3 347.4,16.7 	345.5,16.7 "/><polygon class="st5" points="352.1,7.3 357.7,7.3 357.7,9.2 354.1,9.2 354.1,11.5 357.2,11.5 357.2,13.3 354.1,13.3 354.1,16.7 	352.1,16.7 "/><polygon class="st5" points="329.5,12.8 325.5,12.8 325.5,16.7 323.6,16.7 323.6,7.3 325.5,7.3 325.5,10.9 329.5,10.9 329.5,7.3 	331.5,7.3 331.5,16.7 329.5,16.7 "/><polygon class="st5" points="298.8,7.5 305.9,7.5 305.9,9.4 303.4,9.4 303.4,16.8 301.4,16.8 301.4,9.4 298.8,9.4 "/><polyline class="st5" points="331.9,8.6 333.7,5.8 335.7,5.8 333.9,8.6 331.9,8.6 "/><path class="st5" d="M339.5,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8c2.8,0,4.8-2,4.8-4.8S342.3,7.2,339.5,7.2z"/><polygon class="st6" points="335.4,12.2 341.5,8.6 341.5,15.7 "/><polygon class="st7" points="339.4,16.8 339.3,13.4 336.5,15.2 "/></svg>',
+  'header-repairability': '<?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 357.7 16.8" style="enable-background:new 0 0 357.7 16.8;" xml:space="preserve"><style type="text/css">	.st0{fill:#152C47 !important;}	.st1{font-family:\'Montserrat-Medium\' !important;}	.st2{font-size:24px !important;}	.st3{font-family:\'Roboto-Light\' !important;}	.st4{font-size:11px !important;}	.st5{fill:#020203 !important;}	.st6{fill:#0D84C5 !important;}	.st7{fill:#FFFFFF !important;}</style><text transform="matrix(1 0 0 1 -2.52 16.7998)" class="st0 st1 st2">REPAIRABILITY INDEX</text><text transform="matrix(1 0 0 1 283.9413 16.7998)" class="st3 st4">BY</text><path class="st5" d="M321,10.1c-0.5-0.6-1.3-0.9-2.2-0.9c-1.6,0-2.8,1.2-2.8,2.8s1.2,2.8,2.8,2.8c0.9,0,1.7-0.4,2.2-1.1l1.4,1.3	c-0.9,1.1-2.1,1.7-3.6,1.7c-2.8,0-4.8-2-4.8-4.8c0-2.8,2-4.8,4.8-4.8c1.4,0,2.7,0.5,3.6,1.5L321,10.1z"/><polygon class="st5" points="307,7.5 312.9,7.5 312.9,9.3 309,9.3 309,11.2 312.4,11.2 312.4,13 309,13 309,15 312.9,15 312.9,16.8 	307,16.8 "/><polygon class="st5" points="345.5,7.3 351,7.3 351,9.2 347.4,9.2 347.4,11.5 350.5,11.5 350.5,13.3 347.4,13.3 347.4,16.7 	345.5,16.7 "/><polygon class="st5" points="352.1,7.3 357.7,7.3 357.7,9.2 354.1,9.2 354.1,11.5 357.2,11.5 357.2,13.3 354.1,13.3 354.1,16.7 	352.1,16.7 "/><polygon class="st5" points="329.5,12.8 325.5,12.8 325.5,16.7 323.6,16.7 323.6,7.3 325.5,7.3 325.5,10.9 329.5,10.9 329.5,7.3 	331.5,7.3 331.5,16.7 329.5,16.7 "/><polygon class="st5" points="298.8,7.5 305.9,7.5 305.9,9.4 303.4,9.4 303.4,16.8 301.4,16.8 301.4,9.4 298.8,9.4 "/><polyline class="st5" points="331.9,8.6 333.7,5.8 335.7,5.8 333.9,8.6 331.9,8.6 "/><path class="st5" d="M339.5,7.2c-2.8,0-4.8,2-4.8,4.8s2,4.8,4.8,4.8c2.8,0,4.8-2,4.8-4.8S342.3,7.2,339.5,7.2z"/><polygon class="st6" points="335.4,12.2 341.5,8.6 341.5,15.7 "/><polygon class="st7" points="339.4,16.8 339.3,13.4 336.5,15.2 "/></svg>',
   'heart-fill': '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M16.5 3C19.538 3 22 5.5 22 9C22 16 14.5 20 12 21.5C9.5 20 2 16 2 9C2 5.5 4.5 3 7.5 3C9.36 3 11 4 12 5C13 4 14.64 3 16.5 3Z"/></svg>',
   'heart': '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22 9C22 5.5 19.538 3 16.5 3C14.64 3 13 4 12 5C11 4 9.36 3 7.5 3C4.5 3 2 5.5 2 9C2 15.6009 8.66916 19.5341 11.5259 21.219C11.6987 21.3208 11.8575 21.4145 12 21.5C12.1425 21.4145 12.3013 21.3208 12.4741 21.219C15.3308 19.5341 22 15.6009 22 9ZM15.354 16.903C14.61 17.495 13.815 18.048 12.934 18.604C12.635 18.792 12.339 18.973 12 19.175C11.661 18.973 11.365 18.792 11.066 18.603C10.185 18.048 9.39 17.495 8.645 16.903C5.666 14.533 4 11.944 4 9C4 6.656 5.56 5 7.5 5C8.576 5 9.74 5.57 10.586 6.414L12 7.828L13.414 6.414C14.26 5.57 15.424 5 16.5 5C18.463 5 20 6.64 20 9C20 11.943 18.335 14.533 15.354 16.903Z"/></svg>',
   'home': '<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M4 20.6484C4 21.2006 4.44772 21.6484 5 21.6484H19C19.5523 21.6484 20 21.2006 20 20.6484V11.6484H23L12.673 2.26036C12.2915 1.91321 11.7085 1.91321 11.327 2.26036L1 11.6484H4V20.6484ZM18 9.80536V19.6484H6V9.80536L12 4.35136L18 9.80536Z"/></svg>',

package/src/layouts/Header/Header.css

@@ -1,7 +1,11 @@
 @font-face {
-  font-family: 'Montserrat';
+  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   */
@@ -13,6 +17,12 @@ header {
   height: 64px;
   padding: 0 24px;
 }
+.ts-header-left-side {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  height: 100%;
+}
 .header-actions {
   display: flex;
 }
@@ -20,30 +30,12 @@ header {
   margin-left: 12px;
 }
 
-/* ############## */
-/* HEADER TITLE   */
-.header-title-container {
+/* ################ */
+/* HEADER TECHOFF   */
+.ts-header-techoff {
   display: flex;
-  align-items: flex-end;
-  height: 30px;
-}
-.header-title {
-  font-family: 'Montserrat';
-  font-size: 25px;
-  line-height: 19px;
-  text-transform: uppercase;
-}
-.header-by {
-  margin-left: 15px;
-  font-family: 'Montserrat';
-  font-size: 12px;
-  line-height: 10px;
-  text-transform: uppercase;
-}
-.header-techoff {
-  width: 64px;
+  height: 18px;
   margin-left: 4px;
-  margin-bottom: -2px;
 }
 
 /* ################ */

package/src/layouts/Header/Header.tsx

@@ -1,17 +1,22 @@
 import * as React from 'react';
 import { Children, PropsWithChildren } from 'react';
+import { icons } from '../../components/Icon/icons';
 import { isSuiteElement } from '../../utils/validator.utils';
+import { HeaderProps } from './Header.types';
 import './Header.css';
 
-export const Header = ({ children }: PropsWithChildren) => {
-  const titleElement = Children.toArray(children).find(c => isSuiteElement(c, 'HeaderTitle'));
-  const actionsElement = Children.toArray(children).find(c => isSuiteElement(c, 'HeaderActions'));
+export const Header = (props: HeaderProps & PropsWithChildren) => {
+  const actionsElement = Children.toArray(props.children).find(c => isSuiteElement(c, 'HeaderActions'));
+
+  console.log(props);
 
   // #########
   // Rendering
   return (
     <header>
-      <div>{titleElement}</div>
+      <div className="ts-header-left-side">
+        <div className="ts-header-techoff" dangerouslySetInnerHTML={{ __html: icons[`header-${props.appName}`] }} />
+      </div>
       <div>{actionsElement}</div>
     </header>
   );

package/src/layouts/Header/Header.types.ts

@@ -1 +1,2 @@
+export type HeaderProps = { appName: 'bikestudio' | 'nsc-helmet' | 'opticost' | 'repairability' };
 export type HeaderProfileProps = { firstname: string; lastname: string };

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

@@ -2,12 +2,19 @@ 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" />
 
+export const headerArgTypes = {
+  appName: {
+    control: 'select',
+    options: ['bikestudio', 'nsc-helmet', 'opticost', 'repairability'],
+    description: 'Icon of the button.',
+  },
+};
+
 # 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.
@@ -18,16 +25,17 @@ The header will allow users to quickly find the information they need at a glanc
   <Story
     name="Overview"
     args={{
+      appName: 'repairability',
       children: [
-        <HeaderTitle>Techoff Suite UI</HeaderTitle>,
         <HeaderActions>
           <Button icon="plus" size="lg" variant="shadow" rounded onClick={() => {}} />
           <HeaderProfile firstname="John" lastname="Doe" />
         </HeaderActions>,
       ],
     }}
+    argTypes={headerArgTypes}
   >
-    {args => <Header>{args.children}</Header>}
+    {args => <Header {...args}>{args.children}</Header>}
   </Story>
 </Canvas>
 

package/src/layouts/Navigation/Navigation.css

@@ -49,7 +49,7 @@
   flex: 1;
   height: 1px;
   margin: 4px 0;
-  background: #b3bac3;
+  background: #bedeef;
 }
 
 /* ######### */

package/esm/components/Button/Button.css

@@ -1,93 +0,0 @@
-.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/esm/components/Button/Button.d.ts

@@ -1,5 +0,0 @@
-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/esm/components/Button/Button.js

@@ -1,17 +0,0 @@
-import * as React from 'react';
-import { Icon } from '../Icon/Icon';
-import './Button.css';
-export 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, { name: icon, size: "16" }),
-        children && React.createElement("div", null, children),
-        icon && iconDirection === 'right' && React.createElement(Icon, { name: icon, size: "16" })));
-};
-//# sourceMappingURL=Button.js.map

package/esm/components/Button/Button.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,cAAc,CAAC;AAEtB,MAAM,CAAC,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,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG;QAClE,QAAQ,IAAI,iCAAM,QAAQ,CAAO;QACjC,IAAI,IAAI,aAAa,KAAK,OAAO,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC7D,CACV,CAAC;AACJ,CAAC,CAAC"}

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

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

package/esm/components/Button/Button.types.js

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

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

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

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

@@ -1,74 +0,0 @@
-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} />

package/esm/components/Checkbox/Checkbox.css

@@ -1,61 +0,0 @@
-.checkbox {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-/* ##### */
-/* BOX   */
-.checkbox:hover .checkbox-box {
-  background: #e7f3f9;
-}
-.checkbox-box {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 6px;
-  color: #007dbc;
-  transition: all ease 0.3s;
-}
-.checkbox-box::before {
-  content: '';
-  position: absolute;
-  width: 16px;
-  height: 16px;
-  border-radius: 6px;
-  background: #ffffff;
-  z-index: 10;
-}
-.checkbox-box .icon {
-  z-index: 20;
-}
-
-/* ################# */
-/* LABEL / CAPTION   */
-.checkbox-container {
-  width: 100%;
-  margin-left: 4px;
-  padding: 4px 8px;
-  border-radius: 6px;
-}
-.checkbox-container--with-caption .checkbox-label {
-  color: #007dbc;
-  font-weight: 700;
-}
-.checkbox-caption {
-  color: #404040;
-  font-size: 12px;
-  font-style: italic;
-}
-
-/* ######### */
-/* 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/Checkbox/Checkbox.d.ts

@@ -1,7 +0,0 @@
-import * as React from 'react';
-import { PropsWithChildren } from 'react';
-import { CheckboxProps } from './Checkbox.types';
-import './Checkbox.css';
-export declare const CheckboxLabel: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const CheckboxCaption: ({ children }: PropsWithChildren) => React.JSX.Element;
-export declare const Checkbox: ({ children, checked, onChange }: PropsWithChildren<CheckboxProps>) => React.JSX.Element;

package/esm/components/Checkbox/Checkbox.js

@@ -1,21 +0,0 @@
-import * as React from 'react';
-import { Children } from 'react';
-import { isSuiteElement } from '../../utils/validator.utils';
-import { Icon } from '../Icon/Icon';
-import './Checkbox.css';
-export const CheckboxLabel = ({ children }) => React.createElement("div", { className: "checkbox-label" }, children);
-export const CheckboxCaption = ({ children }) => React.createElement("div", { className: "checkbox-caption" }, children);
-export const Checkbox = ({ children, checked, onChange }) => {
-    const labelElement = Children.toArray(children).find(c => isSuiteElement(c, 'CheckboxLabel'));
-    const captionElement = Children.toArray(children).find(c => isSuiteElement(c, 'CheckboxCaption'));
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "checkbox", onClick: () => onChange(!checked) },
-        React.createElement("div", { className: "checkbox-box" },
-            checked && React.createElement(Icon, { name: "square-check-filled" }),
-            !checked && React.createElement(Icon, { name: "square" })),
-        React.createElement("div", { className: `checkbox-container ${captionElement ? 'checkbox-container--with-caption' : ''}` },
-            labelElement,
-            captionElement)));
-};
-//# sourceMappingURL=Checkbox.js.map

package/esm/components/Checkbox/Checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.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,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,OAAO,gBAAgB,CAAC;AAExB,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE,CAAC,6BAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAAC;AACnH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAqB,EAAE,EAAE,CAAC,6BAAK,SAAS,EAAC,kBAAkB,IAAE,QAAQ,CAAO,CAAC;AAEvH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAoC,EAAE,EAAE;IAC5F,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,eAAe,CAAC,CAAC,CAAC;IAC9F,MAAM,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,cAAc,CAAC,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAElG,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,UAAU,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC;QACzD,6BAAK,SAAS,EAAC,cAAc;YAC1B,OAAO,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,qBAAqB,GAAG;YAC9C,CAAC,OAAO,IAAI,oBAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,GAAG,CAC/B;QAEN,6BAAK,SAAS,EAAE,sBAAsB,cAAc,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7F,YAAY;YACZ,cAAc,CACX,CACF,CACP,CAAC;AACJ,CAAC,CAAC"}

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

@@ -1,4 +0,0 @@
-export type CheckboxProps = {
-    checked?: boolean;
-    onChange: (value: boolean) => void;
-};

package/esm/components/Checkbox/Checkbox.types.js

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

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

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

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

@@ -1,43 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { Checkbox, CheckboxLabel, CheckboxCaption } from '../Checkbox';
-
-<Meta title="Components/Checkbox" />
-
-export const checkboxArgTypes = {
-  checked: {
-    control: 'boolean',
-    description: 'State of the checkbox.',
-    table: { defaultValue: { summary: 'false' } },
-  },
-};
-
-# Checkbox
-
-Checkboxes are applied when users can select all, several, or none of the options from a given list.
-
-## Overview
-
-<Canvas>
-  <Story
-    name="Overview"
-    args={{
-      children: [
-        <CheckboxLabel>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</CheckboxLabel>,
-        <CheckboxCaption>
-          Auctor nisl justo, sed posuere est dignissim nec. Integer ultricies, metus ac imperdiet ullamcorper, est justo
-          viverra nisl, in posuere dui urna eget quam.
-        </CheckboxCaption>,
-      ],
-      checked: false,
-      onChange: () => {},
-    }}
-    argTypes={checkboxArgTypes}
-  >
-    {args => <Checkbox {...args}>{args.children}</Checkbox>}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={Checkbox} />

package/esm/components/Icon/Icon.css

@@ -1,26 +0,0 @@
-.icon--16 {
-  width: 16px;
-  height: 16px;
-}
-.icon--20 {
-  width: 20px;
-  height: 20px;
-}
-.icon--24 {
-  width: 24px;
-  height: 24px;
-}
-.icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-/* ######### */
-/* 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/Icon/Icon.d.ts

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

package/esm/components/Icon/Icon.js

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { icons } from './icons';
-import './Icon.css';
-export const Icon = ({ name, size = '20' }) => {
-    const icon = icons[name];
-    // #########
-    // Rendering
-    if (!icon)
-        return React.createElement(React.Fragment, null);
-    return React.createElement("div", { className: `icon icon--${size}`, dangerouslySetInnerHTML: { __html: icon } });
-};
-//# sourceMappingURL=Icon.js.map

package/esm/components/Icon/Icon.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,YAAY,CAAC;AAEpB,MAAM,CAAC,MAAM,IAAI,GAAG,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAa,EAAE,EAAE;IACvD,MAAM,IAAI,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;IAEzB,YAAY;IACZ,YAAY;IACZ,IAAI,CAAC,IAAI;QAAE,OAAO,yCAAK,CAAC;IACxB,OAAO,6BAAK,SAAS,EAAE,cAAc,IAAI,EAAE,EAAE,uBAAuB,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,GAAI,CAAC;AAC7F,CAAC,CAAC"}

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

@@ -1,4 +0,0 @@
-export type IconProps = {
-    name: string;
-    size?: '16' | '20' | '24';
-};

package/esm/components/Icon/Icon.types.js

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

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

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