norma-library 0.6.894 → 0.6.981

package/dist/esm/components/UncontrolledTable/components/row/styles.js

@@ -1,12 +1,6 @@
 import { __makeTemplateObject } from "tslib";
-import { breakpoints } from '../../../../utils/styledBreakpoints';
 import styled from 'styled-components';
-export var Tr = styled.tr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: inherit;\n  display: table-row;\n  vertical-align: middle;\n  outline: 0;\n  &:nth-of-type(even) {\n    background-color: #fafafa;\n  }\n"], ["\n  color: inherit;\n  display: table-row;\n  vertical-align: middle;\n  outline: 0;\n  &:nth-of-type(even) {\n    background-color: #fafafa;\n  }\n"])));
-export var Td = styled.td(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  letter-spacing: 0.01071em;\n  display: table-cell;\n  vertical-align: inherit;\n  border-bottom: 1px solid rgba(224, 224, 224, 1);\n  text-align: left;\n  padding: 16px;\n  ", ";\n  color: #666666;\n  font-size: 0.875rem;\n"], ["\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  letter-spacing: 0.01071em;\n  display: table-cell;\n  vertical-align: inherit;\n  border-bottom: 1px solid rgba(224, 224, 224, 1);\n  text-align: left;\n  padding: 16px;\n  ", ";\n  color: #666666;\n  font-size: 0.875rem;\n"])), breakpoints({
-    cssProp: 'padding',
-    cssPropUnits: 'px',
-    values: [{ 1440: 8 }],
-    mediaQueryType: 'max-width',
-}));
+export var Tr = styled.tr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: inherit;\n  display: table-row;\n  vertical-align: middle;\n  outline: 0;\n"], ["\n  color: inherit;\n  display: table-row;\n  vertical-align: middle;\n  outline: 0;\n"])));
+export var Td = styled.td(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  letter-spacing: 0.01071em;\n  display: table-cell;\n  vertical-align: inherit;\n  border-bottom: 1px solid rgba(224, 224, 224, 1);\n  text-align: left;\n  padding: 8px;\n  color: #666666;\n  font-size: 0.875rem;\n"], ["\n  font-weight: 500;\n  font-size: 0.875rem;\n  line-height: 1.5rem;\n  letter-spacing: 0.01071em;\n  display: table-cell;\n  vertical-align: inherit;\n  border-bottom: 1px solid rgba(224, 224, 224, 1);\n  text-align: left;\n  padding: 8px;\n  color: #666666;\n  font-size: 0.875rem;\n"])));
 var templateObject_1, templateObject_2;
 //# sourceMappingURL=styles.js.map

package/dist/esm/components/UncontrolledTable/components/row/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/row/styles.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,qCAAqC,CAAC;AAClE,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAEvC,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,yNAAK,sJAQ/B,IAAA,CAAC;AAEF,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,6WAAA,wPAUvB,EAKA,gDAGH,KARG,WAAW,CAAC;IACZ,OAAO,EAAE,SAAS;IAClB,YAAY,EAAE,IAAI;IAClB,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,CAAC;IACrB,cAAc,EAAE,WAAW;CAC5B,CAAC,CAGH,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../../../src/components/UncontrolledTable/components/row/styles.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,2JAAA,wFAK1B,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,EAAE,GAAG,MAAM,CAAC,EAAE,mWAAA,gSAY1B,IAAA,CAAA"}

package/dist/esm/components/UncontrolledTable/interface.d.ts

@@ -1,38 +1,56 @@
 import { ColumnDef } from '@tanstack/react-table';
+import { JSX } from 'react';
 type Labels = {
-    orderAsc: string;
-    orderDesc: string;
-    filter: string;
-    clearFilter: string;
+    orderAsc?: string;
+    orderDesc?: string;
+    filter?: string;
+    clearFilter?: string;
+    columns?: string;
 };
 interface Pagination {
     pageIndex: number;
     pageSize: number;
 }
+interface Sticky {
+    enabled: boolean;
+    top: number;
+}
+export interface TableList {
+    id: string;
+    label: string | JSX.Element;
+    onClick?: (id: string) => void;
+    checked?: () => boolean | boolean;
+    disabled?: boolean;
+}
+export interface TableButton {
+    render: () => JSX.Element;
+    list?: {
+        options: TableList[];
+        toggleableList?: boolean;
+        closeOnClick?: boolean;
+    };
+    disabled?: boolean;
+    onClick?: () => void;
+}
 export interface UncontrolledTableProps {
     data: any;
     columns: ColumnDef<ColumnsTable>[];
-    onClick: any;
-    onMouseOver: any;
-    onMouseOut: any;
-    showTotalResults: boolean;
-    showSettings: boolean;
     pagination?: Pagination;
-    totalPages: number;
-    showClearFields?: boolean;
-    customTotalResults?: string;
+    totalPages?: number;
     labels?: Labels;
     tableClassName?: string;
-    stickyHeader?: boolean;
-    stickyHeaderP?: number;
-    customIcons?: React.ReactNode[];
-    hideColumns?: string[];
+    sticky?: Sticky;
     draggable?: boolean;
-    onChangePage: (pagination: Pagination) => void;
-    onClearFieldsClick?: () => void;
+    buttons?: TableButton[];
+    configs?: TableButton[];
+    hideColumns?: string[];
+    onClick?: () => void;
+    onMouseOver?: () => void;
+    onMouseOut?: () => void;
+    onColumnVisibilityChange?: (column: string, value: boolean) => void;
+    onChangePage?: (pagination: Pagination) => void;
     onFilterClick?: (column: string) => void;
     onSortClick?: (column: string, direction: string) => void;
-    onColumnVisibilityChange?: (columnId: string, isVisible: boolean) => void;
     onDragEnd?: (data: any[]) => void;
 }
 export interface ColumnsTable {

package/dist/esm/hooks/useClickOutside.js.map

@@ -1 +1 @@
-{"version":3,"file":"useClickOutside.js","sourceRoot":"","sources":["../../../src/hooks/useClickOutside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,IAAM,eAAe,GAAG,UAAC,GAAwC,EAAE,QAAoB;IACrF,IAAM,kBAAkB,GAAG,UAAC,KAAiB;QAC3C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;YAC/D,QAAQ,EAAE,CAAC;QACb,CAAC;IACH,CAAC,CAAC;IAEF,SAAS,CAAC;QACR,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAChE,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAC;AACtB,CAAC,CAAC;AAEF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"useClickOutside.js","sourceRoot":"","sources":["../../../src/hooks/useClickOutside.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,IAAM,eAAe,GAAG,UAAC,GAAwC,EAAE,QAAoB;IACrF,IAAM,kBAAkB,GAAG,UAAC,KAAiB;QAC3C,IAAI,GAAG,CAAC,OAAO,IAAI,CAAC,GAAG,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAAE,CAAC;YAC/D,QAAQ,EAAE,CAAA;QACZ,CAAC;IACH,CAAC,CAAA;IAED,SAAS,CAAC;QACR,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAA;QAC1D,OAAO;YACL,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAA;QAC/D,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAC,CAAA;AACrB,CAAC,CAAA;AAED,eAAe,eAAe,CAAA"}

package/dist/esm/hooks/useOutsideScreen.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+/**
+ * Hook that detects when an element is partially visible in the viewport
+ * @param elementRef - Reference to the DOM element to observe
+ * @returns boolean indicating if the element is partially visible in the viewport
+ */
+export declare const usePartiallyVisible: (elementRef: RefObject<HTMLElement | null>) => boolean;

package/dist/esm/hooks/useOutsideScreen.js

@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react';
+/**
+ * Hook that detects when an element is partially visible in the viewport
+ * @param elementRef - Reference to the DOM element to observe
+ * @returns boolean indicating if the element is partially visible in the viewport
+ */
+export var usePartiallyVisible = function (elementRef) {
+    var _a = useState(false), isPartiallyVisible = _a[0], setIsPartiallyVisible = _a[1];
+    useEffect(function () {
+        var element = elementRef.current;
+        if (!element)
+            return;
+        var observer = new IntersectionObserver(function (_a) {
+            var entry = _a[0];
+            // Element is partially visible if it's intersecting but not completely visible
+            var isPartial = entry.isIntersecting && entry.intersectionRatio < 1.0;
+            setIsPartiallyVisible(isPartial);
+        }, {
+            root: null, // Use the viewport as the root
+            threshold: [0, 1.0], // Check at these thresholds to determine partial visibility
+        });
+        observer.observe(element);
+        return function () {
+            if (element)
+                observer.unobserve(element);
+        };
+    }, [elementRef]);
+    return isPartiallyVisible;
+};
+//# sourceMappingURL=useOutsideScreen.js.map

package/dist/esm/hooks/useOutsideScreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOutsideScreen.js","sourceRoot":"","sources":["../../../src/hooks/useOutsideScreen.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAa,MAAM,OAAO,CAAA;AAEtD;;;;GAIG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAAG,UAAC,UAAyC;IACnE,IAAA,KAA8C,QAAQ,CAAU,KAAK,CAAC,EAArE,kBAAkB,QAAA,EAAE,qBAAqB,QAA4B,CAAA;IAE5E,SAAS,CAAC;QACN,IAAM,OAAO,GAAG,UAAU,CAAC,OAAO,CAAA;QAClC,IAAI,CAAC,OAAO;YAAE,OAAM;QAEpB,IAAM,QAAQ,GAAG,IAAI,oBAAoB,CACrC,UAAC,EAAO;gBAAN,KAAK,QAAA;YACH,+EAA+E;YAC/E,IAAM,SAAS,GAAG,KAAK,CAAC,cAAc,IAAI,KAAK,CAAC,iBAAiB,GAAG,GAAG,CAAA;YACvE,qBAAqB,CAAC,SAAS,CAAC,CAAA;QACpC,CAAC,EACD;YACI,IAAI,EAAE,IAAI,EAAE,+BAA+B;YAC3C,SAAS,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,EAAE,4DAA4D;SACpF,CACJ,CAAA;QAED,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;QAEzB,OAAO;YACH,IAAI,OAAO;gBAAE,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA;QAC5C,CAAC,CAAA;IACL,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAEhB,OAAO,kBAAkB,CAAA;AAC7B,CAAC,CAAA"}

package/dist/esm/index.d.ts

@@ -25,7 +25,7 @@ import MultiSelectInput from './components/MultiSelectInput';
 import { Title, Text } from './components/Typography';
 import TextInput from './components/TextInput';
 import Table from './components/Table';
-import UncontrolledTable from './components/UncontrolledTable';
+import UncontrolledTable from './components/UncontrolledTable/UncontrolledTable';
 import UncontrolledTabs from './components/UncontrolledTabs/UncontrolledTabs';
 import { TimeLine, TimeLineData } from './components/TimeLine/TimeLine';
 import { ModalStatus } from './components/StatusModal/StatusModal';

package/dist/esm/index.js

@@ -25,7 +25,7 @@ import MultiSelectInput from './components/MultiSelectInput';
 import { Title, Text } from './components/Typography';
 import TextInput from './components/TextInput';
 import Table from './components/Table';
-import UncontrolledTable from './components/UncontrolledTable';
+import UncontrolledTable from './components/UncontrolledTable/UncontrolledTable';
 import UncontrolledTabs from './components/UncontrolledTabs/UncontrolledTabs';
 import { TimeLine } from './components/TimeLine/TimeLine';
 import { ModalStatus } from './components/StatusModal/StatusModal';

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAClH,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,GAAG,MAAM,kBAAkB,CAAC;AACnC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,gBAAgB,MAAM,gDAAgD,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAgB,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,WAAW,EACX,kBAAkB,EAClB,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,WAAW,EACX,UAAU,EACV,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,GAAG,EACH,SAAS,EACT,aAAa,EACb,MAAM,EACN,SAAS,EACT,GAAG,EACH,UAAU,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,uBAAuB,EACvB,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,GAET,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AACzC,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AACrD,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAClH,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,GAAG,MAAM,kBAAkB,CAAC;AACnC,OAAO,UAAU,MAAM,yBAAyB,CAAC;AACjD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,gBAAgB,MAAM,+BAA+B,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAC/C,OAAO,KAAK,MAAM,oBAAoB,CAAC;AACvC,OAAO,iBAAiB,MAAM,kDAAkD,CAAC;AACjF,OAAO,gBAAgB,MAAM,gDAAgD,CAAC;AAC9E,OAAO,EAAE,QAAQ,EAAgB,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEzC,OAAO,EACL,SAAS,EACT,MAAM,EACN,IAAI,EACJ,WAAW,EACX,kBAAkB,EAClB,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,KAAK,EACL,KAAK,EACL,KAAK,EACL,WAAW,EACX,WAAW,EACX,UAAU,EACV,YAAY,EACZ,MAAM,EACN,IAAI,EACJ,GAAG,EACH,SAAS,EACT,aAAa,EACb,MAAM,EACN,SAAS,EACT,GAAG,EACH,UAAU,EACV,WAAW,EACX,WAAW,EACX,gBAAgB,EAChB,uBAAuB,EACvB,IAAI,EACJ,KAAK,EACL,SAAS,EACT,KAAK,EACL,iBAAiB,EACjB,gBAAgB,EAChB,WAAW,EACX,WAAW,EACX,QAAQ,EACR,QAAQ,GAET,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.6.894",
+  "version": "0.6.981",
   "private": false,
   "description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
   "scripts": {
@@ -93,7 +93,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.11.0",
+    "@emotion/styled": "^11.14.0",
     "@mui/icons-material": "^5.14.9",
     "@mui/lab": "^5.0.0-alpha.152",
     "@mui/material": "^5.16.7",
@@ -104,7 +104,7 @@
     "react-datepicker": "^7.5.0",
     "react-i18next": "^15.4.0",
     "react-select": "^5.8.0",
-    "styled-components": "^6.1.0",
+    "styled-components": "^6.1.18",
     "tslib": "^2.6.2"
   },
   "peerDependencies": {

package/src/components/Accordion.tsx

@@ -1,29 +1,33 @@
-import React from 'react';
+import React from 'react'
 import {
   AccordionDetails,
   AccordionSummary,
   Accordion as MuiAccordion,
-  Typography
-} from '@mui/material';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { AccordionBaseProps } from '../interfaces';
-import { styled } from '@mui/material/styles';
+  Typography,
+} from '@mui/material'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { AccordionBaseProps } from '../interfaces'
+import { styled } from '@mui/material/styles'
 
-const AccordionStyled = styled(MuiAccordion)({});
+const AccordionStyled = styled(MuiAccordion)({})
 
 export const Accordion = ({ data = [], defaultExpanded = false, ...props }: AccordionBaseProps) => {
-  const [expanded, setExpanded] = React.useState<boolean | string>(defaultExpanded);
+  const [expanded, setExpanded] = React.useState<boolean | string>(defaultExpanded)
 
-  const handleChange = (panel: string) => (event: React.SyntheticEvent, isExpanded: boolean) => {
-    console.log('Event ==> ', event);
-    setExpanded(isExpanded ? panel : false);
-  };
+  const handleChange = (panel: string) => (_: any, isExpanded: boolean) => {
+    setExpanded(isExpanded ? panel : false)
+  }
 
   return (
     <>
       {data &&
         data.map((item, key) => (
-          <AccordionStyled expanded={expanded === item.id} onChange={handleChange(item.id)} key={key} {...props}>
+          <AccordionStyled
+            expanded={expanded === item.id}
+            onChange={handleChange(item.id)}
+            key={key}
+            {...props}
+          >
             <AccordionSummary
               expandIcon={<ExpandMoreIcon />}
               aria-controls={`panel-${key}-content`}
@@ -35,5 +39,5 @@ export const Accordion = ({ data = [], defaultExpanded = false, ...props }: Acco
           </AccordionStyled>
         ))}
     </>
-  );
-};
+  )
+}

package/src/components/ProgressBar.tsx

@@ -1,22 +1,24 @@
-import React from 'react';
-import styled from 'styled-components';
+import React from 'react'
+import styled from 'styled-components'
 
-import { LinearProgress as MuiProgressBar, linearProgressClasses, Typography } from '@mui/material';
-import { ProgressBarBaseProps, CustomColor } from '../interfaces';
+import { LinearProgress as MuiProgressBar, linearProgressClasses, Typography } from '@mui/material'
+import { ProgressBarBaseProps, CustomColor } from '../interfaces'
 
-const ProgressBarStyled = styled(MuiProgressBar)<{ colorCustom?: CustomColor; $h?: number }>(({ colorCustom, $h }) => ({
-  width: '100%',
-  height: $h ? `${$h}px` : '10px',
-  borderRadius: '10px',
-  position: 'relative',
-  backgroundColor: colorCustom ? colorCustom.root : undefined,
-  [`&.${linearProgressClasses.determinate}`]: {
+const ProgressBarStyled = styled(MuiProgressBar)<{ colorCustom?: CustomColor; $h?: number }>(
+  ({ colorCustom, $h }) => ({
+    width: '100%',
+    height: $h ? `${$h}px` : '10px',
+    borderRadius: '10px',
+    position: 'relative',
     backgroundColor: colorCustom ? colorCustom.root : undefined,
-  },
-  [`& .${linearProgressClasses.bar}`]: {
-    backgroundColor: colorCustom ? colorCustom.bar : undefined,
-  },
-}));
+    [`&.${linearProgressClasses.determinate}`]: {
+      backgroundColor: colorCustom ? colorCustom.root : undefined,
+    },
+    [`& .${linearProgressClasses.bar}`]: {
+      backgroundColor: colorCustom ? colorCustom.bar : undefined,
+    },
+  }),
+)
 
 const ProgressBarLabelStyled = styled(Typography)<{ $fSize?: string }>`
   display: flex;
@@ -26,7 +28,7 @@ const ProgressBarLabelStyled = styled(Typography)<{ $fSize?: string }>`
   position: relative;
   text-align: left;
   font-size: ${({ $fSize }) => $fSize || '1rem'};
-`;
+`
 
 export const ProgressBar = ({
   value = 0,
@@ -40,20 +42,18 @@ export const ProgressBar = ({
   htmlLabel,
   ...props
 }: ProgressBarBaseProps) => {
-  const percentage = value && total ? (value / total) * 100 : 0;
+  const percentage = value && total ? (value / total) * 100 : 0
 
   return (
     <div className={className} style={{ minWidth: '100px' }}>
       {label ? (
         <ProgressBarLabelStyled $fSize={props.fSize} className="ProgressBarLabel">
-          <>
-            {label}
-            {!props.hideValue && (
-              <span style={{ right: 0 }}>
-                {localeString ? value.toLocaleString() : value} ({percentage.toFixed(2)}%)
-              </span>
-            )}
-          </>
+          {label}
+          {!props.hideValue && (
+            <span style={{ right: 0 }}>
+              {localeString ? value.toLocaleString() : value} ({percentage.toFixed(2)}%)
+            </span>
+          )}
         </ProgressBarLabelStyled>
       ) : (
         htmlLabel
@@ -68,5 +68,5 @@ export const ProgressBar = ({
         {...props}
       />
     </div>
-  );
-};
+  )
+}

package/src/components/UncontrolledTable/{styles.tsx → UncontrolledTable.style.tsx}

@@ -1,9 +1,10 @@
-import { breakpoints } from '../../utils/styledBreakpoints';
-import styled from 'styled-components';
+import { breakpoints } from '../../utils/styledBreakpoints'
+import styled from 'styled-components'
 
 export const Container = styled.div`
   background-color: #fff;
-`;
+  padding: 15px;
+`
 
 export const Table = styled.table`
   display: table;
@@ -12,26 +13,26 @@ export const Table = styled.table`
   border-spacing: 0;
   min-width: 650px;
   border: none;
-`;
+`
 
 const StickyStyles = (top: number) => `
   position: sticky;
   top: ${top}px;
   z-index: 1;
-  background: #fff;
-`;
+`
 
-export const Thead = styled.thead<{ $sticky?: boolean, $stickyTopP?: number}>`
+export const Thead = styled.thead<{ $sticky?: boolean; $stickyTopP?: number }>`
   display: table-header-group;
-  ${props => props.$sticky && StickyStyles(props.$stickyTopP || 0)};
-`;
+  background-color: #fafafa;
+  ${(props) => props.$sticky && StickyStyles(props.$stickyTopP || 0)};
+`
 
 export const TableRow = styled.tr`
   color: inherit;
   display: table-row;
   vertical-align: middle;
   outline: 0;
-`;
+`
 
 export const Th = styled.th`
   font-weight: 500;
@@ -42,7 +43,7 @@ export const Th = styled.th`
   vertical-align: inherit;
   border-bottom: 1px solid rgba(224, 224, 224, 1);
   text-align: left;
-  padding: 16px;
+  padding: 16px 8px;
   ${breakpoints({
     cssProp: 'padding',
     cssPropUnits: 'px',
@@ -53,20 +54,29 @@ export const Th = styled.th`
   color: #666666;
   font-size: 0.875rem;
   font-weight: 700;
-`;
+`
 
 export const ColumnContent = styled.div`
   display: flex;
   align-items: center;
   gap: 5px;
-`;
+`
 
-export const TextColumn = styled.span``;
+export const TextColumn = styled.span<{ $size?: string }>`
+  line-height: 1.3;
+  ${(props) =>
+    props.$size &&
+    ` white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      width: ${props.$size};
+    `}
+`
 
 export const IconFilterDialog = styled.div`
   height: 20px;
   width: 20px;
-`;
+`
 
 export const FilterDialog = styled.div`
   position: absolute;
@@ -77,7 +87,7 @@ export const FilterDialog = styled.div`
   box-shadow: 0px 3px 6px #00000029;
   border: 1px solid #e0e0e0;
   z-index: 99;
-`;
+`
 
 export const ListFilterDialog = styled.div`
   display: flex;
@@ -93,7 +103,7 @@ export const ListFilterDialog = styled.div`
     border: 1px solid #e0e0e0;
     padding: 8px 12px;
   }
-`;
+`
 
 export const OptionFilterDialog = styled.div`
   display: flex;
@@ -120,4 +130,4 @@ export const OptionFilterDialog = styled.div`
     font-size: 16px;
     font-weight: 400;
   }
-`;
+`