venice-ui 2.4.13 → 3.0.2

package/dist/cjs/config/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./config"), exports);
+__exportStar(require("./themes"), exports);
+__exportStar(require("./componentTheme"), exports);
+__exportStar(require("./wordbook"), exports);

package/dist/cjs/config/themes.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultTheme = exports.themes = void 0;
+exports.themes = {
+    default: {
+        primitive: {
+            primary: {
+                50: '#F2F8FD',
+                100: '#E4F1FA',
+                200: '#C7E3F5',
+                300: '#9FD0EC',
+                400: '#6EB8DF',
+                500: '#3B90CB',
+                600: '#2F78B0',
+                700: '#25608E',
+                800: '#1C496C',
+                900: '#13324A',
+            },
+            neutral: {
+                0: '#FFFFFF',
+                50: '#F9FAFB',
+                100: '#F3F4F6',
+                200: '#E5E7EB',
+                300: '#D1D5DB',
+                400: '#9CA3AF',
+                500: '#6B7280',
+                600: '#4B5563',
+                700: '#374151',
+                800: '#1F2937',
+                900: '#111827',
+            },
+            error: {
+                50: '#FEF2F2',
+                100: '#FEE2E2',
+                200: '#FECACA',
+                300: '#FCA5A5',
+                500: '#EF4444',
+                600: '#DC2626',
+            },
+            info: {
+                50: '#EFF6FF',
+                100: '#DBEAFE',
+                200: '#BFDBFE',
+                500: '#3B82F6',
+                600: '#2563EB',
+            },
+            warning: {
+                50: '#FFFBEB',
+                100: '#FEF3C7',
+                200: '#FDE68A',
+                500: '#F59E0B',
+                600: '#D97706',
+            },
+            success: {
+                50: '#ECFDF5',
+                100: '#D1FAE5',
+                200: '#A7F3D0',
+                500: '#10B981',
+                600: '#059669',
+            },
+        },
+    },
+};
+exports.defaultTheme = exports.themes.default;

package/dist/cjs/config/wordbook.js

@@ -0,0 +1,74 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wordbook = void 0;
+exports.wordbook = {
+    label: {
+        optional: '(optional)',
+    },
+    dropdown: {
+        placeholder: 'Select an option',
+    },
+    searchInput: {
+        placeholder: 'Search ... ',
+        emptyState: 'No results found',
+    },
+    button: {
+        defaultText: 'Click me!',
+    },
+    actions: {
+        confirm: 'Confirm',
+        cancel: 'Cancel',
+        clear: 'Clear',
+    },
+    file: {
+        placeholder: 'Choose a file',
+        buttonPlaceholder: 'Select file',
+    },
+    selector: {
+        placeholder: 'Please select',
+        emptyPanelMsg: 'There are no options to choose from',
+    },
+    calendar: {
+        actionLabels: {
+            close: 'Close',
+            confirm: 'Confirm',
+            today: 'Today',
+        },
+        months: [
+            'January',
+            'February',
+            'March',
+            'April',
+            'May',
+            'June',
+            'July',
+            'August',
+            'September',
+            'October',
+            'November',
+            'December',
+        ],
+        weekdaysShort: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+        placeholder: 'Select date',
+    },
+    section: {
+        action: 'Click me'
+    },
+    pagination: {
+        dropdownLabel: 'Items per page',
+    },
+    filters: {
+        title: 'Select filters',
+        confirm: 'Apply',
+        cancel: 'Cancel',
+        labelClearAll: 'Clear all',
+        filterText: 'Filters',
+        clear: 'Clear'
+    },
+    table: {
+        filterEmptyState: 'No results found.',
+    }
+};
+//ToDo zaaktualizować stories dla Lable
+//ToDo zaaktualizować stories dla Dropdowne
+//ToDo dodac noBreakLabel do inputów

package/dist/cjs/example/Colors.js

@@ -5,14 +5,63 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Colors = void 0;
 const react_1 = __importDefault(require("react"));
-const ExampleComponent_1 = require("./ExampleComponent");
-const Theme_1 = require("../Theme");
+const styled_components_1 = __importDefault(require("styled-components"));
+const themes_1 = require("../config/themes");
+const palette = themes_1.themes.default.primitive;
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+`;
+const Section = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+`;
+const SectionTitle = styled_components_1.default.h3 `
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  text-transform: capitalize;
+  color: #111827;
+`;
+const SwatchRow = styled_components_1.default.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+`;
+const SwatchCard = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  width: 100px;
+`;
+const SwatchBox = styled_components_1.default.div `
+  width: 100px;
+  height: 60px;
+  border-radius: 6px;
+  background-color: ${(p) => p.color};
+  border: 1px solid rgba(0, 0, 0, 0.08);
+`;
+const SwatchLabel = styled_components_1.default.div `
+  margin-top: 6px;
+  font-size: 12px;
+  color: #374151;
+  line-height: 1.4;
+`;
+const SwatchHex = styled_components_1.default.div `
+  font-size: 11px;
+  color: #6b7280;
+  font-family: monospace;
+`;
 const Colors = () => {
-    return (react_1.default.createElement(ExampleComponent_1.ColorsPreviewArea, null, Object.entries(Theme_1.Theme.colors).map(([key, value]) => (react_1.default.createElement(ExampleComponent_1.ColorsPreviewRow, null,
-        react_1.default.createElement(ExampleComponent_1.ColorsPreview, { color: value }),
-        react_1.default.createElement(ExampleComponent_1.ColorsDesc, null,
-            key,
-            react_1.default.createElement("br", null),
-            value))))));
+    return (react_1.default.createElement(Wrapper, null, Object.entries(palette).map(([groupName, shades]) => (react_1.default.createElement(Section, { key: groupName },
+        react_1.default.createElement(SectionTitle, null, groupName),
+        react_1.default.createElement(SwatchRow, null, Object.entries(shades).map(([shade, hex]) => (react_1.default.createElement(SwatchCard, { key: shade },
+            react_1.default.createElement(SwatchBox, { color: hex }),
+            react_1.default.createElement(SwatchLabel, null,
+                groupName,
+                ".",
+                shade),
+            react_1.default.createElement(SwatchHex, null, hex))))))))));
 };
 exports.Colors = Colors;

package/dist/cjs/example/ExampleComponent.js

@@ -5,19 +5,18 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Test = exports.ColorsDesc = exports.ColorsPreview = exports.ColorsPreviewRow = exports.ColorsPreviewArea = exports.IconName = exports.IconsShowroom = exports.ExampleItem = exports.ExampleArea = exports.ExampleAreaTitle = exports.ExampleTableHeader = exports.ExampleTableCell = exports.ExampleTableRow = exports.ExampleTable = exports.ExmpleBlockWrapper = exports.ExmpleBlock = exports.StoryWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
-const Theme_1 = require("../Theme/Theme");
 exports.StoryWrapper = styled_components_1.default.div `
-  padding: ${Theme_1.Theme.padding.l};
+  padding: 16px;
 `;
 exports.ExmpleBlock = styled_components_1.default.div `
   padding: ${(p) => (p.width ? p.width : '10px')}
     ${(p) => (p.height ? p.height : '10px')};
   text-align: center;
-  font-size: ${Theme_1.Theme.fontSize.xl};
+  font-size: 18px;
 `;
 exports.ExmpleBlockWrapper = styled_components_1.default.div `
   background-color: ${(p) => (p.color ? p.color : '#ffffff')};
-  border-radius: ${Theme_1.Theme.borderRadius.m};
+  border-radius: 8px;
   box-sizing:border-box;
   border:1px solid #dddddd;
 `;
@@ -30,11 +29,11 @@ exports.ExampleTableRow = styled_components_1.default.tr `
   border-collapse: collapse;
 `;
 exports.ExampleTableCell = styled_components_1.default.td `
-  padding: ${Theme_1.Theme.padding.m};
+  padding: 12px;
   border-bottom: 1px solid #dddddd;
 `;
 exports.ExampleTableHeader = styled_components_1.default.th `
-  padding: ${Theme_1.Theme.padding.m};
+  padding: 12px;
   border-collapse: collapse;
   background-color: #dddddd;
   text-align: left;

package/dist/cjs/example/Icons.js

@@ -0,0 +1,63 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icons = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Icon_1 = require("../components/Icon/Icon");
+const IconsPath_1 = require("../components/Icon/IconsPath");
+const iconNames = Object.keys(IconsPath_1.iconsPath).sort();
+const Wrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+`;
+const Description = styled_components_1.default.div `
+  font-size: 14px;
+  color: #4b5563;
+`;
+const Grid = styled_components_1.default.div `
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  gap: 12px;
+`;
+const Card = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 12px;
+  padding: 16px 12px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 10px;
+  background: #ffffff;
+`;
+const Preview = styled_components_1.default.div `
+  width: 56px;
+  height: 56px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  background: #f9fafb;
+`;
+const Name = styled_components_1.default.div `
+  width: 100%;
+  text-align: center;
+  font-size: 12px;
+  line-height: 1.4;
+  color: #111827;
+  word-break: break-word;
+`;
+const Icons = () => {
+    return (react_1.default.createElement(Wrapper, null,
+        react_1.default.createElement(Description, null,
+            "Available icons in iconsPath: ",
+            iconNames.length),
+        react_1.default.createElement(Grid, null, iconNames.map((name) => (react_1.default.createElement(Card, { key: name },
+            react_1.default.createElement(Preview, null,
+                react_1.default.createElement(Icon_1.Icon, { name: name, size: "xl2" })),
+            react_1.default.createElement(Name, null, name)))))));
+};
+exports.Icons = Icons;

package/dist/cjs/example/TypographyExample.js

@@ -12,36 +12,49 @@ const TypographyExample = () => {
         react_1.default.createElement(example_1.ExampleTable, null,
             react_1.default.createElement(example_1.ExampleTableRow, null,
                 react_1.default.createElement(example_1.ExampleTableHeader, null, "Font component"),
-                react_1.default.createElement(example_1.ExampleTableHeader, null, "Sample")),
+                react_1.default.createElement(example_1.ExampleTableHeader, null, "Sample"),
+                react_1.default.createElement(example_1.ExampleTableHeader, null, "Capabilities")),
             react_1.default.createElement(example_1.ExampleTableRow, null,
                 react_1.default.createElement(example_1.ExampleTableCell, null,
-                    react_1.default.createElement("code", null, "TextHeader")),
+                    react_1.default.createElement("code", null, `<Title />`)),
                 react_1.default.createElement(example_1.ExampleTableCell, null,
-                    react_1.default.createElement(Typography_1.TextHeader, null, "One ring to rule them all"))),
+                    react_1.default.createElement(Typography_1.Title, null, "Typography in Venice UI")),
+                react_1.default.createElement(example_1.ExampleTableCell, null, "size, color, action, disabled, as")),
             react_1.default.createElement(example_1.ExampleTableRow, null,
                 react_1.default.createElement(example_1.ExampleTableCell, null,
-                    react_1.default.createElement("code", null, "TextSubHeader")),
+                    react_1.default.createElement("code", null, `<Subtitle />`)),
                 react_1.default.createElement(example_1.ExampleTableCell, null,
-                    react_1.default.createElement(Typography_1.TextSubHeader, null, "One ring to rule them all"))),
+                    react_1.default.createElement(Typography_1.Subtitle, null, "Section heading for grouped content")),
+                react_1.default.createElement(example_1.ExampleTableCell, null, "size, color, action, disabled, as")),
             react_1.default.createElement(example_1.ExampleTableRow, null,
                 react_1.default.createElement(example_1.ExampleTableCell, null,
-                    react_1.default.createElement("code", null, "Text")),
+                    react_1.default.createElement("code", null, `<Text />`)),
                 react_1.default.createElement(example_1.ExampleTableCell, null,
-                    react_1.default.createElement(Typography_1.Text, null, "One ring to rule them all"))),
+                    react_1.default.createElement(Typography_1.Text, null, "One ring to rule them all, one ring to find them.")),
+                react_1.default.createElement(example_1.ExampleTableCell, null, "body text, action hover, disabled")),
             react_1.default.createElement(example_1.ExampleTableRow, null,
                 react_1.default.createElement(example_1.ExampleTableCell, null,
-                    react_1.default.createElement("code", null, "TextSmall")),
+                    react_1.default.createElement("code", null, `<TextSmall />`)),
                 react_1.default.createElement(example_1.ExampleTableCell, null,
-                    react_1.default.createElement(Typography_1.TextSmall, null, "One ring to rule them all"))),
+                    react_1.default.createElement(Typography_1.TextSmall, null, "Smaller helper paragraph for additional context.")),
+                react_1.default.createElement(example_1.ExampleTableCell, null, "compact body size")),
             react_1.default.createElement(example_1.ExampleTableRow, null,
                 react_1.default.createElement(example_1.ExampleTableCell, null,
-                    react_1.default.createElement("code", null, "TextLabel")),
+                    react_1.default.createElement("code", null, `<Caption />`)),
                 react_1.default.createElement(example_1.ExampleTableCell, null,
-                    react_1.default.createElement(Typography_1.TextLabel, null, "One ring to rule them all"))),
+                    react_1.default.createElement(Typography_1.Caption, { color: "#6B7280" }, "Caption / meta information")),
+                react_1.default.createElement(example_1.ExampleTableCell, null, "small informational text")),
             react_1.default.createElement(example_1.ExampleTableRow, null,
                 react_1.default.createElement(example_1.ExampleTableCell, null,
-                    react_1.default.createElement("code", null, "TextAccent")),
+                    react_1.default.createElement("code", null, `<Overline />`)),
                 react_1.default.createElement(example_1.ExampleTableCell, null,
-                    react_1.default.createElement(Typography_1.TextAccent, null, "One ring to rule them all"))))));
+                    react_1.default.createElement(Typography_1.Overline, { color: "#3B90CB" }, "Overline label")),
+                react_1.default.createElement(example_1.ExampleTableCell, null, "uppercase variant")),
+            react_1.default.createElement(example_1.ExampleTableRow, null,
+                react_1.default.createElement(example_1.ExampleTableCell, null,
+                    react_1.default.createElement("code", null, `<LabelText />`)),
+                react_1.default.createElement(example_1.ExampleTableCell, null,
+                    react_1.default.createElement(Typography_1.LabelText, { size: "md", labelPosition: "top" }, "Form field label")),
+                react_1.default.createElement(example_1.ExampleTableCell, null, "size + labelPosition support")))));
 };
 exports.TypographyExample = TypographyExample;

package/dist/cjs/index.js

@@ -14,33 +14,38 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./components/ActionPanel"), exports);
 __exportStar(require("./components/Aligment"), exports);
 __exportStar(require("./components/Button"), exports);
 __exportStar(require("./components/ButtonsFooter"), exports);
 __exportStar(require("./components/Card"), exports);
 __exportStar(require("./components/Checkbox"), exports);
-__exportStar(require("./components/Chips"), exports);
+__exportStar(require("./components/ComponentRoot"), exports);
 __exportStar(require("./components/DatePicker"), exports);
 __exportStar(require("./components/Dropdown"), exports);
 __exportStar(require("./components/DropdownMenu"), exports);
-__exportStar(require("./components/ElementHeader"), exports);
-__exportStar(require("./components/DropdownMenu"), exports);
-__exportStar(require("./components/Form"), exports);
 __exportStar(require("./components/File"), exports);
-__exportStar(require("./components/FillSelect"), exports);
 __exportStar(require("./components/Filters"), exports);
-__exportStar(require("./components/Icons"), exports);
+__exportStar(require("./components/Form"), exports);
+__exportStar(require("./components/Header"), exports);
+__exportStar(require("./components/HelperText"), exports);
+__exportStar(require("./components/Icon"), exports);
 __exportStar(require("./components/Input"), exports);
+__exportStar(require("./components/Label"), exports);
 __exportStar(require("./components/List"), exports);
 __exportStar(require("./components/Loader"), exports);
 __exportStar(require("./components/Modal"), exports);
+__exportStar(require("./components/Numerical"), exports);
+__exportStar(require("./components/OptionsPanel"), exports);
 __exportStar(require("./components/Pagination"), exports);
+__exportStar(require("./components/SearchInput"), exports);
 __exportStar(require("./components/Section"), exports);
 __exportStar(require("./components/Selector"), exports);
 __exportStar(require("./components/Sidepanel"), exports);
 __exportStar(require("./components/Sort"), exports);
 __exportStar(require("./components/Table"), exports);
+__exportStar(require("./components/Tag"), exports);
 __exportStar(require("./components/Tile"), exports);
-__exportStar(require("./components/Toogle"), exports);
-__exportStar(require("./components/Tooltip"), exports);
+__exportStar(require("./components/Toggle"), exports);
 __exportStar(require("./components/Typography"), exports);
+__exportStar(require("./types"), exports);

package/dist/esm/components/ActionPanel/ActionPanel.js

@@ -0,0 +1,26 @@
+import { resolveThemeWithComponentsConfig, } from '../../config';
+import React from 'react';
+import { ActionItem, PanelFooterWrapper, PanelHeaderWrapper, PanelOptionsWrapper, PanelRoot, } from './ActionPanel.styles';
+import { ThemeProvider } from 'styled-components';
+export const ActionPanel = ({ theme, themeVariant, options, size, header, footer, maxRows = 6, targetID, handleClick, }) => {
+    const { resolvedTheme, componentsConfig } = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const panelConfig = componentsConfig.panel;
+    const [showedOpitions] = React.useState(options);
+    const isDisable = (disableID, disabled) => {
+        if (disabled) {
+            return true;
+        }
+        else if (targetID) {
+            return targetID === disableID;
+        }
+        return false;
+    };
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(PanelRoot, { theme: resolvedTheme, config: panelConfig },
+            header && (React.createElement(PanelHeaderWrapper, { size: size, config: panelConfig }, header)),
+            React.createElement(PanelOptionsWrapper, { size: size, config: panelConfig, maxRows: maxRows }, showedOpitions.map((option, index) => (React.createElement(ActionItem, { key: index, theme: resolvedTheme, config: panelConfig, size: size, isDisabled: isDisable(option.disableID, option.disabled), onClick: () => handleClick(option.action, option.disabled ? option.disabled : false, option.disableID) }, option.label)))),
+            footer && (React.createElement(PanelFooterWrapper, { size: size, config: panelConfig }, footer)))));
+};

package/dist/esm/components/ActionPanel/ActionPanel.styles.js

@@ -0,0 +1,70 @@
+import styled from 'styled-components';
+export const PanelRoot = styled.div `
+  display: flex;
+  flex-direction: column;
+  background-color: ${({ theme, config }) => config.panel.color.default};
+`;
+export const ActionItem = styled.div `
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex:1;
+   white-space: nowrap;
+  justify-content: space-between;
+  height: ${({ config, size }) => config.item.size[size].height}px;
+  font-size: ${({ config, size }) => config.item.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.item.size[size].lineHeight}px;
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  border-radius: ${({ config, size }) => config.item.size[size].radius}px;
+  color: ${({ theme, config, isDisabled }) => isDisabled
+    ? config.item.color.disabled.text
+    : config.item.color.default.text};
+  :hover {
+    background-color: ${({ theme, config, isDisabled }) => !isDisabled ? config.item.color.hover.background : 'transparent'};
+    color: ${({ theme, config, isDisabled }) => !isDisabled
+    ? config.item.color.hover.text
+    : config.item.color.disabled.text};
+    cursor: ${({ isDisabled }) => (!isDisabled ? 'pointer' : 'not-allowed')};
+  }
+`;
+export const PanelHeaderWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  border-bottom: 1px solid ${({ config }) => config.panel.color.divider};
+  font-size: ${({ config, size }) => config.item.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.item.size[size].lineHeight}px;
+  height: ${({ config, size }) => config.item.size[size].height}px;
+  margin-bottom: 6px;
+`;
+export const PanelFooterWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  border-top: 1px solid ${({ config }) => config.panel.color.divider};
+  font-size: ${({ config, size }) => config.item.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.item.size[size].lineHeight}px;
+  height: ${({ config, size }) => config.item.size[size].height}px;
+  margin-top: 6px;
+`;
+export const PanelSearchWrapper = styled.div `
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  margin-bottom: 6px;
+`;
+export const PanelEmptyState = styled.div `
+  height: calc(${({ config, size }) => config.item.size[size].height}px * 2);
+  font-size: ${({ config, size }) => config.item.size[size].fontSize}px;
+  line-height: ${({ config, size }) => config.item.size[size].lineHeight}px;
+  padding: 0 ${({ config, size }) => config.item.size[size].paddingX}px;
+  color: ${({ theme, config }) => config.panel.color.placeholder};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const PanelOptionsWrapper = styled.div `
+  display: block;
+  max-height: calc(
+    ${({ config, size }) => config.item.size[size].height}px * ${({ maxRows }) => maxRows}
+  );
+  overflow-y: auto;
+`;

package/dist/esm/components/ActionPanel/index.js

@@ -0,0 +1 @@
+export * from './ActionPanel';

package/dist/esm/components/Button/Button.js

@@ -1,13 +1,23 @@
+import { wordbook, resolveThemeWithComponentsConfig, } from '../../config';
 import React from 'react';
+import { ButtonContent, ButtonRoot } from './Button.styles';
+import { Icon } from '../Icon';
 import { ThemeProvider } from 'styled-components';
-import { mainTheme } from '../../Theme';
-import { ButtonElement, ButtonLoader } from './Button.styles';
 import { Loader } from '../Loader';
-export const Button = ({ text = 'Click me', mode = 'primary', size = 'medium', right = false, left = false, theme = mainTheme, disabled = false, onClick, loader = false, errorVariant = false, }) => {
+export const Button = ({ mode = 'primary', text = wordbook.button.defaultText, size = 'md', isDisabled = false, loader = false, iconName, theme, themeVariant = 'default', isActive = false, onClick, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const buttonConfig = componentsConfig.button;
+    const iconSize = buttonConfig.sizes[size].iconSize;
     const handleClick = () => {
-        !disabled && !loader && onClick();
+        !isDisabled && !loader && onClick();
     };
-    return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(ButtonElement, { mode: mode, size: size, right: right, left: left, disabled: disabled, onClick: handleClick, loader: loader, errorVariant: errorVariant }, loader ? (React.createElement(ButtonLoader, { size: size },
-            React.createElement(Loader, { size: "small", color: mode === 'primary' ? theme.buttonText : theme.action }))) : (text))));
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(ButtonRoot, { theme: resolvedTheme, config: buttonConfig, mode: mode, isDisabled: isDisabled, loader: loader, size: size, isActive: isActive, onClick: handleClick }, loader ? (React.createElement(Loader, null)) : (React.createElement(ButtonContent, null,
+            iconName && (React.createElement(Icon, { name: iconName, size: iconSize, color: "currentColor", themeVariant: themeVariant, theme: theme })),
+            text)))));
 };