mosuk-ui 1.0.5 → 1.0.7

package/components/actions/button/component/component.module.css

@@ -21,8 +21,8 @@
             padding-left: calc(var(--spacing, .25rem) * 4);
             padding-right: calc(var(--spacing, .25rem) * 4);
 
-            border-radius: calc(infinity * 1px);
             border: none;
+            border-radius: calc(infinity * 1px);
             outline: none;
 
             user-select: none;
@@ -36,28 +36,9 @@
                 min-width: calc(var(--spacing, .25rem) * 3.5);
                 min-height: calc(var(--spacing, .25rem) * 3.5);
 
-                color: var(--color-gray-500, oklch(0.551 0.027 264.364));
-
                 transition: all 200ms ease-in-out;
             }
 
-            &:hover {
-                background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
-                color: var(--color-primary-500, #0074e7);
-
-                svg {
-                    color: var(--color-primary-500, #0074e7);
-                }
-            }
-
-            &:not(:hover) {
-                transition: all 600ms ease-in-out;
-
-                svg {
-                    transition: all 600ms ease-in-out;
-                }
-            }
-
             &:disabled {
                 opacity: 0.5;
                 cursor: not-allowed;

package/components/actions/button/skeleton/component.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import classNames from 'classnames';
 import React from 'react';
 import { Skeleton } from '../../../display/skeleton/component/component';
-import styles from './component.module.css';
+import styles from './../component/component.module.css';
 export function ButtonSkeleton(_a) {
     var rest = __rest(_a, []);
     return (React.createElement(Skeleton, __assign({}, rest, { className: classNames('mosuk-button-skeleton', styles.button, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));

package/components/actions/icon/component/component.module.css

@@ -14,6 +14,8 @@
             color: var(--color-gray-500, oklch(0.551 0.027 264.364));
 
             padding: calc(var(--spacing, .25rem) * 2.25);
+
+            border: none;
             border-radius: calc(infinity * 1px);
             outline: none;
 
@@ -29,31 +31,11 @@
             svg {
                 width: 100%;
                 height: 100%;
-
-                color: var(--color-gray-500, oklch(0.551 0.027 264.364));
-
                 outline: none;
 
                 transition: all 0.2s ease-in-out;
             }
 
-            &:hover {
-                background-color: var(--color-gray-100, oklch(0.967 0.003 264.542));
-                color: var(--color-primary-500, #0074e7);
-
-                svg {
-                    color: var(--color-primary-500, #0074e7);
-                }
-            }
-
-            &:not(:hover) {
-                transition: all 600ms ease-in-out;
-
-                svg {
-                    transition: all 600ms ease-in-out;
-                }
-            }
-
             &:disabled {
                 opacity: 0.5;
                 cursor: not-allowed;

package/components/actions/icon/skeleton/component.js

@@ -23,7 +23,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 import classNames from 'classnames';
 import React from 'react';
 import { Skeleton } from '../../../display/skeleton/component/component';
-import styles from './component.module.css';
+import styles from './../component/component.module.css';
 export function IconSkeleton(_a) {
     var rest = __rest(_a, []);
     return (React.createElement(Skeleton, __assign({}, rest, { className: classNames('mosuk-icon-skeleton', styles.icon, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));

package/components/actions/input/(search)/component/component.js

@@ -51,5 +51,5 @@ export function InputSearch(_a) {
             }
         }, 500);
     };
-    return (React.createElement(Input, __assign({}, rest, { placeholder: (_b = rest === null || rest === void 0 ? void 0 : rest.placeholder) !== null && _b !== void 0 ? _b : 'Поиск...', value: searchValue, onChange: handleInputChange })));
+    return (React.createElement(Input, __assign({}, rest, { placeholder: (_b = rest === null || rest === void 0 ? void 0 : rest.placeholder) !== null && _b !== void 0 ? _b : 'Поиск', value: searchValue, onChange: handleInputChange })));
 }

package/components/actions/input/component/component.module.css

@@ -4,22 +4,13 @@
             appearance: none;
 
             width: 100%;
-            height: calc(var(--spacing, 0.25rem) * 8);
 
             display: block;
 
-            background-color: white;
             color: var(--color-black, #000);
-
             font-size: var(--text-base, 1rem);
-            text-wrap: nowrap;
-
-            padding-left: calc(var(--spacing, 0.25rem) * 3.5);
-            padding-right: calc(var(--spacing, 0.25rem) * 3.5);
-
-            border-radius: calc(infinity * 1px);
-            border: 1px solid var(--color-gray-200, oklch(0.928 0.006 264.531));
 
+            border: 1px solid transparent;
             outline: none;
 
             transition: all 200ms ease-in-out;
@@ -28,23 +19,10 @@
                 color: var(--color-gray-500, oklch(0.551 0.027 264.364));
             }
 
-            &:hover {
-                border: 1px solid var(--color-primary-200, oklch(0.928 0.006 264.531));
-            }
-
-            &:not(:hover) {
-                transition: all 600ms ease-in-out;
-            }
-
             &:read-only {
                 opacity: 50%;
                 pointer-events: none;
             }
-
-            &:focus {
-                border: 1px solid var(--color-primary-500, oklch(0.551 0.027 264.364));
-            }
-
         }
     }
 }

package/components/actions/textarea/(autosize)/component/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TextareaAutosizeProps } from './component.interface';
+export declare function TextareaAutosize({ ...rest }: TextareaAutosizeProps): React.JSX.Element;

package/components/actions/textarea/(autosize)/component/component.interface.d.ts

@@ -0,0 +1 @@
+export type { TextareaAutosizeProps } from 'react-textarea-autosize';

package/components/{display/image/skeleton → actions/textarea/(autosize)/component}/component.js

@@ -22,9 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React from 'react';
-import { Skeleton } from '../../skeleton/component/component';
+import TextareaAutosizePrimitive from 'react-textarea-autosize';
+import { Textarea } from '../../component/component';
 import styles from './component.module.css';
-export function ImageSkeleton(_a) {
+export function TextareaAutosize(_a) {
     var rest = __rest(_a, []);
-    return (React.createElement(Skeleton, __assign({}, rest, { className: classNames('mosuk-image', styles.image, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    return (React.createElement(Textarea, __assign({}, rest, { as: TextareaAutosizePrimitive, className: classNames(styles.textarea, rest === null || rest === void 0 ? void 0 : rest.className) })));
 }

package/components/actions/textarea/(autosize)/component/component.module.css

@@ -0,0 +1,11 @@
+@layer mosuk-ui {
+    @layer index-21 {
+        .textarea {
+            transition: all 0ms ease-in-out;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+}

package/components/actions/textarea/(autosize)/component/index.d.ts

@@ -0,0 +1,6 @@
+import { TextareaAutosize as Component } from './component';
+import { TextareaAutosizeProps as ComponentProps } from './component.interface';
+export declare const TextareaAutosize: typeof Component;
+export declare namespace TextareaAutosize {
+    type Props = ComponentProps;
+}

package/components/actions/textarea/(autosize)/component/index.js

@@ -0,0 +1,2 @@
+import { TextareaAutosize as Component } from './component';
+export var TextareaAutosize = Object.assign(Component, {});

package/components/actions/textarea/component/component.d.ts

@@ -1,3 +1,3 @@
 import React, { ElementType } from 'react';
 import { TextareaProps } from './component.interface';
-export declare function Textarea<C extends ElementType = 'textarea'>({ as, autosize, ...rest }: TextareaProps<C>): React.JSX.Element;
+export declare function Textarea<C extends ElementType = 'textarea'>({ as, ...rest }: TextareaProps<C>): React.JSX.Element;

package/components/actions/textarea/component/component.interface.d.ts

@@ -2,5 +2,4 @@ import { ComponentPropsWithoutRef, ElementType, Ref } from 'react';
 export type TextareaProps<C extends ElementType = 'textarea'> = {
     as?: C;
     ref?: Ref<any>;
-    autosize?: boolean;
 } & Omit<ComponentPropsWithoutRef<C>, 'as' | 'ref'>;

package/components/actions/textarea/component/component.js

@@ -21,73 +21,13 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import classNames from 'classnames';
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useId } from 'react';
 import styles from './component.module.css';
 export function Textarea(_a) {
     var _b, _c;
-    var as = _a.as, _d = _a.autosize, autosize = _d === void 0 ? true : _d, rest = __rest(_a, ["as", "autosize"]);
+    var as = _a.as, rest = __rest(_a, ["as"]);
     var Component = (as || 'textarea');
-    var isNativeTextarea = !as || as === 'textarea';
-    var shouldAutosize = autosize && isNativeTextarea;
-    var textareaRef = useRef(null);
-    var _e = rest, onChange = _e.onChange, style = _e.style, propRef = _e.ref, restProps = __rest(_e, ["onChange", "style", "ref"]);
-    var resize = useCallback(function (el) {
-        if (!el)
-            return;
-        // Проверяем, виден ли элемент
-        var isVisible = el.offsetParent !== null;
-        if (!isVisible)
-            return;
-        el.style.transition = 'none';
-        // Используем 1px вместо auto - не вызывает скролл страницы
-        el.style.height = '1px';
-        el.style.height = "".concat(el.scrollHeight, "px");
-        // Восстанавливаем transition в следующем фрейме
-        requestAnimationFrame(function () {
-            if (el.style.transition) {
-                el.style.transition = '';
-            }
-        });
-    }, []);
-    var setRefs = useCallback(function (node) {
-        textareaRef.current = node instanceof HTMLTextAreaElement ? node : null;
-        if (propRef) {
-            if (typeof propRef === 'function') {
-                propRef(node);
-            }
-            else {
-                propRef.current = node;
-            }
-        }
-    }, [propRef]);
-    // Перерасчет при изменении value или defaultValue
-    useEffect(function () {
-        if (shouldAutosize && textareaRef.current) {
-            resize(textareaRef.current);
-        }
-    }, [shouldAutosize, resize, restProps === null || restProps === void 0 ? void 0 : restProps.value, restProps === null || restProps === void 0 ? void 0 : restProps.defaultValue]);
-    // Отслеживаем появление элемента в DOM (для tabs с keepMounted)
-    useEffect(function () {
-        if (!shouldAutosize || !textareaRef.current)
-            return;
-        var observer = new IntersectionObserver(function (entries) {
-            entries.forEach(function (entry) {
-                if (entry.isIntersecting && textareaRef.current) {
-                    // Элемент стал видимым - пересчитываем высоту
-                    resize(textareaRef.current);
-                }
-            });
-        }, { threshold: 0.01 });
-        observer.observe(textareaRef.current);
-        return function () {
-            observer.disconnect();
-        };
-    }, [shouldAutosize, resize]);
-    var handleChange = useCallback(function (e) {
-        if (shouldAutosize && (e === null || e === void 0 ? void 0 : e.currentTarget) instanceof HTMLTextAreaElement) {
-            resize(e.currentTarget);
-        }
-        onChange === null || onChange === void 0 ? void 0 : onChange(e);
-    }, [onChange, shouldAutosize, resize]);
-    return (React.createElement(Component, __assign({}, restProps, { ref: setRefs, id: restProps.id, name: (_b = restProps.name) !== null && _b !== void 0 ? _b : restProps.id, rows: (_c = restProps === null || restProps === void 0 ? void 0 : restProps.rows) !== null && _c !== void 0 ? _c : 3, onChange: handleChange, style: shouldAutosize ? __assign(__assign({}, style), { overflowY: 'hidden' }) : style, className: classNames('mosuk-textarea', styles.textarea, restProps === null || restProps === void 0 ? void 0 : restProps.className) }), restProps === null || restProps === void 0 ? void 0 : restProps.children));
+    var id = (_b = rest === null || rest === void 0 ? void 0 : rest.id) !== null && _b !== void 0 ? _b : useId();
+    var name = (_c = rest === null || rest === void 0 ? void 0 : rest.name) !== null && _c !== void 0 ? _c : id;
+    return (React.createElement(Component, __assign({}, rest, { ref: rest === null || rest === void 0 ? void 0 : rest.ref, id: id, name: name, className: classNames('mosuk-textarea', styles.textarea, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/actions/textarea/component/component.module.css

@@ -4,22 +4,13 @@
             resize: none;
 
             width: 100%;
-            min-height: calc(var(--spacing, .25rem) * 8);
 
             display: block;
 
-            background-color: white;
             color: var(--color-black, #000);
-
             font-size: var(--text-base, 1rem);
 
-            padding-top: calc(var(--spacing, .25rem) * 1);
-            padding-left: calc(var(--spacing, 0.25rem) * 3.5);
-            padding-right: calc(var(--spacing, 0.25rem) * 3.5);
-            padding-top: calc(var(--spacing, .25rem) * 1);
-
-            border-radius: var(--radius-2xl, 1rem);
-            border: 1px solid var(--color-gray-200, oklch(0.928 0.006 264.531));
+            border: 1px solid transparent;
             outline: none;
 
             transition: all 200ms ease-in-out;
@@ -28,23 +19,10 @@
                 color: var(--color-gray-500, oklch(0.551 0.027 264.364));
             }
 
-            &:hover {
-                border: 1px solid var(--color-primary-200, oklch(0.928 0.006 264.531));
-            }
-
-            &:not(:hover) {
-                transition: all 600ms ease-in-out;
-            }
-
             &:read-only {
                 opacity: 50%;
                 pointer-events: none;
             }
-
-            &:focus {
-                border: 1px solid var(--color-primary-500, oklch(0.551 0.027 264.364));
-            }
-
         }
     }
 }

package/components/actions/toggle/component/button/component.js

@@ -46,7 +46,7 @@ export function ToggleButton(_a) {
         (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
     }, [onChange, value, rest === null || rest === void 0 ? void 0 : rest.onClick]);
     var active = value === activeValue;
-    return (React.createElement(Button, __assign({}, rest, { as: Component, ref: setRef, type: (rest === null || rest === void 0 ? void 0 : rest.type) || 'button', onClick: handleClick, className: classNames('mosuk-toggle-button', styles.button, (_b = {},
+    return (React.createElement(Button, __assign({}, rest, { as: Component, ref: setRef, type: (rest === null || rest === void 0 ? void 0 : rest.type) || 'button', onClick: handleClick, "data-value": value, className: classNames('mosuk-toggle-button', styles.button, (_b = {},
             _b[styles.active] = active,
             _b), rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/actions/toggle/component/component.module.css

@@ -1,7 +1,7 @@
 @layer mosuk-ui {
     @layer index-21 {
         :where(.toggle) {
-            --toggle-padding: 2px;
+            --toggle-padding: 0px;
             --toggle-indicator-width: unset;
             --toggle-indicator-translate-x: var(--toggle-padding);
         }
@@ -20,12 +20,11 @@
             align-items: center;
             gap: calc(var(--spacing, .25rem) * 1);
 
-            background-color: var(--color-white, #ffffff);
-
             padding: var(--toggle-padding);
 
             border-radius: calc(infinity * 1px);
-            border: 1px solid color-mix(in oklab, var(--color-gray-200, oklch(0.928 0.006 264.531)) 50%, transparent);
+            border: 1px solid transparent;
+            outline: none;
 
             &::-webkit-scrollbar {
                 display: none;
@@ -49,11 +48,6 @@
                 &:hover,
                 &.active {
                     color: var(--color-primary-500, #0074e7);
-                    background-color: transparent;
-
-                    & svg {
-                        color: var(--color-primary-500, #0074e7);
-                    }
                 }
             }
 

package/components/actions/toggle/skeleton/component.js

@@ -26,5 +26,5 @@ import styles from './component.module.css';
 export function ToggleSkeleton(_a) {
     var as = _a.as, rest = __rest(_a, ["as"]);
     var Component = (as || 'div');
-    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-toggle', styles.toggle, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    return (React.createElement(Component, __assign({}, rest, { className: classNames('mosuk-toggle-skeleton', styles.toggle, rest === null || rest === void 0 ? void 0 : rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/actions/toggle/skeleton/component.module.css

@@ -1,7 +1,7 @@
 @layer mosuk-ui {
     @layer index-21 {
         :where(.toggle) {
-            --toggle-padding: 2px;
+            --toggle-padding: 0px;
         }
 
         .toggle {
@@ -18,13 +18,11 @@
             align-items: center;
             gap: calc(var(--spacing, .25rem) * 1);
 
-            background-color: color-mix(in oklab, var(--color-white) 50%, transparent);
-            backdrop-filter: blur(18px);
-
             padding: var(--toggle-padding);
 
             border-radius: calc(infinity * 1px);
-            border: 1px solid color-mix(in oklab, var(--color-gray-200, oklch(0.928 0.006 264.531)) 50%, transparent);
+            border: 1px solid transparent;
+            outline: none;
 
             &::-webkit-scrollbar {
                 display: none;

package/components/collections/accordion/component/component.module.css

@@ -5,34 +5,21 @@
         .header {
           width: 100%;
 
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          gap: calc(var(--spacing, .25rem) * 4);
-
-          .headerContent {
+          .trigger {
             width: 100%;
-
-            text-align: left;
-
-            cursor: pointer;
           }
         }
-      }
 
-      .content {
-        overflow: hidden;
-        height: var(--accordion-panel-height);
+        .content {
+          overflow: hidden;
+          height: var(--accordion-panel-height);
 
-        font-size: var(--text-sm, 0.875rem);
+          transition: height 150ms ease-out;
 
-        padding-top: calc(var(--spacing, .25rem) * 4);
-
-        transition: height 150ms ease-out;
-
-        &[data-starting-style],
-        &[data-ending-style] {
-          height: 0;
+          &[data-starting-style],
+          &[data-ending-style] {
+            height: 0;
+          }
         }
       }
     }

package/components/collections/accordion/component/index.d.ts

@@ -6,12 +6,12 @@ import { AccordionContent as BaseAccordionContent } from './item/content/compone
 import { AccordionContentProps } from './item/content/component.interface';
 import { AccordionHeader as BaseAccordionHeader } from './item/header/component';
 import { AccordionHeaderProps } from './item/header/component.interface';
-import { AccordionHeaderContent as BaseAccordionHeaderContent } from './item/header/content/component';
-import { AccordionHeaderContentProps } from './item/header/content/component.interface';
+import { AccordionHeaderTrigger as BaseAccordionHeaderTrigger } from './item/header/trigger/component';
+import { AccordionHeaderTriggerProps } from './item/header/trigger/component.interface';
 export declare const Accordion: typeof BaseAccordion & {
     Item: typeof BaseAccordionItem;
     Header: typeof BaseAccordionHeader & {
-        Content: typeof BaseAccordionHeaderContent;
+        Trigger: typeof BaseAccordionHeaderTrigger;
     };
     Content: typeof BaseAccordionContent;
 };
@@ -22,8 +22,8 @@ export declare namespace Accordion {
     }
     namespace Header {
         type Props = AccordionHeaderProps;
-        namespace Content {
-            type Props = AccordionHeaderContentProps;
+        namespace Trigger {
+            type Props = AccordionHeaderTriggerProps;
         }
     }
     namespace Content {

package/components/collections/accordion/component/index.js

@@ -2,11 +2,11 @@ import { Accordion as BaseAccordion } from './component';
 import { AccordionItem as BaseAccordionItem } from './item/component';
 import { AccordionContent as BaseAccordionContent } from './item/content/component';
 import { AccordionHeader as BaseAccordionHeader } from './item/header/component';
-import { AccordionHeaderContent as BaseAccordionHeaderContent } from './item/header/content/component';
+import { AccordionHeaderTrigger as BaseAccordionHeaderTrigger } from './item/header/trigger/component';
 export var Accordion = Object.assign(BaseAccordion, {
     Item: BaseAccordionItem,
     Header: Object.assign(BaseAccordionHeader, {
-        Content: BaseAccordionHeaderContent,
+        Trigger: BaseAccordionHeaderTrigger,
     }),
     Content: BaseAccordionContent,
 });

package/components/collections/accordion/component/item/header/trigger/component.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { AccordionHeaderTriggerProps } from './component.interface';
+export declare function AccordionHeaderTrigger({ ...rest }: AccordionHeaderTriggerProps): React.JSX.Element;

package/components/collections/accordion/component/item/header/{content → trigger}/component.interface.d.ts

@@ -1,3 +1,3 @@
 import { Accordion } from '@base-ui/react/accordion';
-export interface AccordionHeaderContentProps extends Accordion.Trigger.Props {
+export interface AccordionHeaderTriggerProps extends Accordion.Trigger.Props {
 }

package/components/collections/accordion/component/item/header/{content → trigger}/component.js

@@ -23,7 +23,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { Accordion as BaseAccordion } from '@base-ui/react/accordion';
 import classNames from 'classnames';
 import React from 'react';
-export function AccordionHeaderContent(_a) {
+import styles from '../../../component.module.css';
+export function AccordionHeaderTrigger(_a) {
     var rest = __rest(_a, []);
-    return (React.createElement(BaseAccordion.Trigger, __assign({}, rest, { className: classNames('mosuk-accordion-item-header-content', rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
+    return (React.createElement(BaseAccordion.Trigger, __assign({}, rest, { className: classNames('mosuk-accordion-item-header-trigger', styles.trigger, rest.className) }), rest === null || rest === void 0 ? void 0 : rest.children));
 }

package/components/collections/breadcrumbs/component/{button → .partials/components/button}/component.interface.d.ts

@@ -1,4 +1,4 @@
 import { ElementType } from 'react';
-import { ButtonProps } from '../../../../actions/button/component/component.interface';
+import { ButtonProps } from '../../../../../../actions/button/component/component.interface';
 export interface BreadcrumbsButtonProps extends ButtonProps<ElementType> {
 }

package/components/collections/breadcrumbs/component/{button → .partials/components/button}/component.js

@@ -22,8 +22,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React from 'react';
-import { Button } from '../../../../actions/button/component/component';
-import styles from '../component.module.css';
+import { Button } from '../../../../../../actions/button/component/component';
+import styles from '../../styles/style.module.css';
 export function BreadcrumbsButton(_a) {
     var _b;
     var rest = __rest(_a, []);

package/components/collections/breadcrumbs/component/{component.js → .partials/components/component.js}

@@ -23,10 +23,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import React, { Children, isValidElement } from 'react';
 import { FreeMode, Mousewheel } from 'swiper/modules';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import { BreadcrumbsButtonSkeleton } from '../skeleton/button/component';
-import { BreadcrumbsIconSkeleton } from '../skeleton/icon/component';
+import { BreadcrumbsButtonSkeleton } from '../../../skeleton/.partials/components/button/component';
+import { BreadcrumbsIconSkeleton } from '../../../skeleton/.partials/components/icon/component';
+import styles from '../styles/style.module.css';
 import { BreadcrumbsButton } from './button/component';
-import styles from './component.module.css';
 import { BreadcrumbsIcon } from './icon/component';
 export function Breadcrumbs(_a) {
     var _b, _c, _d, _e, _f;

package/components/collections/breadcrumbs/component/{icon → .partials/components/icon}/component.interface.d.ts

@@ -1,4 +1,4 @@
 import { ElementType } from 'react';
-import { IconProps } from '../../../../actions/icon/component/component.interface';
+import { IconProps } from '../../../../../../actions/icon/component/component.interface';
 export interface BreadcrumbsIconProps extends IconProps<ElementType> {
 }

package/components/collections/breadcrumbs/component/{icon → .partials/components/icon}/component.js

@@ -22,8 +22,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React from 'react';
-import { Icon } from '../../../../actions/icon/component/component';
-import styles from '../component.module.css';
+import { Icon } from '../../../../../../actions/icon/component/component';
+import styles from '../../styles/style.module.css';
 export function BreadcrumbsIcon(_a) {
     var _b;
     var rest = __rest(_a, []);

package/components/collections/breadcrumbs/component/index.d.ts

@@ -1,9 +1,9 @@
-import { BreadcrumbsButton } from './button/component';
-import { BreadcrumbsButtonProps } from './button/component.interface';
-import { Breadcrumbs as BaseBreadcrumbs } from './component';
-import type { BreadcrumbsProps } from './component.interface';
-import { BreadcrumbsIcon } from './icon/component';
-import { BreadcrumbsIconProps } from './icon/component.interface';
+import { BreadcrumbsButton } from './.partials/components/button/component';
+import { BreadcrumbsButtonProps } from './.partials/components/button/component.interface';
+import { Breadcrumbs as BaseBreadcrumbs } from './.partials/components/component';
+import type { BreadcrumbsProps } from './.partials/components/component.interface';
+import { BreadcrumbsIcon } from './.partials/components/icon/component';
+import { BreadcrumbsIconProps } from './.partials/components/icon/component.interface';
 export declare const Breadcrumbs: typeof BaseBreadcrumbs & {
     Icon: typeof BreadcrumbsIcon;
     Button: typeof BreadcrumbsButton;

package/components/collections/breadcrumbs/component/index.js

@@ -1,6 +1,6 @@
-import { BreadcrumbsButton } from './button/component';
-import { Breadcrumbs as BaseBreadcrumbs } from './component';
-import { BreadcrumbsIcon } from './icon/component';
+import { BreadcrumbsButton } from './.partials/components/button/component';
+import { Breadcrumbs as BaseBreadcrumbs } from './.partials/components/component';
+import { BreadcrumbsIcon } from './.partials/components/icon/component';
 export var Breadcrumbs = Object.assign(BaseBreadcrumbs, {
     Icon: BreadcrumbsIcon,
     Button: BreadcrumbsButton,

package/components/collections/breadcrumbs/skeleton/.partials/components/button/component.interface.d.ts

@@ -0,0 +1,3 @@
+import { ButtonSkeletonProps } from '../../../../../../actions/button/skeleton/component.interface';
+export interface BreadcrumbsButtonSkeletonProps extends ButtonSkeletonProps {
+}

package/components/collections/breadcrumbs/skeleton/{button → .partials/components/button}/component.js

@@ -22,8 +22,8 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import classNames from 'classnames';
 import React from 'react';
-import { ButtonSkeleton } from '../../../../actions/button/skeleton/component';
-import styles from '../component.module.css';
+import { ButtonSkeleton } from '../../../../../../actions/button/skeleton/component';
+import styles from '../../styles/style.module.css';
 export function BreadcrumbsButtonSkeleton(_a) {
     var _b;
     var rest = __rest(_a, []);