@dktunited-techoff/techoff-suite-ui 1.1.0 → 1.2.0

package/lib/layouts/Header/HeaderProfile.js

@@ -1,43 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderProfile = exports.HeaderProfileItem = void 0;
-const React = require("react");
-const react_1 = require("react");
-const Icon_1 = require("../../components/Icon/Icon");
-const use_click_outside_1 = require("../../hooks/use-click-outside");
-const string_utils_1 = require("../../utils/string.utils");
-const HeaderProfileItem = ({ icon, label, link }) => {
-    // ########
-    // Handlers
-    const handleNavigate = () => window.open(link, '_blank', 'noreferrer');
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "header-profile-menu-item", onClick: handleNavigate },
-        React.createElement("div", { className: "header-profile-menu-item-icon" },
-            React.createElement(Icon_1.Icon, { name: icon, size: "16" })),
-        React.createElement("div", { className: "header-profile-menu-item-label" }, label),
-        React.createElement("div", { className: "header-profile-menu-item-icon" },
-            React.createElement(Icon_1.Icon, { name: "external-link", size: "16" }))));
-};
-exports.HeaderProfileItem = HeaderProfileItem;
-const HeaderProfile = ({ children, firstname, lastname }) => {
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
-    const ref = (0, use_click_outside_1.useClickOutside)(() => setIsOpen(false));
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "header-profile-container", ref: ref },
-        React.createElement("div", { className: "header-profile-dropdown", onClick: () => children && setIsOpen(prev => !prev) },
-            React.createElement("div", { className: "header-profile-img-container" },
-                React.createElement("div", { className: "header-profile-img-icon" },
-                    React.createElement(Icon_1.Icon, { name: "user", size: "16" }))),
-            React.createElement("div", { className: "header-profile-name" },
-                (0, string_utils_1.capitalize)(firstname),
-                " ",
-                lastname.charAt(0).toUpperCase(),
-                "."),
-            children && (React.createElement("div", { className: "header-profile-chevron" },
-                React.createElement(Icon_1.Icon, { name: isOpen ? 'chevron-up' : 'chevron-down', size: "16" })))),
-        isOpen && React.createElement("div", { className: "header-profile-menu" }, children)));
-};
-exports.HeaderProfile = HeaderProfile;
-//# sourceMappingURL=HeaderProfile.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderProfile.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderProfile.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAC/B,iCAAoD;AACpD,qDAAkD;AAClD,qEAAgE;AAChE,2DAAsD;AAG/C,MAAM,iBAAiB,GAAG,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAA0B,EAAE,EAAE;IACjF,WAAW;IACX,WAAW;IACX,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC;IAEvE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,0BAA0B,EAAC,OAAO,EAAE,cAAc;QAC/D,6BAAK,SAAS,EAAC,+BAA+B;YAC5C,oBAAC,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B;QACN,6BAAK,SAAS,EAAC,gCAAgC,IAAE,KAAK,CAAO;QAC7D,6BAAK,SAAS,EAAC,+BAA+B;YAC5C,oBAAC,WAAI,IAAC,IAAI,EAAC,eAAe,EAAC,IAAI,EAAC,IAAI,GAAG,CACnC,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,iBAAiB,qBAkB5B;AAEK,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAA0C,EAAE,EAAE;IACzG,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,IAAA,mCAAe,EAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAEpD,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,0BAA0B,EAAC,GAAG,EAAE,GAAG;QAChD,6BAAK,SAAS,EAAC,yBAAyB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,IAAI,SAAS,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC;YAC1F,6BAAK,SAAS,EAAC,8BAA8B;gBAC3C,6BAAK,SAAS,EAAC,yBAAyB;oBACtC,oBAAC,WAAI,IAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,GAAG,CAC1B,CACF;YACN,6BAAK,SAAS,EAAC,qBAAqB;gBACjC,IAAA,yBAAU,EAAC,SAAS,CAAC;;gBAAG,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE;oBACrD;YAEL,QAAQ,IAAI,CACX,6BAAK,SAAS,EAAC,wBAAwB;gBACrC,oBAAC,WAAI,IAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,cAAc,EAAE,IAAI,EAAC,IAAI,GAAG,CAC5D,CACP,CACG;QAEL,MAAM,IAAI,6BAAK,SAAS,EAAC,qBAAqB,IAAE,QAAQ,CAAO,CAC5D,CACP,CAAC;AACJ,CAAC,CAAC;AA5BW,QAAA,aAAa,iBA4BxB"}

package/lib/layouts/Header/HeaderSearch.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { HeaderSearchProps } from './Header.types';
-export declare const HeaderSearch: ({ getItemLabel, getItemValue, loadItems, noDataLabel, placeholder, onChange, }: HeaderSearchProps) => React.JSX.Element;

package/lib/layouts/Header/HeaderSearch.js

@@ -1,64 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.HeaderSearch = void 0;
-const React = require("react");
-const react_1 = require("react");
-const Input_1 = require("../../components/Inputs/Input/Input");
-const Loader_1 = require("../../components/Loader/Loader");
-const use_click_outside_1 = require("../../hooks/use-click-outside");
-const HeaderSearch = ({ getItemLabel, getItemValue, loadItems, noDataLabel, placeholder, onChange, }) => {
-    const [searchValue, setSearchValue] = (0, react_1.useState)('');
-    const [items, setItems] = (0, react_1.useState)([]);
-    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-    const [showItems, setShowItems] = (0, react_1.useState)(false);
-    const ref = (0, use_click_outside_1.useClickOutside)(() => setShowItems(false));
-    // #######
-    // Helpers
-    const getBeforeMatch = (item) => {
-        const label = getItemLabel(item);
-        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
-        return label.substring(0, matchStartIndex);
-    };
-    const getMatch = (item) => {
-        const label = getItemLabel(item);
-        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
-        const matchEndIndex = matchStartIndex + searchValue.length;
-        return label.substring(matchStartIndex, matchEndIndex);
-    };
-    const getAfterMatch = (item) => {
-        const label = getItemLabel(item);
-        const matchStartIndex = label.toLowerCase().indexOf(searchValue.toLowerCase());
-        const matchEndIndex = matchStartIndex + searchValue.length;
-        return label.substring(matchEndIndex);
-    };
-    // ########
-    // Watchers
-    (0, react_1.useEffect)(() => {
-        if (searchValue === '') {
-            setShowItems(false);
-            setItems([]);
-            setIsLoading(false);
-        }
-        else {
-            setShowItems(true);
-            setIsLoading(true);
-            loadItems(searchValue)
-                .then(setItems)
-                .finally(() => setIsLoading(false));
-        }
-    }, [searchValue]);
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "header-search", ref: ref },
-        React.createElement(Input_1.Input, { placeholder: placeholder, icon: "search", size: "lg", value: searchValue, variant: "shadow", resetable: true, rounded: true, onChange: setSearchValue, onFocus: () => setShowItems(true) }),
-        showItems && searchValue !== '' && (React.createElement("div", { className: "header-search-items-container" },
-            isLoading && (React.createElement("div", { className: "header-search-loading" },
-                React.createElement(Loader_1.Loader, { size: "sm" }))),
-            !isLoading && items.length === 0 && React.createElement("div", { className: "header-search-no-items" }, noDataLabel),
-            !isLoading && items.length > 0 && (React.createElement("div", { className: "header-search-items" }, items.map(item => (React.createElement("div", { className: "header-search-item", onClick: () => onChange(getItemValue(item)) },
-                getBeforeMatch(item),
-                React.createElement("span", { className: "header-search-item--match" }, getMatch(item)),
-                getAfterMatch(item))))))))));
-};
-exports.HeaderSearch = HeaderSearch;
-//# sourceMappingURL=HeaderSearch.js.map

package/lib/layouts/Header/HeaderSearch.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"HeaderSearch.js","sourceRoot":"","sources":["../../../src/layouts/Header/HeaderSearch.tsx"],"names":[],"mappings":"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"}

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

@@ -1,71 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { Header } from '../Header';
-import { HeaderProfile, HeaderProfileItem } from '../HeaderProfile';
-import { HeaderSearch } from '../HeaderSearch';
-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.',
-  },
-};
-
-export const loadItems = () => {
-  return Promise.resolve([
-    { id: 1, label: 'Item 1' },
-    { id: 2, label: 'Item 2' },
-    { id: 3, label: 'Item 3' },
-    { id: 4, label: 'Item 4' },
-    { id: 5, label: 'Item 5' },
-    { id: 6, label: 'Item 6' },
-    { id: 7, label: 'Item 7' },
-    { id: 8, label: 'Item 8' },
-    { id: 9, label: 'Item 9' },
-  ]);
-};
-
-# 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={{
-      actions: (
-        <>
-          <Button icon="add" size="lg" variant="shadow" rounded />
-          <HeaderProfile firstname="John" lastname="Doe">
-            <HeaderProfileItem icon="alert-triangle" label="Contact support" link="" />
-            <HeaderProfileItem icon="award" label="Trainings" link="" />
-          </HeaderProfile>
-        </>
-      ),
-      appName: 'repairability',
-      search: (
-        <HeaderSearch
-          getItemLabel={item => item.label}
-          getItemValue={item => item.id}
-          loadItems={loadItems}
-          noDataLabel="No item found."
-          placeholder="Search something in the application"
-          onChange={() => {}}
-        />
-      ),
-    }}
-    argTypes={headerArgTypes}
-  >
-    {args => <Header {...args} />}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={Header} />

package/lib/layouts/Navigation/Navigation.css

@@ -1,74 +0,0 @@
-.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: #bedeef;
-}
-
-/* ######### */
-/* 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/lib/layouts/Navigation/Navigation.d.ts

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

package/lib/layouts/Navigation/Navigation.js

@@ -1,35 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Navigation = exports.NavigationBreadcrumbItem = exports.NavigationBreadcrumbDivider = void 0;
-const React = require("react");
-const Icon_1 = require("../../components/Icon/Icon");
-require("./Navigation.css");
-const NavigationBreadcrumbDivider = () => {
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "breadcrumb-chevron" },
-        React.createElement(Icon_1.Icon, { name: "chevron-right" })));
-};
-exports.NavigationBreadcrumbDivider = NavigationBreadcrumbDivider;
-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_1.Icon, { name: icon, size: "16" }))),
-        children));
-};
-exports.NavigationBreadcrumbItem = NavigationBreadcrumbItem;
-const Navigation = ({ actions, breadcrumbs }) => {
-    // #########
-    // Rendering
-    return (React.createElement("div", { className: "navigation" },
-        React.createElement("div", { className: "breadcrumb" }, breadcrumbs),
-        React.createElement("div", { className: "navigation-divider" }),
-        React.createElement("div", { className: "navigation-actions" }, actions)));
-};
-exports.Navigation = Navigation;
-//# sourceMappingURL=Navigation.js.map

package/lib/layouts/Navigation/Navigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Navigation.js","sourceRoot":"","sources":["../../../src/layouts/Navigation/Navigation.tsx"],"names":[],"mappings":";;;AAAA,+BAA+B;AAE/B,qDAAkD;AAElD,4BAA0B;AAEnB,MAAM,2BAA2B,GAAG,GAAG,EAAE;IAC9C,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,oBAAoB;QACjC,oBAAC,WAAI,IAAC,IAAI,EAAC,eAAe,GAAG,CACzB,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,2BAA2B,+BAQtC;AAEK,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,WAAI,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,IAAI,GAAG,CAC1B,CACP;QAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,wBAAwB,4BAyBnC;AAEK,MAAM,UAAU,GAAG,CAAC,EAAE,OAAO,EAAE,WAAW,EAAmB,EAAE,EAAE;IACtE,YAAY;IACZ,YAAY;IACZ,OAAO,CACL,6BAAK,SAAS,EAAC,YAAY;QACzB,6BAAK,SAAS,EAAC,YAAY,IAAE,WAAW,CAAO;QAC/C,6BAAK,SAAS,EAAC,oBAAoB,GAAG;QACtC,6BAAK,SAAS,EAAC,oBAAoB,IAAE,OAAO,CAAO,CAC/C,CACP,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,UAAU,cAUrB"}

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

@@ -1,10 +0,0 @@
-import { ReactElement } from 'react';
-export type NavigationProps = {
-    actions?: ReactElement;
-    breadcrumbs: ReactElement;
-};
-export type NavigationBreadcrumbItemProps = {
-    icon?: string;
-    highlight?: boolean;
-    onClick?: () => void;
-};

package/lib/layouts/Navigation/Navigation.types.js

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

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

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

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

@@ -1,51 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { Navigation, NavigationBreadcrumbItem, NavigationBreadcrumbDivider } from '../Navigation';
-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={{
-      actions: (
-        <>
-          <Button icon="check" onClick={() => {}}>
-            Action 1
-          </Button>
-          <Button icon="add" onClick={() => {}}>
-            Action 2
-          </Button>
-        </>
-      ),
-      breadcrumbs: (
-        <>
-        <NavigationBreadcrumbItem icon="home" onClick={() => {}}>
-          Home
-        </NavigationBreadcrumbItem>
-        <NavigationBreadcrumbDivider />
-        <NavigationBreadcrumbItem onClick={() => {}}>Menu Item 1</NavigationBreadcrumbItem>
-        <NavigationBreadcrumbDivider />
-        <NavigationBreadcrumbItem highlight>Menu Item 2</NavigationBreadcrumbItem>
-        </>
-      )
-    }}
-
->
-
-    {args => <Navigation {...args} />}
-
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={Navigation} />

package/lib/utils/string.utils.d.ts

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

package/lib/utils/string.utils.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.capitalize = void 0;
-const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-exports.capitalize = capitalize;
-//# sourceMappingURL=string.utils.js.map

package/lib/utils/string.utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"string.utils.js","sourceRoot":"","sources":["../../src/utils/string.utils.ts"],"names":[],"mappings":";;;AAAO,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;AAAvF,QAAA,UAAU,cAA6E"}

package/src/components/Checkbox/Checkbox.css

@@ -1,72 +0,0 @@
-.checkbox {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-}
-/* ########## */
-/* DISABLED   */
-.checkbox--disabled {
-  cursor: not-allowed;
-}
-.checkbox--disabled .checkbox-box {
-  color: #999999;
-}
-.checkbox--disabled:hover .checkbox-box {
-  background: transparent;
-}
-/* ##### */
-/* 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/src/components/Checkbox/Checkbox.tsx

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import { Icon } from '../Icon/Icon';
-import { CheckboxProps } from './Checkbox.types';
-import './Checkbox.css';
-
-export const Checkbox = ({ caption, label, checked, disabled, onChange }: CheckboxProps) => {
-  // ########
-  // Handlers
-  const handleChange = () => !disabled && onChange(!checked);
-
-  // #########
-  // Rendering
-  return (
-    <div className={`checkbox ${disabled ? 'checkbox--disabled' : ''}`} onClick={handleChange}>
-      <div className="checkbox-box">
-        {checked && <Icon name="check-square-filled" />}
-        {!checked && <Icon name="square" />}
-      </div>
-
-      <div className={`checkbox-container ${caption ? 'checkbox-container--with-caption' : ''}`}>
-        <div className="checkbox-label">{label}</div>
-        {caption && <div className="checkbox-caption">{caption}</div>}
-      </div>
-    </div>
-  );
-};

package/src/components/Checkbox/Checkbox.types.ts

@@ -1,7 +0,0 @@
-export type CheckboxProps = {
-  caption?: string;
-  label: string;
-  checked?: boolean;
-  disabled?: boolean;
-  onChange: (value: boolean) => void;
-};

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

@@ -1,56 +0,0 @@
-import React from 'react';
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/blocks';
-import { Checkbox } from '../Checkbox';
-
-<Meta title="Components/Checkbox" />
-
-export const checkboxArgTypes = {
-  caption: {
-    control: 'text',
-    description: 'Caption of the checkbox.',
-  },
-  label: {
-    control: 'text',
-    description: 'Label of the checkbox.',
-  },
-  checked: {
-    control: 'boolean',
-    description: 'State of the checkbox.',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  disabled: {
-    control: 'boolean',
-    description: 'Enable state of the checkbox.',
-    table: { defaultValue: { summary: 'false' } },
-  },
-  onChange: {
-    control: 'function',
-    description: 'The handler called when clicking on the checkbox.',
-  },
-};
-
-# 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={{
-      label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-      caption:
-        'Auctor nisl justo, sed posuere est dignissim nec. Integer ultricies, metus ac imperdiet ullamcorper, est justo viverra nisl, in posuere dui urna eget quam.',
-      checked: false,
-      disabled: false,
-    }}
-    argTypes={checkboxArgTypes}
-  >
-    {args => <Checkbox {...args}>{args.children}</Checkbox>}
-  </Story>
-</Canvas>
-
-## Props
-
-<ArgsTable story="Overview" of={Checkbox} />

package/src/components/Inputs/BooleanInput/BooleanInput.css

@@ -1,58 +0,0 @@
-.boolean-input {
-  display: flex;
-  flex-direction: column;
-}
-.boolean-input > label {
-  display: block;
-  margin-bottom: 4px;
-  color: #012b49;
-  font-weight: 700;
-}
-.boolean-input-container {
-  display: flex;
-}
-
-.boolean-input--disabled {
-  opacity: 0.5;
-}
-.boolean-input--disabled .boolean-input-content > div {
-  cursor: not-allowed;
-}
-
-/* ######## */
-/* INPUTS   */
-.boolean-input-content {
-  display: flex;
-  height: 32px;
-  border-radius: 6px;
-  overflow: hidden;
-}
-.boolean-input-content > div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 44px;
-  padding: 12px;
-  background: #e7f3f9;
-  color: #007dbc;
-  font-weight: 700;
-  cursor: pointer;
-  transition: all ease 0.3s;
-}
-.boolean-input-content > div:first-child {
-  border-right: 1px solid #007dbc;
-}
-.boolean-input-content > .boolean-input--selected {
-  background: #007dbc;
-  color: #ffffff;
-}
-
-/* ######### */
-/* 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/src/components/Inputs/BooleanInput/BooleanInput.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import { BooleanInputProps } from './BooleanInput.types';
-import './BooleanInput.css';
-
-export const BooleanInput = ({ label, labelFalse, labelTrue, disabled, value, onChange }: BooleanInputProps) => {
-  // #########
-  // Rendering
-  return (
-    <div className={`boolean-input ${disabled ? 'boolean-input--disabled' : ''}`}>
-      {label && <label>{label}</label>}
-
-      <div className="boolean-input-container">
-        <div className="boolean-input-content">
-          <div className={value === true ? 'boolean-input--selected' : ''} onClick={() => onChange(true)}>
-            {labelTrue}
-          </div>
-          <div className={value === false ? 'boolean-input--selected' : ''} onClick={() => onChange(false)}>
-            {labelFalse}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};