@via-profit/ui-kit 0.2.6 → 0.4.0

package/Table/TableRow.js

@@ -17,14 +17,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const StyledTableRow = styled_1.default.tr `
-  display: table-row;
   vertical-align: inherit;
-  border-bottom-width: 0.1em;
-  border-bottom-style: solid;
-  border-bottom-color: ${({ theme }) => theme.color.surface.darken(20).toString()};
 `;
 const TableRow = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);
-    return (react_1.default.createElement(StyledTableRow, Object.assign({ role: "row" }, nativeProps, { ref: ref }), children));
+    return (react_1.default.createElement(StyledTableRow, Object.assign({}, nativeProps, { ref: ref }), children));
 };
 exports.default = react_1.default.forwardRef(TableRow);

package/TextArea/TextAreaIconWrapper.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { TextFieldIconWrapperProps } from '../TextField/TextFieldIconWrapper';
 export type TextAreaIconWrapperProps = TextFieldIconWrapperProps;
 declare const _default: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLDivElement> & {
-    readonly position: "start" | "end";
+    readonly position: "end" | "start";
     readonly error?: boolean | undefined;
     readonly focused?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;

package/TextArea/TextAreaInput.js

@@ -44,6 +44,8 @@ const TextareaNative = styled_1.default.textarea `
   resize: none;
   padding: 1em 1.2em;
   font-size: 1em;
+  /* Form controls do not inherit the font by default (textarea is monospace) */
+  font-family: inherit;
   background: none;
   border-radius: inherit;
   margin: 0;

package/TextArea/index.js

@@ -48,19 +48,9 @@ const TextAreaIconWrapper_1 = __importDefault(require("./TextAreaIconWrapper"));
 const TextArea = (props, ref) => {
     const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = props, nativeInputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
     const [focused, setFocused] = React.useState(false);
-    const inputID = React.useMemo(() => {
-        if (typeof id === 'string') {
-            return id;
-        }
-        const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
-        const guid = [
-            u.substring(0, 8),
-            u.substring(8, 12),
-            '4000-8' + u.substring(13, 16),
-            u.substring(16, 28),
-        ].join('-');
-        return guid;
-    }, [id]);
+    // useId is stable between server and client renders
+    const generatedID = React.useId();
+    const inputID = typeof id === 'string' ? id : generatedID;
     const inputChange = React.useCallback(event => {
         if (onChange) {
             onChange(event);
@@ -92,8 +82,10 @@ const TextArea = (props, ref) => {
     return (React.createElement(overridesMap.Container, { ref: ref, fullWidth: fullWidth, className: className, style: style, focused: focused },
         typeof label !== 'undefined' && label !== null && (React.createElement(overridesMap.Label, { htmlFor: inputID, error: error },
             label,
-            typeof requiredAsterisk !== 'undefined' && requiredAsterisk !== null && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
-        React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth },
+            typeof requiredAsterisk !== 'undefined' &&
+                requiredAsterisk !== null &&
+                requiredAsterisk !== false && (React.createElement(overridesMap.Asterisk, null, typeof requiredAsterisk === 'boolean' ? '*' : requiredAsterisk)))),
+        React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth, disabled: nativeInputProps.disabled },
             hasStartIcon && (React.createElement(overridesMap.IconWrapper, { position: "start" }, startIcon)),
             React.createElement(overridesMap.Input, Object.assign({}, nativeInputProps, { hasStartIcon: hasStartIcon, hasEndIcon: hasEndIcon, ref: inputRef, id: inputID, onChange: inputChange, onFocus: inputFocus, onBlur: inputBlur })),
             hasEndIcon && (React.createElement(overridesMap.IconWrapper, { position: "end" }, endIcon))),

package/TextField/TextFieldInput.js

@@ -44,6 +44,8 @@ const react_1 = require("@emotion/react");
 const Input = styled_1.default.input `
   padding: 1em 1.2em;
   font-size: 1em;
+  /* Form controls do not inherit the font by default (textarea is monospace) */
+  font-family: inherit;
   background: none;
   border-radius: inherit;
   margin: 0;

package/TextField/TextFieldInputWrapper.d.ts

@@ -4,11 +4,13 @@ export type TextFieldInputWrapperProps = React.HTMLAttributes<HTMLDivElement> &
     readonly fullWidth?: boolean;
     readonly readOnly?: boolean;
     readonly focused?: boolean;
+    readonly disabled?: boolean;
 };
 export declare const TextFieldInputWrapper: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     readonly error?: boolean | undefined;
     readonly fullWidth?: boolean | undefined;
     readonly readOnly?: boolean | undefined;
     readonly focused?: boolean | undefined;
+    readonly disabled?: boolean | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export default TextFieldInputWrapper;

package/TextField/TextFieldInputWrapper.js

@@ -69,10 +69,20 @@ const Wrapper = styled_1.default.div `
         border-color: ${props.theme.color.error.lighten(0.6).toString()};
       }
     `}
+  ${props => props.$disabled &&
+    (0, react_1.css) `
+      color: ${props.theme.color.textPrimary.alpha(0.4).toString()};
+      cursor: not-allowed;
+
+      & input,
+      & textarea {
+        cursor: not-allowed;
+      }
+    `}
 `;
 exports.TextFieldInputWrapper = React.forwardRef((props, ref) => {
-    const { focused, error, readOnly, fullWidth, children } = props, nativeProps = __rest(props, ["focused", "error", "readOnly", "fullWidth", "children"]);
-    return (React.createElement(Wrapper, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, "$readOnly": readOnly, "$fullWidth": Boolean(fullWidth), ref: ref }), children));
+    const { focused, error, readOnly, fullWidth, disabled, children } = props, nativeProps = __rest(props, ["focused", "error", "readOnly", "fullWidth", "disabled", "children"]);
+    return (React.createElement(Wrapper, Object.assign({}, nativeProps, { "$error": error, "$focused": focused, "$readOnly": readOnly, "$fullWidth": Boolean(fullWidth), "$disabled": disabled, ref: ref }), children));
 });
 exports.TextFieldInputWrapper.displayName = 'TextFieldInputWrapper';
 exports.default = exports.TextFieldInputWrapper;

package/TextField/index.js

@@ -67,26 +67,14 @@ const defailtOverrides = {
 const TextField = React.forwardRef((props, ref) => {
     const { error, fullWidth, inputRef, label, id, errorText, className, style, endIcon, startIcon, requiredAsterisk, overrides, onChange, onFocus, onBlur } = props, nativeInputProps = __rest(props, ["error", "fullWidth", "inputRef", "label", "id", "errorText", "className", "style", "endIcon", "startIcon", "requiredAsterisk", "overrides", "onChange", "onFocus", "onBlur"]);
     const [focused, setFocused] = React.useState(false);
-    const inputID = React.useMemo(() => {
-        if (typeof id === 'string') {
-            return id;
-        }
-        const u = Date.now().toString(16) + Math.random().toString(16) + '0'.repeat(16);
-        return [
-            u.substring(0, 8),
-            u.substring(8, 12),
-            '4000-8' + u.substring(13, 16),
-            u.substring(16, 28),
-        ].join('-');
-    }, [id]);
-    const stableOnChange = React.useCallback(onChange ? onChange : () => undefined, [onChange]); // уже есть
-    // const stableOnFocus = React.useCallback(onFocus, [onFocus]); // уже есть
-    // const stableOnBlur = React.useCallback(onBlur, [onBlur]); // уже есть
+    // useId is stable between server and client renders
+    const generatedID = React.useId();
+    const inputID = typeof id === 'string' ? id : generatedID;
     const inputChange = React.useCallback(event => {
-        if (stableOnChange) {
-            stableOnChange(event);
+        if (typeof onChange === 'function') {
+            onChange(event);
         }
-    }, [stableOnChange]);
+    }, [onChange]);
     const inputFocus = React.useCallback(event => {
         setFocused(true);
         if (typeof onFocus === 'function') {
@@ -119,7 +107,7 @@ const TextField = React.forwardRef((props, ref) => {
     const renderIcon = React.useCallback((position, icon) => (React.createElement(overridesMap.IconWrapper, { position: position }, icon)), [overridesMap]);
     return (React.createElement(overridesMap.Container, { ref: ref, fullWidth: fullWidth, className: className, style: style, focused: focused },
         renderLabel(),
-        React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth },
+        React.createElement(overridesMap.InputWrapper, { error: error, focused: focused, fullWidth: fullWidth, disabled: nativeInputProps.disabled },
             hasStartIcon && renderIcon('start', startIcon),
             React.createElement(overridesMap.Input, Object.assign({}, nativeInputProps, { hasStartIcon: hasStartIcon, hasEndIcon: hasEndIcon, ref: inputRef, id: inputID, onChange: inputChange, onFocus: inputFocus, onBlur: inputBlur })),
             hasEndIcon && renderIcon('end', endIcon)),

package/ThemeProvider/createTheme.js

@@ -17,8 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.createTheme = void 0;
 const Color_1 = __importDefault(require("../Color"));
 const createTheme = overrides => {
-    const _a = overrides || {}, { isDark, fontSize, zIndex, color, shape } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "color", "shape"]);
-    const theme = Object.assign(Object.assign({}, rest), { isDark: typeof isDark === 'boolean' ? isDark : false, fontSize: Object.assign({ small: 14, normal: 16, medium: 18, large: 20 }, fontSize), zIndex: Object.assign({ header: 8, modal: 10 }, zIndex), color: {}, shape: Object.assign({ radiusFactor: 0.3 }, shape) });
+    const _a = overrides || {}, { isDark, fontSize, zIndex, color, shape, spacing } = _a, rest = __rest(_a, ["isDark", "fontSize", "zIndex", "color", "shape", "spacing"]);
+    const theme = Object.assign(Object.assign({}, rest), { isDark: typeof isDark === 'boolean' ? isDark : false, fontSize: Object.assign({ small: 14, normal: 16, medium: 18, large: 20 }, fontSize), zIndex: Object.assign({ header: 8, modal: 10 }, zIndex), color: {}, shape: Object.assign({ radiusFactor: 0.3 }, shape), spacing: Object.assign({ xs: '0.25em', sm: '0.5em', md: '1em', lg: '1.5em', xl: '2em' }, spacing) });
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     /* @ts-ignore */
     const defaultColors = {
@@ -41,7 +41,6 @@ const createTheme = overrides => {
     Object.entries(Object.assign(Object.assign({}, defaultColors), color)).forEach(([colorName, colorValue]) => {
         theme.color[colorName] = Color_1.default.fromString(colorValue);
     });
-    theme.color.test = Color_1.default.fromString('red');
     return theme;
 };
 exports.createTheme = createTheme;

package/ThemeProvider/index.d.ts

@@ -3,12 +3,13 @@ import { useTheme } from '@emotion/react';
 import type Color from '../Color';
 export { useTheme };
 export * from './createTheme';
-export type UITheme = Required<Omit<UIThemeOverrides, 'isDark' | 'fontSize' | 'zIndex' | 'shape' | 'color'>> & {
+export type UITheme = Required<Omit<UIThemeOverrides, 'isDark' | 'fontSize' | 'zIndex' | 'shape' | 'color' | 'spacing'>> & {
     readonly isDark: boolean;
     readonly fontSize: Record<keyof UIThemeOverrideFontSize, number>;
     readonly zIndex: Required<UIThemeOverrideZIndex>;
     readonly color: Record<keyof UIThemeOverrideColor, Color>;
     readonly shape: Required<UIThemeOverrideShape>;
+    readonly spacing: Required<UIThemeOverrideSpacing>;
 };
 export interface UIThemeOverrideColor {
     readonly backgroundPrimary?: string;
@@ -34,6 +35,18 @@ export interface UIThemeOverrideZIndex {
 export interface UIThemeOverrideShape {
     readonly radiusFactor?: 0 | 0.1 | 0.2 | 0.3 | 0.4 | 0.5 | 0.6 | 0.7 | 0.8 | 0.9 | 1;
 }
+/**
+ * The spacing scale: the gaps between the elements (`<Stack>`, `<Grid>`) and the paddings.
+ * Any CSS length, `em` is recommended: the spacing grows together with the font size
+ */
+export interface UIThemeOverrideSpacing {
+    readonly xs?: string;
+    readonly sm?: string;
+    readonly md?: string;
+    readonly lg?: string;
+    readonly xl?: string;
+}
+export type ThemeSpacing = keyof UIThemeOverrideSpacing;
 export interface UIThemeOverrideFontSize {
     readonly small?: number;
     readonly normal?: number;
@@ -41,10 +54,14 @@ export interface UIThemeOverrideFontSize {
     readonly large?: number;
 }
 export interface UIThemeOverrides {
-    readonly isDark: boolean;
+    /**
+     * **Default:** `false`
+     */
+    readonly isDark?: boolean;
     readonly fontSize?: UIThemeOverrideFontSize;
     readonly zIndex?: UIThemeOverrideZIndex;
     readonly shape?: UIThemeOverrideShape;
+    readonly spacing?: UIThemeOverrideSpacing;
     readonly color?: UIThemeOverrideColor;
 }
 declare const ThemeProvider: React.FC<ThemeProviderProps>;

package/Typography/Base.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 /**
  * @deprecated - Use `Span` instead\
- * Example: `import Span from '@via-profit/ui-kit/Span'`
+ * Example: `import Span from '@via-profit/ui-kit/Typography/Span'`
  */
 declare const Base: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;

package/Typography/Base.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const styled_1 = __importDefault(require("@emotion/styled"));
 /**
  * @deprecated - Use `Span` instead\
- * Example: `import Span from '@via-profit/ui-kit/Span'`
+ * Example: `import Span from '@via-profit/ui-kit/Typography/Span'`
  */
 const Base = styled_1.default.span `
   font-size: 1em;

package/Typography/Blockquote.js

@@ -16,7 +16,7 @@ const Blockquote = styled_1.default.blockquote `
   & > p:first-of-type {
     margin-top: 0;
   }
-  & > p:last-child {
+  & > p:last-of-type {
     margin-bottom: 0;
   }
 `;

package/Typography/Del.js

@@ -20,8 +20,8 @@ const Styled = styled_1.default.del `
   font-size: 1em;
   color: currentColor;
 `;
-const Em = (props, ref) => {
+const Del = (props, ref) => {
     const { children } = props, nativeProps = __rest(props, ["children"]);
     return (react_1.default.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
 };
-exports.default = react_1.default.forwardRef(Em);
+exports.default = react_1.default.forwardRef(Del);

package/Typography/H4.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Styled = styled_1.default.h4 `
-  font-size: 1.2em;
+  font-size: 1.1em;
   font-weight: 500;
   color: currentColor;
 `;

package/Typography/H5.js

@@ -17,8 +17,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const Styled = styled_1.default.h5 `
-  font-size: 1.2em;
-  font-weight: 300;
+  font-size: 1em;
+  font-weight: 500;
   color: currentColor;
 `;
 const H5 = (props, ref) => {

package/Typography/H6.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type H6Props = React.HTMLAttributes<HTMLHeadingElement>;
+declare const _default: React.ForwardRefExoticComponent<H6Props & React.RefAttributes<HTMLHeadingElement>>;
+export default _default;

package/Typography/H6.js

@@ -0,0 +1,28 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const Styled = styled_1.default.h6 `
+  font-size: 0.9em;
+  font-weight: 500;
+  color: currentColor;
+`;
+const H6 = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Styled, Object.assign({}, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(H6);

package/Typography/SectionDescription.js

@@ -12,6 +12,5 @@ const SectionDescription = (0, styled_1.default)(Paragraph_1.default) `
   padding: 0 20%;
   margin-top: 2.4em;
   margin-bottom: 1em;
-  text-align: center;
 `;
 exports.default = SectionDescription;

package/Typography/SectionTitle.d.ts

@@ -1,8 +1,5 @@
 import React from 'react';
-type Props = {
-    style?: any;
-    className?: string;
-    children: React.ReactNode | React.ReactNode[];
-};
-declare const SectionTitle: React.FC<Props>;
-export default SectionTitle;
+import { H2Props } from './H2';
+export type SectionTitleProps = H2Props;
+declare const _default: React.ForwardRefExoticComponent<H2Props & React.RefAttributes<HTMLHeadingElement>>;
+export default _default;

package/Typography/SectionTitle.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -13,19 +24,26 @@ const Title = (0, styled_1.default)(H2_1.default) `
 `;
 const Inner = styled_1.default.span `
   position: relative;
-  & :before {
+
+  /* The accent line under the title */
+  &::before {
     content: '';
     position: absolute;
     left: 50%;
-    bottom: -15px;
-    height: 3px;
-    width: 40px;
+    bottom: -0.5em;
+    height: 0.12em;
+    width: 2.5em;
+    border-radius: 0.06em;
     transform: translate(-50%, 0);
+    background-color: ${({ theme }) => theme.color.accentPrimary.toString()};
   }
 `;
-const SectionTitle = props => {
-    const { style, className, children } = props;
-    return (react_1.default.createElement(Title, { style: style, className: className },
+/**
+ * The centered H2 with the accent line under the text
+ */
+const SectionTitle = (props, ref) => {
+    const { children } = props, nativeProps = __rest(props, ["children"]);
+    return (react_1.default.createElement(Title, Object.assign({}, nativeProps, { ref: ref }),
         react_1.default.createElement(Inner, null, children)));
 };
-exports.default = SectionTitle;
+exports.default = react_1.default.forwardRef(SectionTitle);

package/Typography/index.d.ts

@@ -1,3 +1,30 @@
 import Paragraph from './Paragraph';
 export * from './Paragraph';
+export type { H1Props } from './H1';
+export type { H2Props } from './H2';
+export type { H3Props } from './H3';
+export type { H4Props } from './H4';
+export type { H5Props } from './H5';
+export type { H6Props } from './H6';
+export type { SpanProps } from './Span';
+export type { StrongProps } from './Strong';
+export type { EmProps } from './Em';
+export type { DelProps } from './Del';
+export type { SectionTitleProps } from './SectionTitle';
+export { default as H1 } from './H1';
+export { default as H2 } from './H2';
+export { default as H3 } from './H3';
+export { default as H4 } from './H4';
+export { default as H5 } from './H5';
+export { default as H6 } from './H6';
+export { default as Span } from './Span';
+export { default as Strong } from './Strong';
+export { default as Em } from './Em';
+export { default as Del } from './Del';
+export { default as U } from './U';
+export { default as Blockquote } from './Blockquote';
+export { Ul, Ol, Li } from './List';
+export { default as SectionTitle } from './SectionTitle';
+export { default as SectionDescription } from './SectionDescription';
+export { Paragraph };
 export default Paragraph;

package/Typography/index.js

@@ -17,6 +17,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Paragraph = exports.SectionDescription = exports.SectionTitle = exports.Li = exports.Ol = exports.Ul = exports.Blockquote = exports.U = exports.Del = exports.Em = exports.Strong = exports.Span = exports.H6 = exports.H5 = exports.H4 = exports.H3 = exports.H2 = exports.H1 = void 0;
 const Paragraph_1 = __importDefault(require("./Paragraph"));
+exports.Paragraph = Paragraph_1.default;
 __exportStar(require("./Paragraph"), exports);
+var H1_1 = require("./H1");
+Object.defineProperty(exports, "H1", { enumerable: true, get: function () { return __importDefault(H1_1).default; } });
+var H2_1 = require("./H2");
+Object.defineProperty(exports, "H2", { enumerable: true, get: function () { return __importDefault(H2_1).default; } });
+var H3_1 = require("./H3");
+Object.defineProperty(exports, "H3", { enumerable: true, get: function () { return __importDefault(H3_1).default; } });
+var H4_1 = require("./H4");
+Object.defineProperty(exports, "H4", { enumerable: true, get: function () { return __importDefault(H4_1).default; } });
+var H5_1 = require("./H5");
+Object.defineProperty(exports, "H5", { enumerable: true, get: function () { return __importDefault(H5_1).default; } });
+var H6_1 = require("./H6");
+Object.defineProperty(exports, "H6", { enumerable: true, get: function () { return __importDefault(H6_1).default; } });
+var Span_1 = require("./Span");
+Object.defineProperty(exports, "Span", { enumerable: true, get: function () { return __importDefault(Span_1).default; } });
+var Strong_1 = require("./Strong");
+Object.defineProperty(exports, "Strong", { enumerable: true, get: function () { return __importDefault(Strong_1).default; } });
+var Em_1 = require("./Em");
+Object.defineProperty(exports, "Em", { enumerable: true, get: function () { return __importDefault(Em_1).default; } });
+var Del_1 = require("./Del");
+Object.defineProperty(exports, "Del", { enumerable: true, get: function () { return __importDefault(Del_1).default; } });
+var U_1 = require("./U");
+Object.defineProperty(exports, "U", { enumerable: true, get: function () { return __importDefault(U_1).default; } });
+var Blockquote_1 = require("./Blockquote");
+Object.defineProperty(exports, "Blockquote", { enumerable: true, get: function () { return __importDefault(Blockquote_1).default; } });
+var List_1 = require("./List");
+Object.defineProperty(exports, "Ul", { enumerable: true, get: function () { return List_1.Ul; } });
+Object.defineProperty(exports, "Ol", { enumerable: true, get: function () { return List_1.Ol; } });
+Object.defineProperty(exports, "Li", { enumerable: true, get: function () { return List_1.Li; } });
+var SectionTitle_1 = require("./SectionTitle");
+Object.defineProperty(exports, "SectionTitle", { enumerable: true, get: function () { return __importDefault(SectionTitle_1).default; } });
+var SectionDescription_1 = require("./SectionDescription");
+Object.defineProperty(exports, "SectionDescription", { enumerable: true, get: function () { return __importDefault(SectionDescription_1).default; } });
+// The default export is kept for compatibility
 exports.default = Paragraph_1.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.2.6",
+  "version": "0.4.0",
   "description": "UI Kit",
   "repository": {
     "type": "git",
@@ -14,9 +14,7 @@
   "scripts": {
     "lint": "eslint --fix .",
     "build": "node ./scripts/build.js",
-    "publish:package": "bash ./scripts/pub.sh",
-    "build:flags": "node ./scripts/compile-country-flags.js",
-    "indexes:flags": "node ./scripts/indexes-country-flags.js"
+    "build:flags": "node ./scripts/compile-country-flags.js"
   },
   "publishConfig": {
     "access": "public"

package/utils/TabManager.d.ts

@@ -25,7 +25,7 @@
  *     window.document.addEventListener('keydown', keydown);
  *
  *      return () => {
- *         window.document.addEventListener('keydown', keydown);
+ *         window.document.removeEventListener('keydown', keydown);
  *      }
  *   }, []);
  *
@@ -51,6 +51,12 @@ declare class TabManager {
     registerContainer(container: HTMLElement): void;
     unregisterContainer(container: HTMLElement, revertBackFocus?: boolean): void;
     getElementsList(): HTMLElement[];
+    /**
+     * Index of the currently focused element in the list.
+     * Uses the real focus, so a focus set by mouse is taken into account
+     */
+    getCurrentIndex(list: readonly HTMLElement[]): number;
+    focusByIndex(list: readonly HTMLElement[], index: number): void;
     focusNext(): void;
     focusPrev(): void;
 }