@infomaximum/ui-kit 0.13.5 → 0.14.1

package/dist/components/Popconfirm/components/PopconfirmFloatingElement/PopconfirmFloatingElement.styles.d.ts

@@ -34,8 +34,8 @@ export declare const popconfirmFloatingElementStyle: {
         readonly flexDirection: "column";
     };
     titleWrapper: (theme: Theme) => {
-        fontWeight: number;
         fontFamily: "Roboto";
+        fontWeight: 500;
         fontSize: 14;
         lineHeight: "20px";
         color: "#262626";

package/dist/components/Popconfirm/components/PopconfirmFloatingElement/PopconfirmFloatingElement.styles.js

@@ -41,8 +41,7 @@ const popconfirmFloatingElementStyle = {
     const tokens = getPopconfirmTokens(theme);
     return {
       color: tokens.popconfirmText,
-      ...theme.typography.subheader1,
-      fontWeight: 500
+      ...theme.typography.subheader1
     };
   },
   descriptionWrapper: (theme) => {

package/dist/components/Popover/component/PopoverFloatingElement/PopoverFloatingElement.styles.d.ts

@@ -17,8 +17,8 @@ export declare const popoverFloatingElementDefaultStyle: {
         readonly color: "#262626";
     };
     titleWrapper: (theme: Theme) => {
-        fontWeight: number;
         fontFamily: "Roboto";
+        fontWeight: 500;
         fontSize: 14;
         lineHeight: "20px";
         color: "#262626";

package/dist/components/Popover/component/PopoverFloatingElement/PopoverFloatingElement.styles.js

@@ -21,8 +21,7 @@ const popoverFloatingElementDefaultStyle = {
     const popoverTokens = getPopoverTokens(theme);
     return {
       color: popoverTokens.popoverText,
-      ...theme.typography.subheader1,
-      fontWeight: 500
+      ...theme.typography.subheader1
     };
   },
   contentWrapper: (theme) => {

package/dist/components/Segmented/Segmented.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+import { SegmentedProps } from './Segmented.types';
+declare const SegmentedComponent: FC<SegmentedProps>;
+export declare const Segmented: <ValueType>(props: SegmentedProps<ValueType>) => ReturnType<typeof SegmentedComponent>;
+export {};

package/dist/components/Segmented/Segmented.js

@@ -0,0 +1,41 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { memo, useId, useMemo, useCallback } from "react";
+import { SegmentedItem } from "./components/SegmentedItem/SegmentedItem.js";
+import { getSegmentedTokens } from "./Segmented.tokens.js";
+import { normalizeOption } from "./Segmented.utils.js";
+import { getSegmentedStyle, segmentedGroupStyle } from "./Segmented.styles.js";
+import { useTheme } from "../../hooks/useTheme/useTheme.js";
+import { useControlledState } from "../../hooks/useControlledState/useControlledState.js";
+const SegmentedComponent = (props) => {
+  var _a;
+  const defaultName = useId();
+  const {
+    defaultValue,
+    value: valueProp,
+    options: optionsProp,
+    name = defaultName,
+    disabled = false,
+    block = false,
+    onChange
+  } = props;
+  const theme = useTheme();
+  const segmentedTokens = getSegmentedTokens(theme);
+  const options = useMemo(() => optionsProp.map(normalizeOption), [optionsProp]);
+  const [value, setValue] = useControlledState(defaultValue ?? ((_a = options[0]) == null ? void 0 : _a.value), valueProp);
+  const handleChange = useCallback((value2) => {
+    setValue(value2);
+    onChange == null ? void 0 : onChange(value2);
+  }, [onChange, setValue]);
+  return /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": "segmented control", tabIndex: disabled ? void 0 : 0, css: getSegmentedStyle(segmentedTokens, block)(theme), children: /* @__PURE__ */ jsx("div", { css: segmentedGroupStyle, children: options.map((option) => {
+    const {
+      value: optionValue,
+      disabled: optionDisabled,
+      ...restOption
+    } = option;
+    return /* @__PURE__ */ jsx(SegmentedItem, { name, block, value: optionValue, ...restOption, isSelected: optionValue === value, disabled: disabled || optionDisabled, onChange: handleChange }, optionValue);
+  }) }) });
+};
+const Segmented = memo(SegmentedComponent);
+export {
+  Segmented
+};

package/dist/components/Segmented/Segmented.styles.d.ts

@@ -0,0 +1,15 @@
+import { Theme } from '../../themes';
+import { SegmentedTokens } from './Segmented.tokens';
+export declare const getSegmentedStyle: (segmentedTokens: SegmentedTokens, block: boolean) => (theme: Theme) => {
+    fontFamily: "Roboto";
+    fontSize: 14;
+    lineHeight: "20px";
+    display: string;
+    backgroundColor: "#F0F0F0";
+    borderRadius: 4;
+    padding: 2;
+};
+export declare const segmentedGroupStyle: {
+    display: string;
+    width: string;
+};

package/dist/components/Segmented/Segmented.styles.js

@@ -0,0 +1,15 @@
+const getSegmentedStyle = (segmentedTokens, block) => (theme) => ({
+  display: block ? "flex" : "inline-block",
+  backgroundColor: segmentedTokens.segmentedTrackBg,
+  borderRadius: theme.borderRadiusM,
+  padding: segmentedTokens.segmentedTrackPadding,
+  ...theme.typography.body2
+});
+const segmentedGroupStyle = {
+  display: "flex",
+  width: "100%"
+};
+export {
+  getSegmentedStyle,
+  segmentedGroupStyle
+};

package/dist/components/Segmented/Segmented.tokens.d.ts

@@ -0,0 +1,17 @@
+import { Theme } from '../../themes';
+export declare const getSegmentedTokens: (theme: Theme) => {
+    readonly segmentedItemText: "#8C8C8C";
+    readonly segmentedItemTextHover: "#595959";
+    readonly segmentedItemTextSelected: "#262626";
+    readonly segmentedItemTextDisabled: "#BFBFBF";
+    readonly segmentedItemBgHover: `rgba(${number}, ${number}, ${number}, 0.08)`;
+    readonly segmentedItemBgSelected: "#FFFFFF";
+    readonly segmentedTrackBg: "#F0F0F0";
+    readonly segmentedTrackPadding: 2;
+    readonly segmentedItemPaddingHorizontal: 8;
+    readonly segmentedItemHeight: 24;
+    readonly segmentedItemShadow: `0 1px 2px 0 rgba(${number}, ${number}, ${number}, 0.03),
+                          0 1px 6px -1px rgba(${number}, ${number}, ${number}, 0.02),
+                          0 2px 4px 0 rgba(${number}, ${number}, ${number}, 0.02)`;
+};
+export type SegmentedTokens = ReturnType<typeof getSegmentedTokens>;

package/dist/components/Segmented/Segmented.tokens.js

@@ -0,0 +1,19 @@
+import { black2Rgba } from "../../themes/baseTokens/const.js";
+const getSegmentedTokens = (theme) => ({
+  segmentedItemText: theme.textSecondary,
+  segmentedItemTextHover: theme.textComplimentary,
+  segmentedItemTextSelected: theme.textPrimary,
+  segmentedItemTextDisabled: theme.textHint,
+  segmentedItemBgHover: theme.bgIconHover,
+  segmentedItemBgSelected: theme.bgContainer,
+  segmentedTrackBg: theme.bgSecondary,
+  segmentedTrackPadding: theme.x05,
+  segmentedItemPaddingHorizontal: theme.x2,
+  segmentedItemHeight: 24,
+  segmentedItemShadow: `0 1px 2px 0 ${black2Rgba(0.03)},
+                          0 1px 6px -1px ${black2Rgba(0.02)},
+                          0 2px 4px 0 ${black2Rgba(0.02)}`
+});
+export {
+  getSegmentedTokens
+};

package/dist/components/Segmented/Segmented.types.d.ts

@@ -0,0 +1,20 @@
+import { ReactNode } from 'react';
+export type SegmentedValue = string | number;
+export type SegmentedOption<T = SegmentedValue> = T | SegmentedLabeledOption<T>;
+type SegmentedOptions<T> = SegmentedOption<T>[];
+export type SegmentedLabeledOption<T = SegmentedValue> = {
+    label?: ReactNode;
+    value: T;
+    icon?: ReactNode;
+    disabled?: boolean;
+};
+export interface SegmentedProps<ValueType = SegmentedValue> {
+    block?: boolean;
+    disabled?: boolean;
+    options: SegmentedOptions<ValueType>;
+    defaultValue?: ValueType;
+    value?: ValueType;
+    name?: string;
+    onChange?: (value: ValueType) => void;
+}
+export {};

package/dist/components/Segmented/Segmented.utils.d.ts

@@ -0,0 +1,2 @@
+import { SegmentedLabeledOption, SegmentedOption } from './Segmented.types';
+export declare const normalizeOption: (option: SegmentedOption) => SegmentedLabeledOption;

package/dist/components/Segmented/Segmented.utils.js

@@ -0,0 +1,13 @@
+import { isNumber, isString } from "lodash-es";
+const normalizeOption = (option) => {
+  if (isNumber(option) || isString(option)) {
+    return {
+      value: option,
+      label: option
+    };
+  }
+  return option;
+};
+export {
+  normalizeOption
+};

package/dist/components/Segmented/components/SegmentedItem/SegmentedItem.d.ts

@@ -0,0 +1,2 @@
+import { SegmentedItemProps } from './SegmentedItem.types';
+export declare const SegmentedItem: import('react').NamedExoticComponent<SegmentedItemProps<import('../../Segmented.types').SegmentedValue>>;

package/dist/components/Segmented/components/SegmentedItem/SegmentedItem.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { memo } from "react";
+import { getSegmentedTokens } from "../../Segmented.tokens.js";
+import { getSegmentedItemStyle, segmentedItemInputStyle, segmentedItemLabelWrapperStyle, segmentedItemIconStyle, segmentedItemLabelStyle } from "./SegmentedItem.styles.js";
+import { useTheme } from "../../../../hooks/useTheme/useTheme.js";
+const SegmentedItemComponent = (props) => {
+  const {
+    block,
+    name,
+    value,
+    label,
+    icon,
+    isSelected,
+    disabled,
+    onChange
+  } = props;
+  const theme = useTheme();
+  const segmentedTokens = getSegmentedTokens(theme);
+  const handleChange = (event) => {
+    if (disabled) {
+      return;
+    }
+    onChange(value, event);
+  };
+  return /* @__PURE__ */ jsxs("label", { css: getSegmentedItemStyle(segmentedTokens, block, isSelected, disabled)(theme), children: [
+    /* @__PURE__ */ jsx("input", { type: "radio", name, checked: isSelected, disabled, onChange: handleChange, css: segmentedItemInputStyle }),
+    /* @__PURE__ */ jsxs("div", { "aria-selected": isSelected, css: segmentedItemLabelWrapperStyle(segmentedTokens)(theme), children: [
+      icon && /* @__PURE__ */ jsx("span", { css: segmentedItemIconStyle(theme), children: icon }),
+      label && /* @__PURE__ */ jsx("span", { css: segmentedItemLabelStyle, children: label })
+    ] })
+  ] });
+};
+const SegmentedItem = memo(SegmentedItemComponent);
+export {
+  SegmentedItem
+};

package/dist/components/Segmented/components/SegmentedItem/SegmentedItem.styles.d.ts

@@ -0,0 +1,47 @@
+import { Theme } from '../../../../themes';
+import { SegmentedTokens } from '../../Segmented.tokens';
+export declare const getSegmentedItemStyle: (segmentedTokens: SegmentedTokens, block: boolean, isSelected: boolean, disabled: boolean | undefined) => (theme: Theme) => {
+    readonly position: "relative";
+    readonly cursor: "pointer" | "not-allowed";
+    readonly display: "flex";
+    readonly justifyContent: "center";
+    readonly flex: 1 | undefined;
+    readonly minWidth: 0 | undefined;
+    readonly paddingInline: 8;
+    readonly borderRadius: 4;
+    readonly backgroundColor: "#FFFFFF" | undefined;
+    readonly color: "#262626" | "#8C8C8C" | "#BFBFBF";
+    readonly boxShadow: `0 1px 2px 0 rgba(${number}, ${number}, ${number}, 0.03),
+                          0 1px 6px -1px rgba(${number}, ${number}, ${number}, 0.02),
+                          0 2px 4px 0 rgba(${number}, ${number}, ${number}, 0.02)` | undefined;
+    readonly ":hover": {
+        readonly color: "#595959" | undefined;
+        readonly backgroundColor: `rgba(${number}, ${number}, ${number}, 0.08)` | undefined;
+    };
+};
+export declare const segmentedItemInputStyle: {
+    readonly position: "absolute";
+    readonly width: 0;
+    readonly height: 0;
+    readonly top: 0;
+    readonly left: 0;
+    readonly margin: 0;
+};
+export declare const segmentedItemLabelWrapperStyle: (segmentedTokens: SegmentedTokens) => (theme: Theme) => {
+    overflow: string;
+    whiteSpace: string;
+    textOverflow: string;
+    display: string;
+    alignItems: string;
+    columnGap: 4;
+    minHeight: 24;
+};
+export declare const segmentedItemIconStyle: (theme: Theme) => {
+    display: string;
+    fontSize: 16;
+};
+export declare const segmentedItemLabelStyle: {
+    overflow: string;
+    whiteSpace: string;
+    textOverflow: string;
+};

package/dist/components/Segmented/components/SegmentedItem/SegmentedItem.styles.js

@@ -0,0 +1,51 @@
+const ellipsisStyle = {
+  overflow: "hidden",
+  whiteSpace: "nowrap",
+  textOverflow: "ellipsis"
+};
+const getSegmentedItemStyle = (segmentedTokens, block, isSelected, disabled) => (theme) => ({
+  position: "relative",
+  cursor: disabled ? "not-allowed" : "pointer",
+  display: "flex",
+  justifyContent: "center",
+  flex: block ? 1 : void 0,
+  minWidth: block ? 0 : void 0,
+  paddingInline: segmentedTokens.segmentedItemPaddingHorizontal,
+  borderRadius: theme.borderRadiusM,
+  backgroundColor: isSelected ? segmentedTokens.segmentedItemBgSelected : void 0,
+  color: disabled ? segmentedTokens.segmentedItemTextDisabled : isSelected ? segmentedTokens.segmentedItemTextSelected : segmentedTokens.segmentedItemText,
+  boxShadow: isSelected ? segmentedTokens.segmentedItemShadow : void 0,
+  ":hover": {
+    color: isSelected || disabled ? void 0 : segmentedTokens.segmentedItemTextHover,
+    backgroundColor: isSelected || disabled ? void 0 : segmentedTokens.segmentedItemBgHover
+  }
+});
+const segmentedItemInputStyle = {
+  position: "absolute",
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+  margin: 0
+};
+const segmentedItemLabelWrapperStyle = (segmentedTokens) => (theme) => ({
+  display: "flex",
+  alignItems: "center",
+  columnGap: theme.spaceXS,
+  minHeight: segmentedTokens.segmentedItemHeight,
+  ...ellipsisStyle
+});
+const segmentedItemIconStyle = (theme) => ({
+  display: "flex",
+  fontSize: theme.iconM
+});
+const segmentedItemLabelStyle = {
+  ...ellipsisStyle
+};
+export {
+  getSegmentedItemStyle,
+  segmentedItemIconStyle,
+  segmentedItemInputStyle,
+  segmentedItemLabelStyle,
+  segmentedItemLabelWrapperStyle
+};

package/dist/components/Segmented/components/SegmentedItem/SegmentedItem.types.d.ts

@@ -0,0 +1,6 @@
+import { ChangeEvent } from 'react';
+import { SegmentedLabeledOption, SegmentedProps, SegmentedValue } from '../../Segmented.types';
+export interface SegmentedItemProps<T = SegmentedValue> extends SegmentedLabeledOption, Required<Pick<SegmentedProps, "name" | "block">> {
+    isSelected: boolean;
+    onChange: (value: T, event: ChangeEvent<HTMLInputElement>) => void;
+}

package/dist/components/Segmented/index.d.ts

@@ -0,0 +1,2 @@
+export { Segmented } from './Segmented';
+export type { SegmentedProps, SegmentedLabeledOption } from './Segmented.types';

package/dist/contexts/themeContext.d.ts

@@ -139,21 +139,25 @@ export declare const ThemeContext: import('react').Context<{
     typography: {
         readonly header1: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 24;
             readonly lineHeight: "32px";
         };
         readonly header2: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 16;
             readonly lineHeight: "24px";
         };
         readonly subheader1: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 14;
             readonly lineHeight: "20px";
         };
         readonly subheader2: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 12;
             readonly lineHeight: "20px";
         };

package/dist/hooks/useControlledState/index.d.ts

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

package/dist/hooks/useControlledState/useControlledState.d.ts

@@ -0,0 +1 @@
+export declare const useControlledState: <T>(initialState: T | (() => T), value?: T) => readonly [T, import('react').Dispatch<import('react').SetStateAction<T>>];

package/dist/hooks/useControlledState/useControlledState.js

@@ -0,0 +1,16 @@
+import { useState } from "react";
+import { isUndefined } from "lodash-es";
+import { useFirstMountLayoutEffect } from "../useFirstMountLayoutEffect/useFirstMountLayoutEffect.js";
+const useControlledState = (initialState, value) => {
+  const [innerValue, setInnerValue] = useState(initialState);
+  const mergedValue = isUndefined(value) ? innerValue : value;
+  useFirstMountLayoutEffect((firstMount) => {
+    if (!firstMount) {
+      setInnerValue(value);
+    }
+  }, [value]);
+  return [mergedValue, setInnerValue];
+};
+export {
+  useControlledState
+};

package/dist/hooks/useFirstMountLayoutEffect/index.d.ts

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

package/dist/hooks/useFirstMountLayoutEffect/useFirstMountLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { DependencyList } from 'react';
+export declare const useFirstMountLayoutEffect: (callback: (firstMount: boolean) => void, deps?: DependencyList) => void;

package/dist/hooks/useFirstMountLayoutEffect/useFirstMountLayoutEffect.js

@@ -0,0 +1,15 @@
+import { useRef } from "react";
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js";
+const useFirstMountLayoutEffect = (callback, deps) => {
+  const firstMountRef = useRef(true);
+  useIsomorphicLayoutEffect(() => callback(firstMountRef.current), deps);
+  useIsomorphicLayoutEffect(() => {
+    firstMountRef.current = false;
+    return () => {
+      firstMountRef.current = true;
+    };
+  }, []);
+};
+export {
+  useFirstMountLayoutEffect
+};

package/dist/hooks/useIsomorphicLayoutEffect/index.d.ts

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

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

@@ -0,0 +1,5 @@
+import { useLayoutEffect, useEffect } from "react";
+const useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+export {
+  useIsomorphicLayoutEffect
+};

package/dist/hooks/useTheme/useTheme.d.ts

@@ -139,21 +139,25 @@ export declare const useTheme: () => {
     typography: {
         readonly header1: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 24;
             readonly lineHeight: "32px";
         };
         readonly header2: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 16;
             readonly lineHeight: "24px";
         };
         readonly subheader1: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 14;
             readonly lineHeight: "20px";
         };
         readonly subheader2: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 12;
             readonly lineHeight: "20px";
         };

package/dist/index.d.ts

@@ -45,4 +45,6 @@ export { type FormProps, type FormItemProps, Form } from './components/Form';
 export { type PopconfirmProps, Popconfirm } from './components/Popconfirm';
 export { TreeSelect } from './components/TreeSelect';
 export type { TreeSelectProps } from './components/TreeSelect';
+export { type EmptyProps, Empty } from './components/Empty';
+export { type SegmentedProps, type SegmentedLabeledOption, Segmented, } from './components/Segmented';
 export * from 'react-intersection-observer/test-utils';

package/dist/index.js

@@ -33,6 +33,8 @@ import { useConfig } from "./components/ConfigProvider/hooks/useConfig/useConfig
 import { Form } from "./components/Form/Form.js";
 import { Popconfirm } from "./components/Popconfirm/Popconfirm.js";
 import { TreeSelect } from "./components/TreeSelect/TreeSelect.js";
+import { Empty } from "./components/Empty/Empty.js";
+import { Segmented } from "./components/Segmented/Segmented.js";
 export {
   Alert,
   Avatar,
@@ -42,6 +44,7 @@ export {
   ConfigProvider,
   DatePicker,
   Dropdown,
+  Empty,
   Form,
   Input,
   InputNumber,
@@ -50,6 +53,7 @@ export {
   Popover,
   Progress,
   Radio,
+  Segmented,
   Select,
   Switch,
   Tabs,

package/dist/themes/baseTokens/baseTypographyTokens/baseTypographyTokens.d.ts

@@ -1,21 +1,25 @@
 export declare const baseTypographyTokens: {
     readonly header1: {
         readonly fontFamily: "Roboto";
+        readonly fontWeight: 500;
         readonly fontSize: 24;
         readonly lineHeight: "32px";
     };
     readonly header2: {
         readonly fontFamily: "Roboto";
+        readonly fontWeight: 500;
         readonly fontSize: 16;
         readonly lineHeight: "24px";
     };
     readonly subheader1: {
         readonly fontFamily: "Roboto";
+        readonly fontWeight: 500;
         readonly fontSize: 14;
         readonly lineHeight: "20px";
     };
     readonly subheader2: {
         readonly fontFamily: "Roboto";
+        readonly fontWeight: 500;
         readonly fontSize: 12;
         readonly lineHeight: "20px";
     };

package/dist/themes/baseTokens/baseTypographyTokens/baseTypographyTokens.js

@@ -5,21 +5,25 @@ const fonts = {
 const baseTypographyTokens = {
   header1: {
     fontFamily: fonts.mainFontFamily,
+    fontWeight: 500,
     fontSize: 24,
     lineHeight: "32px"
   },
   header2: {
     fontFamily: fonts.mainFontFamily,
+    fontWeight: 500,
     fontSize: 16,
     lineHeight: "24px"
   },
   subheader1: {
     fontFamily: fonts.mainFontFamily,
+    fontWeight: 500,
     fontSize: 14,
     lineHeight: "20px"
   },
   subheader2: {
     fontFamily: fonts.mainFontFamily,
+    fontWeight: 500,
     fontSize: 12,
     lineHeight: "20px"
   },

package/dist/themes/themes.d.ts

@@ -139,21 +139,25 @@ export declare const themeMap: Map<"light", {
     typography: {
         readonly header1: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 24;
             readonly lineHeight: "32px";
         };
         readonly header2: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 16;
             readonly lineHeight: "24px";
         };
         readonly subheader1: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 14;
             readonly lineHeight: "20px";
         };
         readonly subheader2: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 12;
             readonly lineHeight: "20px";
         };

package/dist/themes/themes.utils.d.ts

@@ -140,21 +140,25 @@ export declare const getTheme: (themeName: ThemeNames) => {
     typography: {
         readonly header1: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 24;
             readonly lineHeight: "32px";
         };
         readonly header2: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 16;
             readonly lineHeight: "24px";
         };
         readonly subheader1: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 14;
             readonly lineHeight: "20px";
         };
         readonly subheader2: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 12;
             readonly lineHeight: "20px";
         };
@@ -501,21 +505,25 @@ export declare const lightTheme: {
     typography: {
         readonly header1: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 24;
             readonly lineHeight: "32px";
         };
         readonly header2: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 16;
             readonly lineHeight: "24px";
         };
         readonly subheader1: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 14;
             readonly lineHeight: "20px";
         };
         readonly subheader2: {
             readonly fontFamily: "Roboto";
+            readonly fontWeight: 500;
             readonly fontSize: 12;
             readonly lineHeight: "20px";
         };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@infomaximum/ui-kit",
   "license": "Apache-2.0",
-  "version": "0.13.5",
+  "version": "0.14.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",