@itcase/ui 1.1.8 → 1.1.10

package/dist/cjs/components/Pagination.js

@@ -1,371 +1,32 @@
 'use strict';
 
-var React = require('react');
-var PropTypes = require('prop-types');
-var clsx = require('clsx');
-var ceil = require('lodash/ceil');
-var ReactPaginate = require('react-paginate');
-var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
-var DropdownItem = require('../DropdownItem-Bl-Ghc_6.js');
-var Icon = require('../Icon-UBahY607.js');
-var Text = require('../Text-D7Aq1i5R.js');
+var Pagination = require('../Pagination-D8EHefOz.js');
+require('../jsx-runtime-BBxmckJR.js');
+require('react');
+require('clsx');
+require('lodash/ceil');
+require('react-paginate');
+require('../hooks/useDeviceTargetClass.js');
 require('lodash/castArray');
 require('lodash/camelCase');
 require('../context/UIContext.js');
+require('prop-types');
 require('../hooks/useMediaQueries.js');
 require('react-responsive');
+require('../DropdownItem-BVxf7bPs.js');
 require('../hooks/useStyles.js');
 require('lodash/maxBy');
 require('lodash/upperFirst');
 require('../hooks/styleAttributes.js');
-require('../Divider-CIYsHYud.js');
-require('../jsx-runtime-BCmQOGxJ.js');
-require('../Link-BoShjCEw.js');
-require('../constants/componentProps/fill.js');
-require('../constants/componentProps/shape.js');
-require('../constants/componentProps/type.js');
-require('../constants/componentProps/underline.js');
-require('../constants/componentProps/size.js');
+require('../Divider-doetVRw0.js');
+require('../Link-3qPujNn9.js');
+require('../_tslib-CKiUdo7p.js');
+require('../Text-CgYNdSwY.js');
+require('../Icon-D1v73UhR.js');
 require('react-inlinesvg');
-require('./Tooltip.js');
-require('./Title.js');
-require('../constants/componentProps/textAlign.js');
-require('../constants/componentProps/textColor.js');
-require('../constants/componentProps/textGradient.js');
-require('../constants/componentProps/textStyle.js');
-require('../constants/componentProps/textWeight.js');
-require('../constants/componentProps/titleSize.js');
-require('../constants/componentProps/wrap.js');
-require('../constants/componentProps/textSize.js');
+require('../Tooltip-DasmzIDY.js');
+require('../Title-C3lN-EvU.js');
 
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React__default = /*#__PURE__*/_interopDefault(React);
-var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
-var clsx__default = /*#__PURE__*/_interopDefault(clsx);
-var ceil__default = /*#__PURE__*/_interopDefault(ceil);
-var ReactPaginate__default = /*#__PURE__*/_interopDefault(ReactPaginate);
 
-function Pagination(props) {
-  const {
-    pageNumber,
-    perPageCount,
-    allItemsCount,
-    className,
-    forcePage,
-    pageCount,
-    marginPagesDisplayed,
-    pageRangeDisplayed,
-    previousLabel,
-    nextLabel,
-    isPageCount,
-    pageCountArray,
-    pageCountDesc,
-    pageCountDescTextColor,
-    pageCountDescTextSize,
-    pageCountInput,
-    pageCountInputTextColor,
-    pageCountInputTextSize,
-    pageCountInputIcon,
-    pageCountInputIconFill,
-    pageCountInputIconFillSize,
-    pageCountInputIconColor,
-    pageCountDropdownAlignment,
-    pageCountDropdownElevation,
-    pageCountDropdownFill,
-    pageCountDropdownSet,
-    pageCountDropdownShape,
-    pageCountDropdownItemDividerDirection,
-    pageCountDropdownItemDividerFill,
-    pageCountDropdownItemDividerSize,
-    pageCountDropdownItemShowDivider,
-    onPerPageCountChange,
-    pageCountDropdownItemFill,
-    pageCountDropdownItemFillActive,
-    pageCountDropdownItemFillActiveHover,
-    pageCountDropdownItemFillHover,
-    pageCountDropdownItemLabel,
-    pageCountDropdownItemLabelColor,
-    pageCountDropdownItemLabelColorActive,
-    pageCountDropdownItemLabelSize,
-    pageCountDropdownItemLabelWrap,
-    pageCountDropdownItemSet,
-    isPageCountDropdownReversed,
-    onPageChange
-  } = props;
-  const [isOpenDropdown, setIsOpenDropdown] = React.useState(false);
-  const [showPagination, setShowPagination] = React.useState(true);
-  const [activeDropdownItem, setActiveDropdownItem] = React.useState(10);
-  // Toggle command menu
-  const onClickCommandMenuButton = React.useCallback(event => {
-    setIsOpenDropdown(state => !state);
-  }, []);
-  const handleDropdownItemClick = React.useCallback(item => {
-    onPerPageCountChange(item);
-    setActiveDropdownItem(item);
-    setIsOpenDropdown(false);
-  }, [onPerPageCountChange]);
-  const justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'pagination_justify-content_',
-    propsKey: 'justifyContent'
-  });
-  const gapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
-    prefix: 'gap_',
-    propsKey: 'gap'
-  });
-
-  // Calculate count of pages for all items
-  const paginationPagesCount = React.useMemo(() => {
-    if (allItemsCount && allItemsCount > 0) {
-      // Round up. "perPageCount" may be is a query params "limit"
-      return ceil__default.default(allItemsCount / perPageCount);
-    }
-    return 0;
-  }, [allItemsCount, perPageCount]);
-
-  // Index for pagination state
-  const paginationPageIndex = React.useMemo(() => {
-    const intPageNumber = parseInt(pageNumber);
-    // For pagination need index of page, not number
-    if (!isNaN(intPageNumber) && intPageNumber > 1) {
-      return intPageNumber - 1;
-    }
-    return 0;
-  }, [pageNumber]);
-  React.useEffect(() => {
-    if (paginationPagesCount <= 1) {
-      setShowPagination(false);
-      return;
-    }
-    setShowPagination(true);
-  }, [paginationPagesCount]);
-  return /*#__PURE__*/React__default.default.createElement("div", {
-    className: "pagination"
-  }, showPagination && /*#__PURE__*/React__default.default.createElement(ReactPaginate__default.default, {
-    activeClassName: "pagination__item_state_active cursor_type_default",
-    breakClassName: "pagination__item pagination__item_break",
-    disabledClassName: "pagination__item_state_disabled cursor_type_default",
-    disabledLinkClassName: "pagination__item_state_disabled",
-    marginPagesDisplayed: marginPagesDisplayed,
-    nextClassName: "pagination__item pagination__item_next",
-    pageCount: paginationPagesCount,
-    pageLinkClassName: "pagination__item-link",
-    pageRangeDisplayed: pageRangeDisplayed,
-    previousClassName: "pagination__item pagination__item_previous",
-    onPageChange: onPageChange,
-    activeLinkClassName: "pagination__item-link_state_active"
-    // previous button
-    ,
-    previousLabel: previousLabel,
-    breakLinkClassName: "pagination__item-link"
-    // pages settings
-    ,
-    forcePage: paginationPageIndex,
-    containerClassName: clsx__default.default(className, 'pagination__container', justifyContentClass)
-    // page item
-    ,
-    pageClassName: "pagination__item",
-    nextLinkClassName: "pagination__item-link"
-    // break element
-    ,
-    breakLabel: "...",
-    previousLinkClassName: "pagination__item-link"
-    // next button
-    ,
-    nextLabel: nextLabel
-  }), isPageCount && /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'pagination__count', gapClass)
-  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
-    size: pageCountDescTextSize,
-    textColor: pageCountDescTextColor
-  }, pageCountDesc), /*#__PURE__*/React__default.default.createElement("div", {
-    className: "pagination__input",
-    onClick: onClickCommandMenuButton
-  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
-    size: pageCountInputTextSize,
-    textColor: pageCountInputTextColor
-  }, activeDropdownItem), /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
-    fill: pageCountInputIconFill,
-    fillSize: pageCountInputIconFillSize,
-    iconFill: pageCountInputIconColor,
-    SvgImage: pageCountInputIcon
-  }), /*#__PURE__*/React__default.default.createElement(DropdownItem.Dropdown, {
-    alignment: pageCountDropdownAlignment,
-    elevation: pageCountDropdownElevation,
-    fill: pageCountDropdownFill,
-    isOpen: isOpenDropdown,
-    set: pageCountDropdownSet,
-    setIsOpen: setIsOpenDropdown,
-    shape: pageCountDropdownShape
-  }, (isPageCountDropdownReversed ? pageCountArray.reverse() : pageCountArray).map((item, index) => activeDropdownItem === item ? /*#__PURE__*/React__default.default.createElement(DropdownItem.DropdownItem, {
-    dividerDirection: pageCountDropdownItemDividerDirection,
-    dividerFill: pageCountDropdownItemDividerFill,
-    dividerSize: pageCountDropdownItemDividerSize,
-    fill: pageCountDropdownItemFill,
-    fillActive: pageCountDropdownItemFillActive,
-    fillActiveHover: pageCountDropdownItemFillActiveHover,
-    fillHover: pageCountDropdownItemFillHover,
-    isActive: true,
-    key: item,
-    label: item,
-    labelTextColor: pageCountDropdownItemLabelColor,
-    labelTextColorActive: pageCountDropdownItemLabelColorActive,
-    labelTextSize: pageCountDropdownItemLabelSize,
-    labelTextWrap: pageCountDropdownItemLabelWrap,
-    set: pageCountDropdownItemSet,
-    showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider,
-    onClick: () => handleDropdownItemClick(item)
-  }) : /*#__PURE__*/React__default.default.createElement(DropdownItem.DropdownItem, {
-    dividerDirection: pageCountDropdownItemDividerDirection,
-    dividerFill: pageCountDropdownItemDividerFill,
-    dividerSize: pageCountDropdownItemDividerSize,
-    fill: pageCountDropdownItemFill,
-    fillHover: pageCountDropdownItemFillHover,
-    isActive: false,
-    key: item,
-    label: item,
-    labelTextColor: pageCountDropdownItemLabelColor,
-    labelTextColorActive: pageCountDropdownItemLabelColorActive,
-    labelTextSize: pageCountDropdownItemLabelSize,
-    labelTextWrap: pageCountDropdownItemLabelWrap,
-    set: pageCountDropdownItemSet,
-    showDivider: index < pageCountArray.length - 1 && pageCountDropdownItemShowDivider,
-    onClick: () => handleDropdownItemClick(item)
-  }))))));
-}
-Pagination.propTypes = {
-  /**
-   *Количество всех элементов
-   */
-  allItemsCount: PropTypes__default.default.number,
-  isPageCountDropdownReversed: PropTypes__default.default.bool,
-  /**
-   * Количество страниц, отображаемых после троеточия
-   */
-  marginPagesDisplayed: PropTypes__default.default.number,
-  /**
-   *Кнопка навигации вперед
-   */
-  nextLabel: PropTypes__default.default.element,
-  pageCountArray: PropTypes__default.default.array,
-  pageCountDropdownItemLabelColorActive: PropTypes__default.default.string,
-  /**
-   * Количество страниц, отображаемых до троеточия
-   */
-  pageRangeDisplayed: PropTypes__default.default.number,
-  /**
-   * Количество элементов, отображаемых на станице
-   */
-  perPageCount: PropTypes__default.default.number,
-  /**
-   * Кнопка навигации назад
-   */
-  previousLabel: PropTypes__default.default.element
-};
-Pagination.defaultProps = {
-  pageNumber: 0,
-  perPageCount: 0,
-  allItemsCount: 0,
-  pageCountArray: [10, 20, 50, 100],
-  isPageCountDropdownReversed: false,
-  pageCountDropdownItemLabelColorActive: ''
-};
-Pagination.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Pagination",
-  "props": {
-    "pageNumber": {
-      "defaultValue": {
-        "value": "0",
-        "computed": false
-      },
-      "required": false
-    },
-    "perPageCount": {
-      "defaultValue": {
-        "value": "0",
-        "computed": false
-      },
-      "description": "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432, \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0435\u043C\u044B\u0445 \u043D\u0430 \u0441\u0442\u0430\u043D\u0438\u0446\u0435",
-      "type": {
-        "name": "number"
-      },
-      "required": false
-    },
-    "allItemsCount": {
-      "defaultValue": {
-        "value": "0",
-        "computed": false
-      },
-      "description": "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0432\u0441\u0435\u0445 \u044D\u043B\u0435\u043C\u0435\u043D\u0442\u043E\u0432",
-      "type": {
-        "name": "number"
-      },
-      "required": false
-    },
-    "pageCountArray": {
-      "defaultValue": {
-        "value": "[10, 20, 50, 100]",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "array"
-      },
-      "required": false
-    },
-    "isPageCountDropdownReversed": {
-      "defaultValue": {
-        "value": "false",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "pageCountDropdownItemLabelColorActive": {
-      "defaultValue": {
-        "value": "''",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "marginPagesDisplayed": {
-      "description": "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446, \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0435\u043C\u044B\u0445 \u043F\u043E\u0441\u043B\u0435 \u0442\u0440\u043E\u0435\u0442\u043E\u0447\u0438\u044F",
-      "type": {
-        "name": "number"
-      },
-      "required": false
-    },
-    "nextLabel": {
-      "description": "\u041A\u043D\u043E\u043F\u043A\u0430 \u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u0432\u043F\u0435\u0440\u0435\u0434",
-      "type": {
-        "name": "element"
-      },
-      "required": false
-    },
-    "pageRangeDisplayed": {
-      "description": "\u041A\u043E\u043B\u0438\u0447\u0435\u0441\u0442\u0432\u043E \u0441\u0442\u0440\u0430\u043D\u0438\u0446, \u043E\u0442\u043E\u0431\u0440\u0430\u0436\u0430\u0435\u043C\u044B\u0445 \u0434\u043E \u0442\u0440\u043E\u0435\u0442\u043E\u0447\u0438\u044F",
-      "type": {
-        "name": "number"
-      },
-      "required": false
-    },
-    "previousLabel": {
-      "description": "\u041A\u043D\u043E\u043F\u043A\u0430 \u043D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043D\u0430\u0437\u0430\u0434",
-      "type": {
-        "name": "element"
-      },
-      "required": false
-    }
-  }
-};
-
-exports.Pagination = Pagination;
+exports.Pagination = Pagination.Pagination;

package/dist/cjs/components/Panel/Panel.d.ts

@@ -0,0 +1,7 @@
+import { IPanelConfig, IPanelProps } from './Panel.interface';
+declare const panelConfig: IPanelConfig;
+declare function Panel(props: IPanelProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Panel {
+    var defaultProps: {};
+}
+export { Panel, panelConfig };

package/dist/cjs/components/Panel/Panel.interface.d.ts

@@ -0,0 +1,56 @@
+import { CSSProperties, ReactNode } from 'react';
+import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
+import { alignDirectionPropsType, borderColorPropsType, borderTypePropsType, borderWidthPropsType, elevationPropsType, fillHoverPropsType, fillPropsType, flexAlignPropsType, flexJustifyContentPropsType, flexWrapPropsType, heightPropsType, positionPropsType, shapePropsType, textColorPropsType, textSizePropsType, textWeightPropsType, widthPropsType } from '../../types';
+import { appearanceKeysDefaultType } from '../../types/componentProps/appearanceKeys';
+interface ThemeColor {
+    border?: string;
+    borderColor?: string;
+    borderWidth?: string;
+    direction?: alignDirectionPropsType;
+    fill?: string;
+    fillHover?: string;
+    labelTextColor?: textColorPropsType;
+}
+type appearanceKeysType = appearanceKeysDefaultType & {};
+type appearanceType = {
+    [key in appearanceKeysType]: ThemeColor;
+};
+export interface IPanelConfig {
+    appearance: appearanceType | undefined;
+    setAppearance: (newComponent: appearanceType) => void;
+}
+export interface IPanelProps extends TypeStyleAttributes {
+    appearance?: appearanceKeysType;
+    children?: ReactNode;
+    className?: string;
+    dataTour?: string;
+    horizontalScroll?: boolean;
+    htmlFor?: string;
+    set?: string;
+    style?: CSSProperties;
+    verticalScroll?: boolean;
+    alignContent?: flexJustifyContentPropsType;
+    alignItems?: flexAlignPropsType;
+    borderColor?: borderColorPropsType;
+    borderType?: borderTypePropsType;
+    borderWidth?: borderWidthPropsType;
+    direction?: alignDirectionPropsType;
+    elevation?: elevationPropsType;
+    fill?: fillPropsType;
+    fillHover?: fillHoverPropsType;
+    height?: heightPropsType;
+    justifyContent?: flexJustifyContentPropsType;
+    position?: positionPropsType;
+    shape?: shapePropsType;
+    width?: widthPropsType;
+    wrap?: flexWrapPropsType;
+    desc?: string;
+    descTextColor?: textColorPropsType;
+    descTextSize?: textSizePropsType;
+    descTextWeight?: textWeightPropsType;
+    title?: string;
+    titleTextColor?: textColorPropsType;
+    titleTextSize?: textSizePropsType;
+    titleTextWeight?: textWeightPropsType;
+}
+export {};

package/dist/cjs/components/Panel/index.d.ts

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

package/dist/cjs/components/Panel.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var jsxRuntime = require('../jsx-runtime-BBxmckJR.js');
+var React = require('react');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../hooks/useStyles.js');
+var Group = require('../Group-C9BxTKs-.js');
+var Text = require('../Text-CgYNdSwY.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('prop-types');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var panelConfig = {
+    appearance: undefined,
+    setAppearance: function (newComponent) {
+        panelConfig.appearance = newComponent;
+    },
+};
+function Panel(props) {
+    var appearance = props.appearance, children = props.children, className = props.className, horizontalScroll = props.horizontalScroll, htmlFor = props.htmlFor, set = props.set, dataTour = props.dataTour, title = props.title, titleTextSize = props.titleTextSize, titleTextColor = props.titleTextColor, titleTextWeight = props.titleTextWeight, desc = props.desc, descTextSize = props.descTextSize, descTextColor = props.descTextColor, descTextWeight = props.descTextWeight, verticalScroll = props.verticalScroll;
+    var alignContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'panel_align-content_',
+        propsKey: 'alignContent',
+    });
+    var alignItemsClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'panel_align-items_',
+        propsKey: 'alignItems',
+    });
+    var justifyContentClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'panel_justify-content_',
+        propsKey: 'justifyContent',
+    });
+    var directionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'panel_direction_',
+        propsKey: 'direction',
+    });
+    var wrapClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'flex_wrap_',
+        propsKey: 'wrap',
+    });
+    var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_',
+        propsKey: 'fill',
+    });
+    var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'fill_hover_',
+        propsKey: 'fillHover',
+    });
+    var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'panel_shape_',
+        propsKey: 'shape',
+    });
+    var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'width_',
+        propsKey: 'width',
+    });
+    var heightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'height_',
+        propsKey: 'height',
+    });
+    var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-color_',
+        propsKey: 'borderColor',
+    });
+    var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border-width_',
+        propsKey: 'borderWidth',
+    });
+    var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'border_type_',
+        propsKey: 'borderType',
+    });
+    var elevationClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'elevation_',
+        propsKey: 'elevation',
+    });
+    var positionClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+        prefix: 'position_',
+        propsKey: 'position',
+    });
+    // @ts-expect-error
+    var _a = useStyles.useStyles(props), panelStyles = _a.styles, panelWrapperStyles = _a.wrapper;
+    var appearanceConfig = React.useMemo(function () { return appearance && panelConfig.appearance && panelConfig.appearance[appearance]; }, [appearance, panelConfig]);
+    return (jsxRuntime.jsxRuntimeExports.jsxs(Group.Group, { className: clsx__default.default(className, 'panel', widthClass, heightClass, fillClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fill) &&
+                "fill_".concat(appearanceConfig.fill).replace(/([A-Z])/g, '-$1').toLowerCase()), fillHoverClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.fillHover) &&
+                "fill_hover_".concat(appearanceConfig.fillHover).replace(/([A-Z])/g, '-$1').toLowerCase()), set && "panel_set_".concat(set), wrapClass, shapeClass, borderColorClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderColor) &&
+                "border-color_".concat(appearanceConfig.borderColor)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderWidthClass ||
+            ((appearanceConfig === null || appearanceConfig === void 0 ? void 0 : appearanceConfig.borderWidth) &&
+                "border-width_".concat(appearanceConfig.borderWidth)
+                    .replace(/([A-Z])/g, '-$1')
+                    .toLowerCase()), borderTypeClass, alignContentClass, alignItemsClass, elevationClass, justifyContentClass, positionClass, horizontalScroll && 'panel_type_scroll_horizontal', verticalScroll && 'panel_type_scroll_vertical'), "data-tour": dataTour, htmlFor: htmlFor, style: panelStyles, children: [title && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: "panel__header", children: jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "panel__title", size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }) })), jsxRuntime.jsxRuntimeExports.jsx("div", { className: clsx__default.default('panel__wrapper', directionClass), style: panelWrapperStyles, children: children }), desc && (jsxRuntime.jsxRuntimeExports.jsx("div", { className: "panel__footer", children: jsxRuntime.jsxRuntimeExports.jsx(Text.Text, { className: "panel__desc", size: descTextSize, textColor: descTextColor, textWeight: descTextWeight, children: desc }) }))] }));
+}
+Panel.defaultProps = {};
+
+exports.Panel = Panel;
+exports.panelConfig = panelConfig;

package/dist/cjs/components/Radio/Radio.d.ts

@@ -0,0 +1,10 @@
+import { IRadioConfig, IRadioProps } from './Radio.interface';
+declare const radioConfig: IRadioConfig;
+declare function Radio(props: IRadioProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Radio {
+    var defaultProps: {
+        shape: string;
+        tag: string;
+    };
+}
+export { Radio, radioConfig };

package/dist/cjs/components/Radio/Radio.interface.d.ts

@@ -0,0 +1,53 @@
+import { ElementType } from 'react';
+import { TypeStyleAttributes } from '../../hooks/styleAttributes.interface';
+import { borderColorHoverPropsType, borderColorPropsType, borderWidthPropsType, fillPropsType, itemColorPropsType, shapePropsType, textColorPropsType, textSizePropsType, textWeightPropsType } from '../../types';
+import { appearanceKeysDefaultType } from '../../types/componentProps/appearanceKeys';
+export interface IRadioThemeColor {
+    descTextColor?: textColorPropsType;
+    descTextSize?: textSizePropsType;
+    descTextWeight?: textWeightPropsType;
+    fill?: fillPropsType;
+    labelTextColor?: textColorPropsType;
+    labelTextSize?: textSizePropsType;
+    labelTextWeight?: textWeightPropsType;
+    shape?: shapePropsType;
+    stateBorderColor?: borderColorPropsType;
+    stateBorderColorChecked?: borderColorPropsType;
+    stateBorderColorDisabled?: borderColorPropsType;
+    stateBorderColorDisabledChecked?: borderColorPropsType;
+    stateBorderColorHover?: borderColorHoverPropsType;
+    stateBorderColorHoverChecked?: borderColorHoverPropsType;
+    stateBorderWidth?: borderWidthPropsType;
+    stateCheckmarkFill?: itemColorPropsType;
+    stateCheckmarkFillDisabled?: itemColorPropsType;
+    stateFill?: fillPropsType;
+    stateFillChecked?: fillPropsType;
+    stateFillDisabled?: fillPropsType;
+    stateFillDisabledChecked?: fillPropsType;
+    stateShape?: shapePropsType;
+}
+type appearanceKeysType = appearanceKeysDefaultType & {};
+export type radioStateType = {
+    [key in appearanceKeysType]?: IRadioThemeColor;
+};
+export type radioAppearanceType = {
+    [key in appearanceKeysType]?: IRadioThemeColor;
+};
+export interface IRadioConfig {
+    state: radioStateType | undefined;
+    setState: (newComponent: radioStateType) => void;
+    appearance: radioAppearanceType | undefined;
+    setAppearance: (newComponent: radioAppearanceType) => void;
+}
+export interface IRadioProps extends IRadioThemeColor, TypeStyleAttributes {
+    appearance?: appearanceKeysType;
+    checked?: boolean;
+    className?: string;
+    desc?: string;
+    disabled?: boolean;
+    id?: number | string;
+    label?: string;
+    tag: ElementType;
+    onChange?: () => void;
+}
+export {};

package/dist/cjs/components/Radio/index.d.ts

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