top-brains-ui 0.0.1

package/README.md

@@ -0,0 +1,75 @@
+---
+title: Top Brains UI
+---
+
+import { Button, Input } from 'top-brains-ui';
+
+<h1 align="center">Top Brains UI</h1>
+
+<p align="center">
+  <strong>Top Brains UI</strong> is an open-source React component library, designed to offer a sleek, customizable, and easy-to-use collection of components for building modern user interfaces.
+</p>
+
+---
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Documentation](#documentation)
+- [Contributing](#contributing)
+- [License](#license)
+
+---
+
+## Installation
+
+Install Top Brains UI in your project directory with:
+
+```bash
+npm install top-brains-ui
+```
+
+or with Yarn:
+
+```bash
+yarn add top-brains-ui
+```
+
+## Usage
+
+Once installed, you can start importing and using PixelReact components in your React application. Here's a quick example:
+
+```jsx
+import { Button } from 'top-brains-ui';
+
+function App() {
+  return (
+    <div>
+      <Button label="Button Label" variant="primary" />
+    </div>
+  );
+}
+
+export default App;
+```
+
+## Documentation
+
+For detailed documentation and live examples, [click here](https://main--65d5ca6d09c1eaf0731601fc.chromatic.com/).
+
+## Example
+
+```jsx
+import { Button } from 'top-brains-ui';
+
+function ExampleComponent() {
+  return <Button label="Click Me!" variant="primary" />;
+}
+```
+
+## License
+
+Top Brains UI is licensed under the [MIT License](LICENSE). Feel free to use it in your projects, both personal and commercial.
+
+---

package/lib/StyleGuide/ColorPalette/ColorPalette.d.ts

@@ -0,0 +1,3 @@
+import './ColorPalette.scss';
+declare const Colors: () => import("react/jsx-runtime").JSX.Element;
+export default Colors;

package/lib/StyleGuide/ColorPalette/ColorPalette.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import ColorPalette from './colorPaletteList';
+import './ColorPalette.scss';
+// Component to render each color card
+const ColorBox = ({ name, colorCode, opacity, dropShadow, border, variable, }) => {
+    const opacityPercentage = opacity ? `${Math.round(opacity * 100)}%` : '';
+    const boxStyle = {
+        background: colorCode,
+        opacity: opacity,
+        filter: dropShadow ? dropShadow : '',
+        border: `1px solid ${border}`,
+        color: colorCode,
+    };
+    return (_jsxs("div", { className: "color-card", children: [_jsx("span", { className: "color-name", children: name }), _jsx("div", { className: "color-box", style: boxStyle, children: _jsx("p", { style: { '--colorCode': colorCode }, children: " " }) }), _jsxs("span", { className: "color-code", children: [colorCode, " ", opacityPercentage && `opacity ${opacityPercentage}`, " ", _jsx("br", {}), border && `Border -${border}`] }), _jsx("span", { className: "color-code", children: variable })] }));
+};
+// Main Colors component
+const Colors = () => {
+    return (_jsxs("div", { className: "ff-style-guide", children: [_jsxs("div", { className: "style-guide-header", children: [_jsx("div", { children: "Colors" }), _jsx("span", { children: "Application of the color palette brings a unified and recognisable consistency to MX's array of digital products and interface." })] }), _jsx("div", { className: "style-guide-content", children: ColorPalette.map((color) => (_jsx(ColorBox, { name: color.name, colorCode: color.colorCode, opacity: color?.opacity, dropShadow: color?.dropShadow, border: color?.border, variable: color.variable }, color.name))) })] }));
+};
+export default Colors;
+//# sourceMappingURL=ColorPalette.js.map

package/lib/StyleGuide/ColorPalette/ColorPalette.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorPalette.js","sourceRoot":"","sources":["../../../src/StyleGuide/ColorPalette/ColorPalette.tsx"],"names":[],"mappings":";AACA,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAC9C,OAAO,qBAAqB,CAAC;AAE7B,sCAAsC;AACtC,MAAM,QAAQ,GAAG,CAAC,EAChB,IAAI,EACJ,SAAS,EACT,OAAO,EACP,UAAU,EACV,MAAM,EACN,QAAQ,GACM,EAAE,EAAE;IAClB,MAAM,iBAAiB,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IAEzE,MAAM,QAAQ,GAAG;QACf,UAAU,EAAE,SAAS;QACrB,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE;QACpC,MAAM,EAAE,aAAa,MAAM,EAAE;QAC7B,KAAK,EAAE,SAAS;KACjB,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,YAAY,aACzB,eAAM,SAAS,EAAC,YAAY,YAAE,IAAI,GAAQ,EAC1C,cAAK,SAAS,EAAC,WAAW,EAAC,KAAK,EAAE,QAAQ,YACxC,YAAG,KAAK,EAAE,EAAE,aAAa,EAAE,SAAS,EAAyB,kBAAO,GAChE,EACN,gBAAM,SAAS,EAAC,YAAY,aACzB,SAAS,OAAG,iBAAiB,IAAI,WAAW,iBAAiB,EAAE,OAAE,cAAM,EACvE,MAAM,IAAI,WAAW,MAAM,EAAE,IACzB,EACP,eAAM,SAAS,EAAC,YAAY,YAAE,QAAQ,GAAQ,IAC1C,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,wBAAwB;AACxB,MAAM,MAAM,GAAG,GAAG,EAAE;IAClB,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,aAC7B,eAAK,SAAS,EAAC,oBAAoB,aACjC,mCAAiB,EACjB,6JAGO,IACH,EACN,cAAK,SAAS,EAAC,qBAAqB,YACjC,YAAY,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAC3B,KAAC,QAAQ,IAEP,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,OAAO,EAAE,KAAK,EAAE,OAAO,EACvB,UAAU,EAAE,KAAK,EAAE,UAAU,EAC7B,MAAM,EAAE,KAAK,EAAE,MAAM,EACrB,QAAQ,EAAE,KAAK,CAAC,QAAQ,IANnB,KAAK,CAAC,IAAI,CAOf,CACH,CAAC,GACE,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/StyleGuide/ColorPalette/colorPaletteList.d.ts

@@ -0,0 +1,3 @@
+import { ColorPaletteType } from './types';
+declare const ColorPalette: ColorPaletteType;
+export default ColorPalette;

package/lib/StyleGuide/ColorPalette/colorPaletteList.js

@@ -0,0 +1,475 @@
+const ColorPalette = [
+    { name: 'Brand Color', colorCode: '#71347b', variable: '--brand-color' },
+    { name: 'Text Color', colorCode: '#1e161f', variable: '--text-color' },
+    {
+        name: 'Description Text',
+        colorCode: '#7a7a7a',
+        variable: '--description-text',
+    },
+    {
+        name: 'Clickable Text Color',
+        colorCode: '#71347b',
+        variable: '--click-able-text-color',
+    },
+    {
+        name: 'Icons Default Color',
+        colorCode: '#71347b',
+        variable: '--icons-default-color',
+    },
+    { name: 'Border Color', colorCode: '#f0e7f4', variable: '--border-color' },
+    {
+        name: 'Disable Color',
+        colorCode: '#71347b',
+        opacity: 0.5,
+        variable: '--disable-color',
+    },
+    { name: 'Hover Color', colorCode: '#f7ebff', variable: '--hover-color' },
+    {
+        name: 'Pop-up Background Blur',
+        colorCode: '#14041c',
+        opacity: 0.1,
+        variable: '--pop-up-background-blur',
+    },
+    {
+        name: 'Drawer Footer Background',
+        colorCode: '#ffffff',
+        border: '#f0e7f4',
+        variable: '--drawer-footer-bg',
+    },
+    {
+        name: 'Slider Table Color',
+        colorCode: '#efe1f9',
+        opacity: 1,
+        variable: '--slider-table-color',
+    },
+    {
+        name: 'Text bg Highlight',
+        colorCode: '#f5fb00',
+        variable: '--text-bg-highlight',
+    },
+    {
+        name: 'Tooltip Bg Color',
+        colorCode: '#1e161f',
+        variable: '--tooltip-bg-color',
+    },
+    {
+        name: 'Tooltip Text Color(default)',
+        colorCode: '#ffffff',
+        variable: '--tooltip-text-color',
+    },
+    {
+        name: 'Toggle Strip Color(default)',
+        colorCode: '#cfd1e2',
+        dropShadow: 'drop-shadow(0 0 2px #00000025)',
+        variable: '--toggle-strip-color',
+    },
+    {
+        name: 'Tooltip Text Color(Active)',
+        colorCode: '#ffffff',
+        variable: '--tooltip-text-color',
+    },
+    {
+        name: 'Toggle Strip Color(Active)',
+        colorCode: '#71347b',
+        dropShadow: 'drop-shadow(0 0 2px #00000025)',
+        variable: '--toggle-strip-active',
+    }, // todo  drop shadow
+    {
+        name: 'Primary Button Color',
+        colorCode: 'linear-gradient(90deg, rgba(113, 52, 123, 1) 100%, rgba(70, 22, 77, 1) 100%)',
+        variable: '--primary-button-color',
+    },
+    {
+        name: 'Primary Button Hover',
+        colorCode: 'linear-gradient(90deg, rgba(141, 59, 154, 1) 100%, rgba(120, 31, 134, 1) 100%)',
+        variable: '--primary-button-hover',
+    },
+    {
+        name: 'Primary Button Disable',
+        colorCode: 'linear-gradient(90deg, rgba(113, 52, 123, 1) 100%, rgba(113, 52, 123, 1) 100%)',
+        opacity: 0.5,
+        variable: '--primary-button-disable',
+    },
+    {
+        name: 'Primary Button Text Color',
+        colorCode: '#ffffff',
+        variable: '--primary-button-text-color',
+    },
+    {
+        name: 'Secondary Button Icon Color (default)',
+        colorCode: 'rgba(113, 52, 123, 1)',
+        variable: '--secondary-icon-color',
+    },
+    {
+        name: 'Secondary Button (Hover)',
+        colorCode: 'linear-gradient(90deg, rgba(113, 52, 123, 0.05) 100%, rgba(70, 22, 77, 0.05) 100%)',
+        variable: '--secondary-button-hover',
+    },
+    {
+        name: 'Secondary Button (Disabled)',
+        colorCode: 'rgba(113, 52, 123, 1)',
+        opacity: 0.5,
+        variable: '--disable-color',
+    },
+    {
+        name: 'Tertiary Button (default)',
+        colorCode: 'linear-gradient(90deg, rgba(70, 22, 77, 0.05) 100%, rgba(113, 52, 123, 0.05) 100%)',
+        variable: '--tertiary-button-color',
+    },
+    {
+        name: 'Tertiary Button (Hover)',
+        colorCode: 'linear-gradient(90deg, rgba(70, 22, 77, 0.1) 100%, rgba(113, 52, 123, 0.1) 100%)',
+        variable: '--tertiary-button-hover',
+    },
+    {
+        name: 'Tertiary Button (Disabled)',
+        colorCode: 'linear-gradient(90deg, rgba(70, 22, 77, 0.05) 100%, rgba(113, 52, 123, 0.05) 100%)',
+        opacity: 0.5,
+        variable: '--tertiary-button-color',
+    },
+    {
+        name: 'Delete Button Color',
+        colorCode: 'linear-gradient(90deg, rgba(228, 37, 37, 1) 100%, rgba(201, 0, 0, 1) 100%)',
+        variable: '--delete-button-color',
+    },
+    {
+        name: 'Delete Button Hover',
+        colorCode: 'linear-gradient(90deg, rgba(233, 81, 81, 1) 100%, rgba(212, 52, 52, 1) 100%)',
+        variable: '--delete-button-hover',
+    },
+    {
+        name: 'Delete Button Disabled',
+        colorCode: 'linear-gradient(90deg, rgba(233, 81, 81, 1) 100%, rgba(212, 52, 52, 1) 100%)',
+        opacity: 0.5,
+        variable: '--delete-button-disable',
+    },
+    {
+        name: 'Primary Button Text Color',
+        colorCode: '#ffffff',
+        variable: '--primary-button-text-color',
+    },
+    {
+        name: 'Overlay Background',
+        colorCode: '#1e161f',
+        opacity: 0.1,
+        variable: '--overlay-bg',
+    },
+    {
+        name: 'Avatar background color',
+        colorCode: '#71347b',
+        variable: '--avatar-background-color',
+    },
+    {
+        name: 'Avatar icon color',
+        colorCode: '#ffffff',
+        variable: '--avatar-icon-color',
+    },
+    {
+        name: 'Sub Header Primary Color',
+        colorCode: '#301349',
+        variable: '--sub-header-primary',
+    },
+    {
+        name: 'Icon Hover BG Color',
+        colorCode: '#f7ecf8',
+        variable: '--ff-icon-hover-bg-color',
+    },
+    {
+        name: 'Modal Background Color',
+        colorCode: '#12121233',
+        variable: '--modal-background-color',
+    },
+    {
+        name: 'Modal Alert Header Color',
+        colorCode: '#db1919',
+        variable: '--modal-alert-header-color',
+    },
+    {
+        name: 'Line Number Color',
+        colorCode: '#ffffff',
+        variable: '--ff-line-number-color',
+    },
+    {
+        name: 'Editor Border Color',
+        colorCode: '#f0e7f4',
+        variable: '--ff-editor-border-color',
+    },
+    {
+        name: 'Status Card Text Color',
+        colorCode: '#ffffff',
+        variable: '--ff-status-card-text-color',
+    },
+    {
+        name: 'Card Status Text Color',
+        colorCode: '#8a8a8a',
+        variable: '--ff-card-status-text-color',
+    },
+    {
+        name: 'Card Passed Status BG Color',
+        colorCode: '#179c5f',
+        variable: '--ff-card-passed-status-bg-color',
+    },
+    {
+        name: 'Card Failed Status BG Color',
+        colorCode: '#9c1732',
+        variable: '--ff-card-failed-status-bg-color',
+    },
+    {
+        name: 'Card Warning Status BG Color',
+        colorCode: '#e2750f',
+        variable: '--ff-card-warning-status-bg-color',
+    },
+    {
+        name: 'Card Skipped Status BG Color',
+        colorCode: '#a83fc4',
+        variable: '--ff-card-skipped-status-bg-color',
+    },
+    {
+        name: 'Card Flaky Status BG Color',
+        colorCode: '#3f5ac4',
+        variable: '--ff-card-flaky-status-bg-color',
+    },
+    {
+        name: 'Search filed color',
+        colorCode: '#F7ECF8',
+        variable: '--ff-search-field-hover-color',
+    },
+    {
+        name: 'Search filed background color',
+        colorCode: '#F7ECF8',
+        variable: '--ff-search-filed-bg-color',
+    },
+    {
+        name: 'All Projects dropdown default color',
+        colorCode: '#FFFFFF33',
+        variable: '--ff-all-projects-default-color',
+    },
+    {
+        name: 'confirm tick color',
+        colorCode: '#5ca700',
+        variable: 'confirm-tick-icon-color',
+    },
+    {
+        name: 'Dynamic card border color',
+        colorCode: '#eeeaf2',
+        variable: ' dynamic-card-border-color',
+    },
+    {
+        name: 'Card header background color',
+        colorCode: '#592f7c1a',
+        variable: 'card-header-bg-color',
+    },
+    {
+        name: "InputWithDropdown's dropdown background color",
+        colorCode: '#71347b27',
+        variable: 'dropdown-bg-color',
+    },
+    {
+        name: 'info modal background color',
+        colorCode: 'linear-gradient(94.23deg,rgba(113, 52, 123, 0.4) 16.33%,rgba(70, 22, 77, 0.4) 80.07%) ',
+        variable: 'brand-color-border',
+    },
+    {
+        name: 'alert modal background color',
+        colorCode: 'linear-gradient(94.23deg,rgba(228, 37, 37, 0.4) 16.33%,rgba(201, 0, 0, 0.4) 80.07%) ',
+        variable: 'alert-modal-background-color',
+    },
+    {
+        name: 'Progress bar bg color',
+        colorCode: 'rgba(240, 240, 240, 1)',
+        variable: 'ff-progress-bar-bg-color',
+    },
+    {
+        name: 'License expires soon',
+        colorCode: '#ba7422',
+        variable: 'license_expires_soon_color',
+    },
+    {
+        name: 'Primary Color',
+        colorCode: '#29102d',
+        variable: '--ff-primary-color',
+    },
+    {
+        name: 'Primary Text',
+        colorCode: '#0a2540',
+        variable: '--ff-primary-text-color',
+    },
+    {
+        name: 'Secondary Color',
+        colorCode: '#0a2540',
+        variable: '--ff-secondary-text-color',
+    },
+    {
+        name: 'Background Color',
+        colorCode: '#f7f9fc',
+        variable: '--ff-background-color',
+    },
+    {
+        name: 'Primary 600 Color',
+        colorCode: '#461f4c',
+        variable: '--ff-primary-600-color',
+    },
+    {
+        name: 'Gradient Light Color',
+        colorCode: 'radial-gradient(59.43% 50% at 50% 50%, #c6c6c6 0%, #71347b 51%)',
+        variable: '--ff-gradient-light-color',
+    },
+    {
+        name: 'Gradient 20 Color',
+        colorCode: 'linear-gradient(90deg, rgba(198, 84, 255, 0.12) 0%, rgba(252, 246, 255, 0) 70.74%)',
+        variable: '--ff-gradient-20-color',
+    },
+    {
+        name: 'Primary 10 Color',
+        colorCode: '#fcf6ff',
+        variable: '--ff-primary-10-color',
+    },
+    {
+        name: 'Primary 20 color',
+        colorCode: '#f6e4ff',
+        variable: '--ff-primary-20-color',
+    },
+    { name: 'White Color', colorCode: '#ffffff', variable: '--ff-white-color' },
+    {
+        name: 'plugins header bg color',
+        colorCode: 'rgba(89, 47, 124, 0.1)',
+        variable: 'plugins-header-bg-color',
+    },
+    {
+        name: 'follow-user-icon-red',
+        colorCode: '#922B3E',
+        variable: 'follow-user-icon-red_color',
+    },
+    {
+        name: 'follow-user-icon-orange',
+        colorCode: '#ED760E',
+        variable: 'follow-user-icon-orange_color',
+    },
+    {
+        name: 'follow-user-icon-black',
+        colorCode: '#0A0A0A',
+        variable: 'follow-user-icon-black_color',
+    },
+    {
+        name: 'follow-user-icon-pink',
+        colorCode: '#E63244',
+        variable: 'follow-user-icon-pink_color',
+    },
+    {
+        name: 'follow-user-icon-blue',
+        colorCode: '#3B83BD',
+        variable: 'follow-user-icon-blue_color',
+    },
+    {
+        name: 'follow-user-icon-navy',
+        colorCode: '#20214F',
+        variable: 'follow-user-icon-navy_color',
+    },
+    {
+        name: 'follow-user-icon-lightGreen',
+        colorCode: '#BDECB6',
+        variable: 'follow-user-icon-lightGreen_color',
+    },
+    {
+        name: 'follow-user-icon-gray',
+        colorCode: '#D9D9D9',
+        variable: 'follow-user-icon-gray_color',
+    },
+    {
+        name: 'follow-user-icon-yellow',
+        colorCode: '#CDA434',
+        variable: 'follow-user-icon-yellow_color',
+    },
+    {
+        name: 'follow-user-icon-salmon',
+        colorCode: '#D36E70',
+        variable: 'follow-user-icon-salmon_color',
+    },
+    {
+        name: 'status-skipped-text-color',
+        colorCode: '#3c3838',
+        variable: '--status-skipped-text-color',
+    },
+    {
+        name: 'text-editor-in-focus-border-color',
+        colorCode: '#71347b',
+        variable: 'text-editor-in-focus-border-color',
+    },
+    {
+        name: 'prompt-serialnumber',
+        colorCode: '#edd4ff',
+        variable: 'ff-prompt-number-bg-color',
+    },
+    {
+        name: 'prompt-switch-container',
+        colorCode: '#b637ca',
+        variable: 'ff-ai-toggle-bg-color',
+    },
+    {
+        name: 'prompt-switch-button-Active',
+        colorCode: '#6b83b2',
+        variable: 'ff-ai-toggle-text-color',
+    },
+    {
+        name: 'ChatBot Background',
+        colorCode: '#F8F3FB',
+        variable: '--prompt-bg-color',
+    },
+    {
+        name: 'ChatBot Box Shadow',
+        colorCode: '#592f7c33',
+        variable: '--prompt-shadow-color',
+    },
+    {
+        name: 'Default Chip With Count Background',
+        colorCode: '#f4e7f4',
+        variable: '--default-chip-count-background-color',
+    },
+    {
+        name: 'Select chart highlight color',
+        colorCode: '#00000066',
+        variable: '--select-chart-highlight-color',
+    },
+    {
+        name: 'Partially Failures',
+        colorCode: '#FFE207',
+        variable: '--partially-failures',
+    },
+    {
+        name: 'Top Failures Bar Color',
+        colorCode: '#52A2F2',
+        variable: '--top-failures-bar-color',
+    },
+    {
+        name: 'Chip Drop Shadow Inner Color',
+        colorCode: '#57575733',
+        variable: '--ff-chips-shadow-color-two',
+    },
+    {
+        name: 'Chip Drop Shadow Outer Color',
+        colorCode: ' #ffffff33',
+        variable: '--ff-chip-bg-two',
+    },
+    {
+        name: 'Ai testcase background color',
+        colorCode: '#FBFCFD',
+        variable: 'testcase-bg',
+    },
+    {
+        name: 'Ai testcase status color',
+        colorCode: '#B73E3E',
+        variable: 'testcase-status-color',
+    },
+    {
+        name: 'Ai prompt list background color',
+        colorCode: '#fbf5ff',
+        variable: 'ai-prompt-bg',
+    },
+    {
+        name: 'line-chart-data',
+        colorCode: ' #4c90ff',
+        variable: 'line-chart-data_color',
+    },
+];
+export default ColorPalette;
+//# sourceMappingURL=colorPaletteList.js.map

package/lib/StyleGuide/ColorPalette/colorPaletteList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorPaletteList.js","sourceRoot":"","sources":["../../../src/StyleGuide/ColorPalette/colorPaletteList.ts"],"names":[],"mappings":"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"}

package/lib/StyleGuide/ColorPalette/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ColorPalette';

package/lib/StyleGuide/ColorPalette/index.js

@@ -0,0 +1,2 @@
+export { default } from './ColorPalette';
+//# sourceMappingURL=index.js.map

package/lib/StyleGuide/ColorPalette/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/StyleGuide/ColorPalette/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC"}

package/lib/StyleGuide/ColorPalette/types.d.ts

@@ -0,0 +1,17 @@
+export interface ColorBoxProps {
+    name: string;
+    colorCode: string;
+    opacity?: number;
+    dropShadow?: string;
+    border?: string;
+    variable?: string;
+}
+export interface Color {
+    name: string;
+    colorCode: string;
+    opacity?: number;
+    dropShadow?: string;
+    border?: string;
+    variable?: string;
+}
+export type ColorPaletteType = Color[];

package/lib/StyleGuide/ColorPalette/types.js

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

package/lib/StyleGuide/ColorPalette/types.js.map

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

package/lib/StyleGuide/Typography/Typography.d.ts

@@ -0,0 +1,3 @@
+import './Typography.scss';
+declare const Typography: () => import("react/jsx-runtime").JSX.Element;
+export default Typography;

package/lib/StyleGuide/Typography/Typography.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './Typography.scss';
+const Typography = () => {
+    return (_jsxs("div", { className: "typography-container", children: [_jsxs("div", { className: "typography-header", children: [_jsx("div", { children: "_Typography" }), _jsx("span", { children: "Our design system leverages a purposeful set of typography styles. We'he stress-tested this typographic scale across dozens of projects to make sure it's robust enough to use across (almost) any project, while remaining as accessible as possible for everyone." })] }), _jsx("div", { className: "font-display", children: _jsxs("div", { className: "font-row", children: [_jsxs("div", { className: "font-left", children: [_jsx("div", { className: "font-name", children: "Poppins" }), _jsx("div", { className: "font-sample", children: "Aa" }), _jsxs("div", { className: "font-characters", children: ["ABCDEFGHIJKLMNOPQRSTUVWXYZ", _jsx("br", {}), "abcdefghijklmnopqrstuvwxyz", _jsx("br", {}), "0123456789", _jsx("br", {}), "!@#$%^&*()"] })] }), _jsxs("div", { className: "font-right", children: [_jsxs("div", { className: "font-right-section bold", children: [_jsx("div", { className: "font-sample-large", children: "Aa" }), _jsxs("div", { className: "font-info", children: [_jsx("span", { children: "Bold" }), _jsx("div", { className: "font-size", children: "font size: 12px = 0.75rem" })] })] }), _jsxs("div", { className: "font-right-section semi-bold", children: [_jsx("div", { className: "font-sample-large", children: "Aa" }), _jsxs("div", { className: "font-info", children: [_jsx("span", { children: "SemiBold" }), _jsx("div", { className: "font-size", children: "font size: 12px = 0.75rem" })] })] }), _jsxs("div", { className: "font-right-section regular", children: [_jsx("div", { className: "font-sample-large", children: "Aa" }), _jsxs("div", { className: "font-info", children: [_jsx("span", { children: "Regular" }), _jsx("div", { className: "font-size", children: "font size: 12px = 0.75rem" })] })] })] })] }) })] }));
+};
+export default Typography;
+//# sourceMappingURL=Typography.js.map

package/lib/StyleGuide/Typography/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../src/StyleGuide/Typography/Typography.tsx"],"names":[],"mappings":";AAAA,OAAO,mBAAmB,CAAC;AAE3B,MAAM,UAAU,GAAG,GAAG,EAAE;IACtB,OAAO,CACL,eAAK,SAAS,EAAC,sBAAsB,aACnC,eAAK,SAAS,EAAC,mBAAmB,aAChC,wCAAsB,EACtB,iSAKO,IACH,EACN,cAAK,SAAS,EAAC,cAAc,YAC3B,eAAK,SAAS,EAAC,UAAU,aACvB,eAAK,SAAS,EAAC,WAAW,aACxB,cAAK,SAAS,EAAC,WAAW,wBAAc,EACxC,cAAK,SAAS,EAAC,aAAa,mBAAS,EACrC,eAAK,SAAS,EAAC,iBAAiB,2CAE9B,cAAM,gCAEN,cAAM,gBAEN,cAAM,kBAEF,IACF,EAEN,eAAK,SAAS,EAAC,YAAY,aACzB,eAAK,SAAS,EAAC,yBAAyB,aACtC,cAAK,SAAS,EAAC,mBAAmB,mBAAS,EAC3C,eAAK,SAAS,EAAC,WAAW,aACxB,kCAAiB,EACjB,cAAK,SAAS,EAAC,WAAW,0CAAgC,IACtD,IACF,EACN,eAAK,SAAS,EAAC,8BAA8B,aAC3C,cAAK,SAAS,EAAC,mBAAmB,mBAAS,EAC3C,eAAK,SAAS,EAAC,WAAW,aACxB,sCAAqB,EACrB,cAAK,SAAS,EAAC,WAAW,0CAAgC,IACtD,IACF,EACN,eAAK,SAAS,EAAC,4BAA4B,aACzC,cAAK,SAAS,EAAC,mBAAmB,mBAAS,EAC3C,eAAK,SAAS,EAAC,WAAW,aACxB,qCAAoB,EACpB,cAAK,SAAS,EAAC,WAAW,0CAAgC,IACtD,IACF,IACF,IACF,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/lib/StyleGuide/Typography/TypographyList.d.ts

@@ -0,0 +1,5 @@
+export declare const fontData: {
+    name: string;
+    fontSizePx: string;
+    fontSizeRem: string;
+}[];

package/lib/StyleGuide/Typography/TypographyList.js

@@ -0,0 +1,4 @@
+export const fontData = [
+    { name: 'Poppins', fontSizePx: '12px', fontSizeRem: '0.75rem' },
+];
+//# sourceMappingURL=TypographyList.js.map