@stack-spot/portal-components 2.16.1 → 2.18.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## [2.18.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.17.0...portal-components@v2.18.0) (2025-04-07)
+
+
+### Features
+
+* add table component and css adjustments in placeholder ([e4fdc1e](https://github.com/stack-spot/portal-commons/commit/e4fdc1efd10fdea20101f3da59610c89e14f0ca8))
+
+## [2.17.0](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.16.1...portal-components@v2.17.0) (2025-03-24)
+
+
+### Features
+
+* Feat 1424 remove controls of comp Creatable Select ([#832](https://github.com/stack-spot/portal-commons/issues/832)) ([2186130](https://github.com/stack-spot/portal-commons/commit/2186130215c71b53da6195b5a2f979017bdfe07f))
+
 ## [2.16.1](https://github.com/stack-spot/portal-commons/compare/portal-components@v2.16.0...portal-components@v2.16.1) (2025-03-21)
 
 

package/dist/components/ContentValidateFilter.d.ts

@@ -0,0 +1,6 @@
+export declare const ContentValidateFilter: ({ searchText, listLength, children, }: {
+    searchText?: string;
+    listLength: number;
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ContentValidateFilter.d.ts.map

package/dist/components/ContentValidateFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentValidateFilter.d.ts","sourceRoot":"","sources":["../../src/components/ContentValidateFilter.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,qBAAqB,GAAI,uCAInC;IACD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,4CAGA,CAAA"}

package/dist/components/ContentValidateFilter.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { PlaceholderResourceEmptySearch } from './Placeholder.js';
+export const ContentValidateFilter = ({ searchText, listLength, children, }) => {
+    if (!listLength && searchText)
+        return _jsx(PlaceholderResourceEmptySearch, {});
+    return _jsx(_Fragment, { children: children });
+};
+//# sourceMappingURL=ContentValidateFilter.js.map

package/dist/components/ContentValidateFilter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentValidateFilter.js","sourceRoot":"","sources":["../../src/components/ContentValidateFilter.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,8BAA8B,EAAE,MAAM,eAAe,CAAA;AAE9D,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,EACpC,UAAU,EACV,UAAU,EACV,QAAQ,GAKT,EAAE,EAAE;IACH,IAAI,CAAC,UAAU,IAAI,UAAU;QAAE,OAAO,KAAC,8BAA8B,KAAG,CAAA;IACxE,OAAO,4BAAG,QAAQ,GAAI,CAAA;AACxB,CAAC,CAAA"}

package/dist/components/Placeholder.d.ts

@@ -18,5 +18,6 @@ interface PropsCallToAction extends Props {
 }
 export declare const Placeholder: ({ title, description, button, img, fullWidth, show, sx, style, className }: Props) => import("react/jsx-runtime").JSX.Element | null;
 export declare const PlaceholderCallToAction: ({ title, description, subDescription, img, button, fullWidth, show, sx, sxCard, style, className, titleAs, }: PropsCallToAction) => import("react/jsx-runtime").JSX.Element | null;
+export declare const PlaceholderResourceEmptySearch: ({ title, description }: Pick<Props, "title" | "description">) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Placeholder.d.ts.map

package/dist/components/Placeholder.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.d.ts","sourceRoot":"","sources":["../../src/components/Placeholder.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAInD,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,iBAAkB,SAAQ,KAAK;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,GAAI,4EAAmF,KAAK,mDAsBnH,CAAA;AAED,eAAO,MAAM,uBAAuB,GAAI,8GAarC,iBAAiB,mDA4BnB,CAAA"}
+{"version":3,"file":"Placeholder.d.ts","sourceRoot":"","sources":["../../src/components/Placeholder.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,kCAAkC,CAAA;AACzD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAInD,UAAU,KAAK;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,GAAG,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IACzB,MAAM,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;IACnC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,UAAU,iBAAkB,SAAQ,KAAK;IACvC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,WAAW,GAAI,4EAAmF,KAAK,mDA2BnH,CAAA;AAED,eAAO,MAAM,uBAAuB,GAAI,8GAarC,iBAAiB,mDAgCnB,CAAA;AAGD,eAAO,MAAM,8BAA8B,GAAI,wBAAwB,IAAI,CAAC,KAAK,EAAE,OAAO,GAAG,aAAa,CAAC,4CAQ1G,CAAA"}

package/dist/components/Placeholder.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslate } from '@stack-spot/portal-translate';
 import { Box, Flex, Text } from '@citric/core';
 import { Card, CardContent } from '@citric/ui';
 import { GenericPlaceholder } from '../svg/index.js';
@@ -6,12 +7,26 @@ export const Placeholder = ({ title, description, button, img, fullWidth, show =
     if (!show) {
         return null;
     }
-    return (_jsx(Card, { sx: { ...(fullWidth ? { w: '100%' } : {}) }, style: style, className: className, children: _jsxs(CardContent, { as: Flex, py: 27, justifyContent: "center", flexDirection: "column", alignItems: "center", sx: sx, children: [img ?? _jsx(GenericPlaceholder, {}), title && _jsx(Text, { as: "label", appearance: "h4", mb: "3", pt: 5, children: title }), _jsx(Text, { mb: "3", appearance: "body2", colorScheme: "light.700", children: description }), button] }) }));
+    return (_jsx(Card, { sx: { ...(fullWidth ? { w: '100%' } : {}) }, style: style, className: className, children: _jsxs(CardContent, { as: Flex, py: 15, sx: { display: 'grid', gridTemplateColumns: '0.6fr 1fr', alignItems: 'center', gap: '92px', ...sx }, children: [_jsx(Box, { sx: { justifySelf: 'end' }, children: img ?? _jsx(GenericPlaceholder, {}) }), _jsxs(Box, { children: [title && _jsx(Text, { as: "label", appearance: "h4", mb: "3", pt: 5, children: title }), _jsx(Text, { mb: "3", appearance: "body2", colorScheme: "light.700", children: description }), button] })] }) }));
 };
 export const PlaceholderCallToAction = ({ title, description, subDescription, img, button, fullWidth, show = true, sx, sxCard, style, className, titleAs, }) => {
     if (!show) {
         return null;
     }
-    return (_jsx(Card, { sx: { w: fullWidth ? '100%' : 'auto', bg: 'transparent', ...sxCard }, style: style, className: className, children: _jsxs(CardContent, { as: Flex, alignItems: "center", justifyContent: "center", py: 15, sx: { gap: '92px', ...sx }, children: [img ?? _jsx(GenericPlaceholder, {}), _jsxs(Box, { children: [title && _jsx(Text, { as: titleAs, appearance: "h4", mb: "3", "aria-live": "assertive", children: title }), _jsx(Text, { mb: "3", appearance: "body2", colorScheme: "light.700", children: description }), _jsx(Text, { mb: "3", appearance: "body2", colorScheme: "light.700", children: subDescription }), button] })] }) }));
+    return (_jsx(Card, { sx: { w: fullWidth ? '100%' : 'auto', bg: 'transparent', ...sxCard }, style: style, className: className, children: _jsxs(CardContent, { as: Flex, py: 15, sx: { display: 'grid', gridTemplateColumns: '0.6fr 1fr', alignItems: 'center', gap: '92px', ...sx }, children: [_jsx(Box, { sx: { justifySelf: 'end' }, children: img ?? _jsx(GenericPlaceholder, {}) }), _jsxs(Box, { children: [title && _jsx(Text, { as: titleAs, appearance: "h4", mb: "3", "aria-live": "assertive", children: title }), _jsx(Text, { mb: "3", appearance: "body2", colorScheme: "light.700", children: description }), _jsx(Text, { mb: "3", appearance: "body2", colorScheme: "light.700", children: subDescription }), button] })] }) }));
+};
+export const PlaceholderResourceEmptySearch = ({ title, description }) => {
+    const t = useTranslate(dictionary);
+    return (_jsx(PlaceholderCallToAction, { fullWidth: true, title: title || t.title, description: description || t.description }));
+};
+const dictionary = {
+    en: {
+        title: 'Sorry, your search did not match any results.',
+        description: 'Please, refine your search and try again.',
+    },
+    pt: {
+        title: 'Desculpe, sua busca não encontrou nenhum resultado.',
+        description: 'Por favor, refine sua busca e tente novamente.',
+    },
 };
 //# sourceMappingURL=Placeholder.js.map

package/dist/components/Placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"Placeholder.js","sourceRoot":"","sources":["../../src/components/Placeholder.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAG9C,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAC9C,OAAO,EAAE,kBAAkB,EAAE,MAAM,QAAQ,CAAA;AAoB3C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,SAAS,EAAS,EAAE,EAAE;IACtH,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,GAAG,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,YACnF,MAAC,WAAW,IAAC,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,EAAE,EAAE,cAAc,EAAC,QAAQ,EAAC,aAAa,EAAC,QAAQ,EAAC,UAAU,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,aACrG,GAAG,IAAI,KAAC,kBAAkB,KAAG,EAE7B,KAAK,IAAI,KAAC,IAAI,IAAC,EAAE,EAAC,OAAO,EAAC,UAAU,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,EAAE,EAAE,CAAC,YACpD,KAAK,GACD,EAEP,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,YACpD,WAAW,GACP,EAEN,MAAM,IACK,GACT,CACR,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,uBAAuB,GAAG,CAAC,EACtC,KAAK,EACL,WAAW,EACX,cAAc,EACd,GAAG,EACH,MAAM,EACN,SAAS,EACT,IAAI,GAAG,IAAI,EACX,EAAE,EACF,MAAM,EACN,KAAK,EACL,SAAS,EACT,OAAO,GACW,EAAE,EAAE;IACtB,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,KAAC,IAAI,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,EAAE,EAAE,aAAa,EAAE,GAAG,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS,YAC5G,MAAC,WAAW,IAAC,EAAE,EAAE,IAAI,EAAE,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,QAAQ,EAAC,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,EAAE,aAClG,GAAG,IAAI,KAAC,kBAAkB,KAAG,EAE9B,MAAC,GAAG,eACD,KAAK,IAAI,KAAC,IAAI,IAAC,EAAE,EAAE,OAAO,EAAE,UAAU,EAAC,IAAI,EAAC,EAAE,EAAC,GAAG,eAAW,WAAW,YACtE,KAAK,GACD,EAEP,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,YACpD,WAAW,GACP,EAEP,KAAC,IAAI,IAAC,EAAE,EAAC,GAAG,EAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,YACpD,cAAc,GACV,EAEN,MAAM,IACH,IACM,GACT,CACR,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"Placeholder.js","sourceRoot":"","sources":["../../src/components/Placeholder.tsx"],"names":[],"mappings":"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"}

package/dist/components/Select/CreatableSelect.d.ts

@@ -9,7 +9,9 @@ export interface CreatableSelectProps {
     options?: CreatableSelectOptionType[];
     className?: string;
     value?: string | string[];
-    onChange?: (newValue: CreatableValueType) => void;
+    inputValue?: CreatableValueType;
+    onChange: (newValue: CreatableValueType) => void;
+    onCreateOption?: (newValue: string) => void;
 }
 export declare const CreatableSelect: FC<CreatableSelectProps>;
 //# sourceMappingURL=CreatableSelect.d.ts.map

package/dist/components/Select/CreatableSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreatableSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/CreatableSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAuB,MAAM,OAAO,CAAA;AAO/C,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAEvE,MAAM,WAAW,oBAAoB;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACnD;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAoKpD,CAAA"}
+{"version":3,"file":"CreatableSelect.d.ts","sourceRoot":"","sources":["../../../src/components/Select/CreatableSelect.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAO1B,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAA;AAEvE,MAAM,WAAW,oBAAoB;IACnC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAC1B,UAAU,CAAC,EAAE,kBAAkB,CAAC;IAChC,QAAQ,EAAE,CAAC,QAAQ,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,cAAc,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC7C;AAED,eAAO,MAAM,eAAe,EAAE,EAAE,CAAC,oBAAoB,CAwHpD,CAAA"}

package/dist/components/Select/CreatableSelect.js

@@ -1,57 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { theme } from '@stack-spot/portal-theme';
 import { useTranslate } from '@stack-spot/portal-translate';
-import { useEffect, useState } from 'react';
 import Creatable from 'react-select/creatable';
 import { BadgeItem } from './BadgeItem.js';
 import { ClearInput } from './ClearInput.js';
 import { CloseItem } from './CloseItem.js';
 import { LabelItem } from './LabelItem.js';
-export const CreatableSelect = ({ disabled, options, value, isMulti, onChange, id, ...props }) => {
+export const CreatableSelect = ({ disabled, options, inputValue, isMulti, onChange, onCreateOption, id, ...props }) => {
     const t = useTranslate(dictionary);
-    const [inputOptions, setInputOptions] = useState(options || []);
-    const prepareValue = () => {
-        let startValue = undefined;
-        if (value) {
-            if (isMulti) {
-                const typedValue = value || [];
-                startValue = [...typedValue].map((v) => ({ label: v, value: v }));
-            }
-            else {
-                const typedValue = value;
-                startValue = { label: typedValue, value: typedValue };
-            }
-        }
-        return startValue;
-    };
-    const [inputValue, setInputValue] = useState(prepareValue());
-    useEffect(() => {
-        const newValue = prepareValue();
-        inputValue !== newValue && setInputValue(newValue);
-    }, [value]);
-    const handleCreate = (newValue) => {
-        const newOption = { label: newValue, value: newValue };
-        setInputOptions((prev) => [...prev, newOption]);
-        if (isMulti) {
-            setInputValue((prev) => {
-                const previousValue = Array.isArray(prev) ? prev : [];
-                const newInputValue = [...previousValue, newOption];
-                setTimeout(() => {
-                    onChange && onChange(newInputValue);
-                }, 100);
-                return newInputValue;
-            });
-        }
-        else {
-            setInputValue(newOption);
-            onChange && onChange(newOption);
-        }
-    };
-    const handleChange = (newValue) => {
-        setInputValue(newValue);
-        onChange && onChange(newValue);
-    };
-    return (_jsx(Creatable, { placeholder: t.typeYourOption, ...props, inputId: id, isClearable: true, isDisabled: disabled, value: inputValue, options: inputOptions, isMulti: isMulti, onChange: handleChange, onCreateOption: handleCreate, components: { MultiValueContainer: BadgeItem, MultiValueLabel: LabelItem, MultiValueRemove: CloseItem, ClearIndicator: ClearInput }, noOptionsMessage: () => (t.typeYourOption), formatCreateLabel: (value) => (value), tabSelectsValue: false, styles: {
+    return (_jsx(Creatable, { placeholder: t.typeYourOption, ...props, inputId: id, isClearable: true, isDisabled: disabled, value: inputValue, options: options, isMulti: isMulti, onChange: onChange, onCreateOption: onCreateOption, components: { MultiValueContainer: BadgeItem, MultiValueLabel: LabelItem, MultiValueRemove: CloseItem, ClearIndicator: ClearInput }, noOptionsMessage: () => (t.typeYourOption), formatCreateLabel: (value) => (value), tabSelectsValue: false, styles: {
             control: (base, state) => ({
                 ...base,
                 minHeight: '2.5rem',

package/dist/components/Select/CreatableSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreatableSelect.js","sourceRoot":"","sources":["../../../src/components/Select/CreatableSelect.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CreatableSelect.js","sourceRoot":"","sources":["../../../src/components/Select/CreatableSelect.tsx"],"names":[],"mappings":"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"}

package/dist/components/Table/HeaderItem.d.ts

@@ -0,0 +1,18 @@
+import { Flex } from '@citric/core';
+import { Props as FlexProps } from '@citric/core/dist/Flex.js';
+import React, { ReactNode } from 'react';
+export type SortTypes = 'ASC' | 'DESC' | undefined;
+interface HeaderSortProps extends FlexProps {
+    children: ReactNode | string;
+    sortType: SortTypes;
+    onSort: (sortType: SortTypes) => void;
+}
+export declare const parseParams: ({ key, sort }: {
+    key: string | undefined;
+    sort: "ASC" | "DESC" | undefined;
+}) => string | undefined;
+export declare const HeaderSort: React.FC<HeaderSortProps>;
+type FullFlexProps = Parameters<typeof Flex>[0];
+export declare const Header: React.FC<FullFlexProps>;
+export {};
+//# sourceMappingURL=HeaderItem.d.ts.map

package/dist/components/Table/HeaderItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderItem.d.ts","sourceRoot":"","sources":["../../../src/components/Table/HeaderItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAU,IAAI,EAAyB,MAAM,cAAc,CAAA;AAClE,OAAO,EAAE,KAAK,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAE3D,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,SAAS,CAAA;AAElD,UAAU,eAAgB,SAAQ,SAAS;IACzC,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,KAAK,IAAI,CAAC;CACvC;AAED,eAAO,MAAM,WAAW,GAAI,eAAe;IAAE,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IAAC,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,CAAA;CAAE,uBAC9B,CAAA;AAU1E,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiBhD,CAAA;AAED,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA;AAE/C,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAM1C,CAAA"}

package/dist/components/Table/HeaderItem.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Flex, IconBox, Text } from '@citric/core';
+import { SortAscending, SortDescending } from '@citric/icons';
+export const parseParams = ({ key, sort }) => key && sort ? `${key?.toUpperCase()}_${sort?.toUpperCase()}` : undefined;
+function next(current) {
+    switch (current) {
+        case undefined: return 'ASC';
+        case 'ASC': return 'DESC';
+        case 'DESC': return undefined;
+    }
+}
+export const HeaderSort = ({ children, sortType, onSort, ...props }) => (_jsxs(Flex, { as: Button, appearance: "text", alignItems: "center", flexWrap: "nowrap", sx: { '&:hover, &:active, &:focus': { borderColor: 'transparent' }, padding: 0 }, onClick: () => onSort(next(sortType)), ...props, children: [_jsx(Text, { appearance: "microtext1", mr: "2", colorScheme: "light.700", children: children }), _jsxs(IconBox, { colorIcon: "inverse.500", size: "xs", children: [sortType === 'ASC' && _jsx(SortAscending, {}), sortType === 'DESC' && _jsx(SortDescending, {})] })] }));
+export const Header = ({ children, ...props }) => (_jsx(Flex, { alignItems: "center", ...props, children: _jsx(Text, { appearance: "microtext1", mr: "2", colorScheme: "light.700", children: children }) }));
+//# sourceMappingURL=HeaderItem.js.map

package/dist/components/Table/HeaderItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderItem.js","sourceRoot":"","sources":["../../../src/components/Table/HeaderItem.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAU,IAAI,EAAE,MAAM,cAAc,CAAA;AAElE,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAW7D,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,EAAE,GAAG,EAAE,IAAI,EAAiE,EAAE,EAAE,CAC1G,GAAG,IAAI,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,EAAE,WAAW,EAAE,IAAI,IAAI,EAAE,WAAW,EAAE,EAAE,CAAC,CAAC,CAAC,SAAS,CAAA;AAE1E,SAAS,IAAI,CAAC,OAAkB;IAC9B,QAAQ,OAAO,EAAE,CAAC;QAChB,KAAK,SAAS,CAAC,CAAC,OAAO,KAAK,CAAA;QAC5B,KAAK,KAAK,CAAC,CAAC,OAAO,MAAM,CAAA;QACzB,KAAK,MAAM,CAAC,CAAC,OAAO,SAAS,CAAA;IAC/B,CAAC;AACH,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAA8B,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACjG,MAAC,IAAI,IACH,EAAE,EAAE,MAAM,EACV,UAAU,EAAC,MAAM,EACjB,UAAU,EAAC,QAAQ,EACnB,QAAQ,EAAC,QAAQ,EACjB,EAAE,EAAE,EAAE,4BAA4B,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,OAAO,EAAE,CAAC,EAAY,EAC1F,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,KAAM,KAAK,aAChD,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,EAAE,EAAC,GAAG,EAAC,WAAW,EAAC,WAAW,YACzD,QAAQ,GACJ,EAEP,MAAC,OAAO,IAAC,SAAS,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,aACvC,QAAQ,KAAK,KAAK,IAAI,KAAC,aAAa,KAAG,EACvC,QAAQ,KAAK,MAAM,IAAI,KAAC,cAAc,KAAG,IAClC,IACL,CACR,CAAA;AAID,MAAM,CAAC,MAAM,MAAM,GAA4B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACzE,KAAC,IAAI,IAAC,UAAU,EAAC,QAAQ,KAAK,KAAK,YACjC,KAAC,IAAI,IAAC,UAAU,EAAC,YAAY,EAAC,EAAE,EAAC,GAAG,EAAC,WAAW,EAAC,WAAW,YACzD,QAAQ,GACJ,GACF,CACR,CAAA"}

package/dist/components/Table/SettingsVerticalMenu.d.ts

@@ -0,0 +1,14 @@
+import { OneOfIconSizes } from '@citric/core';
+import { SxProperties } from '@citric/core/dist/sx.js';
+import { SelectionList } from '@stack-spot/portal-components/SelectionList';
+interface SettingsVerticalMenuProps {
+    id: string;
+    buttonAriaLabel?: string;
+    size?: OneOfIconSizes;
+    sxIconButton?: SxProperties;
+    buttonDataTestHint?: string;
+    items: React.ComponentProps<typeof SelectionList>['items'];
+}
+export declare const SettingsVerticalMenu: ({ id, buttonAriaLabel, size, buttonDataTestHint, sxIconButton, items }: SettingsVerticalMenuProps) => import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=SettingsVerticalMenu.d.ts.map

package/dist/components/Table/SettingsVerticalMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsVerticalMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Table/SettingsVerticalMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,cAAc,EAAE,MAAM,cAAc,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAGnD,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAA;AAG3E,UAAU,yBAAyB;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC;CAC5D;AAED,eAAO,MAAM,oBAAoB,GAAI,wEAMrB,yBAAyB,mDA2BxC,CAAA"}

package/dist/components/Table/SettingsVerticalMenu.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, IconBox } from '@citric/core';
+import { EllipsisVertical } from '@citric/icons';
+import { IconButton } from '@citric/ui';
+import { SelectionList } from '@stack-spot/portal-components/SelectionList';
+import { useState } from 'react';
+export const SettingsVerticalMenu = ({ id, buttonAriaLabel, size, buttonDataTestHint, sxIconButton, items = [] }) => {
+    const [visibleMenu, setVisibleMenu] = useState(false);
+    if (items?.length === 0) {
+        return null;
+    }
+    return (_jsxs(Box, { sx: { position: 'relative' }, children: [_jsx(IconButton, { role: "button", title: buttonAriaLabel, "data-test-hint": buttonDataTestHint, "aria-label": buttonAriaLabel, onClick: () => setVisibleMenu(state => !state), children: _jsx(IconBox, { size: size, sx: sxIconButton, children: _jsx(EllipsisVertical, {}) }) }), _jsx(SelectionList, { id: id, visible: visibleMenu, onHide: () => setVisibleMenu(false), style: { position: 'absolute', top: 40, right: 0, minWidth: '200px' }, items: items })] }));
+};
+//# sourceMappingURL=SettingsVerticalMenu.js.map

package/dist/components/Table/SettingsVerticalMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsVerticalMenu.js","sourceRoot":"","sources":["../../../src/components/Table/SettingsVerticalMenu.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,OAAO,EAAkB,MAAM,cAAc,CAAA;AAE3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAA;AAC3E,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAWhC,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,EAAE,EACF,eAAe,EACf,IAAI,EACJ,kBAAkB,EAClB,YAAY,EACZ,KAAK,GAAG,EAAE,EAA6B,EAAE,EAAE;IAC3C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IACrD,IAAI,KAAK,EAAE,MAAM,KAAK,CAAC,EAAE,CAAC;QACxB,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,CACL,MAAC,GAAG,IAAC,EAAE,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAC/B,KAAC,UAAU,IACT,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,eAAe,oBACN,kBAAkB,gBACtB,eAAe,EAC3B,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,YAC9C,KAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,YAAY,YACnC,KAAC,gBAAgB,KAAG,GACZ,GACC,EACb,KAAC,aAAa,IACZ,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,KAAK,CAAC,EACnC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,EACrE,KAAK,EAAE,KAAK,GACZ,IACE,CACP,CAAA;AACH,CAAC,CAAA"}

package/dist/components/Table/StyledLinkTable.d.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+export declare const StyledLinkTable: ({ children, ...props }: {
+    children: ReactNode;
+} & React.AnchorHTMLAttributes<HTMLAnchorElement>) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StyledLinkTable.d.ts.map

package/dist/components/Table/StyledLinkTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledLinkTable.d.ts","sourceRoot":"","sources":["../../../src/components/Table/StyledLinkTable.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AASjC,eAAO,MAAM,eAAe,GAAI,wBAG7B;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,GAAG,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,4CAQzE,CAAA"}

package/dist/components/Table/StyledLinkTable.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from 'styled-components';
+import { useAnchorTag } from '../../context/anchor.js';
+const StyledLink = styled.a `
+  &:hover {
+    text-decoration: underline;
+  }
+`;
+export const StyledLinkTable = ({ children, ...props }) => {
+    const Link = useAnchorTag();
+    return (_jsx(StyledLink, { as: Link, ...props, children: children }));
+};
+//# sourceMappingURL=StyledLinkTable.js.map

package/dist/components/Table/StyledLinkTable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StyledLinkTable.js","sourceRoot":"","sources":["../../../src/components/Table/StyledLinkTable.tsx"],"names":[],"mappings":";AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAEnD,MAAM,UAAU,GAAG,MAAM,CAAC,CAAC,CAAA;;;;CAI1B,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,QAAQ,EACR,GAAG,KAAK,EACgE,EAAE,EAAE;IAC5E,MAAM,IAAI,GAAG,YAAY,EAAE,CAAA;IAE3B,OAAO,CACL,KAAC,UAAU,IAAC,EAAE,EAAE,IAAI,KAAM,KAAK,YAC5B,QAAQ,GACE,CACd,CAAA;AACH,CAAC,CAAA"}

package/dist/components/Table/TableData.d.ts

@@ -0,0 +1,37 @@
+import { SxProperties } from '@citric/core/dist/sx.js';
+import { SelectionList } from '@stack-spot/portal-components/SelectionList';
+import { SortTypes } from './HeaderItem.js';
+export type TableColumnsDefault = 'name' | 'description';
+export type ColumnDefinition<T, K extends keyof T> = {
+    key: K;
+    header: string;
+    sortable?: boolean;
+    customRender?: (data: T) => JSX.Element | string | null;
+    sx?: SxProperties;
+    width?: string;
+};
+type SortDetailsType<T, K extends keyof T> = {
+    sort: K;
+    direction: SortTypes;
+    index?: number;
+};
+type TableProps<T, K extends keyof T> = {
+    data: T[];
+    columns: ColumnDefinition<T, K>[];
+    onSort?: ({ sort, direction, index }: SortDetailsType<T, K>) => void;
+    onRemove?: (data: T) => void;
+    canRemove?: (row: T) => boolean;
+    tableAppearance?: 'striped' | 'filled';
+    options?: React.ComponentProps<typeof SelectionList>['items'];
+    sxHeader?: SxProperties;
+    hasHeaderBorder?: boolean;
+    searchParamName?: string;
+    initialSortDetails?: Omit<SortDetailsType<T, K>, 'sort'>;
+    /**
+     * Accepts a react element that is rendered below the table, used mostly for pagination.
+     */
+    afterContent?: React.ReactElement;
+};
+export declare const TableData: <T, K extends keyof T>({ data, columns, onSort, onRemove, canRemove, tableAppearance, options, sxHeader, hasHeaderBorder, searchParamName, initialSortDetails, afterContent, }: TableProps<T, K>) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TableData.d.ts.map

package/dist/components/Table/TableData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableData.d.ts","sourceRoot":"","sources":["../../../src/components/Table/TableData.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAA;AAGnD,OAAO,EAAE,aAAa,EAAE,MAAM,6CAA6C,CAAA;AAM3E,OAAO,EAAc,SAAS,EAAE,MAAM,cAAc,CAAA;AAGpD,MAAM,MAAM,mBAAmB,GAAG,MAAM,GAAG,aAAa,CAAA;AAExD,MAAM,MAAM,gBAAgB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI;IACnD,GAAG,EAAE,CAAC,CAAC;IACP,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;IACxD,EAAE,CAAC,EAAE,YAAY,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAA;AAED,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI;IAC3C,IAAI,EAAE,CAAC,CAAC;IACR,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAA;AAmJD,KAAK,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI;IACtC,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,OAAO,EAAE,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;IAClC,MAAM,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC;IACrE,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,OAAO,CAAC;IAChC,eAAe,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,OAAO,CAAC,CAAC;IAC9D,QAAQ,CAAC,EAAE,YAAY,CAAC;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,kBAAkB,CAAC,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;IACzD;;OAEG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CACnC,CAAA;AAED,eAAO,MAAM,SAAS,GAAI,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,yJAa7C,UAAU,CAAC,CAAC,EAAE,CAAC,CAAC,4CAmClB,CAAA"}

package/dist/components/Table/TableData.js

@@ -0,0 +1,84 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Button, IconBox, Text } from '@citric/core';
+import { Trash } from '@citric/icons';
+import { LoadingCircular, Table, Tbody, Td, Th, Thead, Tr } from '@citric/ui';
+import { theme } from '@stack-spot/portal-theme';
+import { useTranslate } from '@stack-spot/portal-translate';
+import { useState } from 'react';
+import styled from 'styled-components';
+import { ContentValidateFilter } from '../ContentValidateFilter.js';
+import { HeaderSort } from './HeaderItem.js';
+import { SettingsVerticalMenu } from './SettingsVerticalMenu.js';
+const StyledTh = styled(Th) `
+  border-top: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+  border-bottom: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+  &:first-child {
+    border-left: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  &:last-child {
+    border-right: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+`;
+const StyledTd = styled(Td) `
+  border-radius: 0px !important;
+  
+  &:first-child {
+    border-top-left-radius: 4px !important;
+    border-bottom-left-radius: 4px !important;
+  }
+  &:last-child {
+    border-top-right-radius: 4px !important;
+    border-bottom-right-radius: 4px !important;
+  }
+`;
+const TableHeader = ({ columns, onSort, onRemove, sxTh, hasBorder, initialSortDetails }) => {
+    const [sort, setSort] = useState(initialSortDetails?.direction);
+    const [activeSort, setActiveSort] = useState(initialSortDetails?.index);
+    const Sortable = ({ sort, direction, index }) => {
+        onSort?.({ sort, direction, index });
+        setSort(direction);
+        setActiveSort(index);
+    };
+    return (_jsx(Thead, { children: _jsxs(Tr, { children: [columns.map((column, index) => column?.sortable && onSort ? (_jsx(StyledTh, { sx: sxTh, "$hasBorder": hasBorder, children: _jsx(HeaderSort, { sortType: activeSort !== index ? undefined : sort, onSort: (sortType) => Sortable?.({ sort: column.key, direction: sortType, index }), children: column.header }) }, column.key.toString())) : (_jsx(StyledTh, { sx: sxTh, "$hasBorder": hasBorder, children: _jsx(Text, { appearance: "microtext1", mr: "2", children: column.header }) }, column.key.toString()))), onRemove && _jsx(Th, {})] }) }));
+};
+function RemoveButton({ row, onRemove, canRemove }) {
+    const t = useTranslate(dictionary);
+    const [isLoading, setLoading] = useState(false);
+    if (!onRemove || (canRemove && !canRemove(row))) {
+        return null;
+    }
+    const handleRemove = async () => {
+        if (isLoading)
+            return;
+        setLoading(true);
+        try {
+            await onRemove(row);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    return (_jsx(Button, { colorScheme: "danger", onClick: handleRemove, size: "sm", children: isLoading ? _jsx(LoadingCircular, {}) : _jsxs(_Fragment, { children: [_jsx(IconBox, { size: "xs", mr: 2, colorIcon: "danger", children: _jsx(Trash, {}) }), _jsx(Text, { appearance: "microtext1", mr: "2", children: t.remove })] }) }));
+}
+const TableRows = ({ data, columns, options, onRemove, canRemove }) => {
+    const rows = data.map((row, index) => (_jsxs(Tr, { children: [columns.map((column, columnIndex) => (_jsx(StyledTd, { sx: { ...column.sx }, children: _jsxs(_Fragment, { children: [" ", column?.customRender ? column.customRender(row) : row[column.key]] }) }, columnIndex))), canRemove && _jsx(StyledTd, { children: _jsx(RemoveButton, { row: row, onRemove: onRemove, canRemove: canRemove }) }), options && _jsx(StyledTd, { children: _jsx(SettingsVerticalMenu, { id: "workflow-studio-menu", items: options, size: "xs" }) })] }, `row-${index}`)));
+    return _jsx(Tbody, { sx: { borderSpacing: '0 8px' }, children: rows });
+};
+export const TableData = ({ data, columns, onSort, onRemove, canRemove, tableAppearance = 'striped', options, sxHeader, hasHeaderBorder, searchParamName = 'search', initialSortDetails, afterContent, }) => {
+    const searchParams = new URLSearchParams(window.location.search);
+    const search = searchParams.get(searchParamName) ?? '';
+    return (_jsx(ContentValidateFilter, { listLength: data.length, searchText: search, children: !!data.length && (_jsxs(_Fragment, { children: [_jsxs(Table, { appearance: tableAppearance, sx: { mb: 5 }, children: [_jsx("colgroup", { children: columns.map((column, index) => (_jsx("col", { style: { width: column.width || 'auto' } }, index))) }), _jsx(TableHeader, { sxTh: sxHeader, columns: columns, onSort: onSort, onRemove: onRemove, hasBorder: tableAppearance === 'striped' ? false : hasHeaderBorder, initialSortDetails: initialSortDetails }), _jsx(TableRows, { data: data, columns: columns, onRemove: onRemove, canRemove: canRemove, options: options })] }), !!afterContent && afterContent] })) }));
+};
+const dictionary = {
+    en: {
+        remove: 'Remove',
+    },
+    pt: {
+        remove: 'Remover',
+    },
+};
+//# sourceMappingURL=TableData.js.map

package/dist/components/Table/TableData.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableData.js","sourceRoot":"","sources":["../../../src/components/Table/TableData.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+export { StyledLinkTable } from '../Table/StyledLinkTable.js';
+export { TableData, ColumnDefinition } from '../Table/TableData.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA"}

package/dist/components/Table/index.js

@@ -0,0 +1,3 @@
+export { StyledLinkTable } from '../Table/StyledLinkTable.js';
+export { TableData } from '../Table/TableData.js';
+//# sourceMappingURL=index.js.map

package/dist/components/Table/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Table/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAoB,MAAM,oBAAoB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-components",
-  "version": "2.16.1",
+  "version": "2.18.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -24,7 +24,9 @@
     "./Select": "./dist/components/form/Select/index.js",
     "./Stepper": "./dist/components/Stepper/index.js",
     "./FileTreeView": "./dist/components/FileTreeView/index.js",
-    "./FadingOverflow": "./dist/components/FadingOverflow.js"
+    "./FadingOverflow": "./dist/components/FadingOverflow.js",
+    "./Table": "./dist/components/Table/index.js",
+    "./ContentValidateFilter": "./dist/components/ContentValidateFilter.js"
   },
   "scripts": {
     "build": "rimraf dist && tsc && tsc-esm-fix --target='dist'",

package/src/components/ContentValidateFilter.tsx

@@ -0,0 +1,15 @@
+import { PlaceholderResourceEmptySearch } from './Placeholder'
+
+export const ContentValidateFilter = ({
+  searchText,
+  listLength,
+  children,
+}: {
+  searchText?: string,
+  listLength: number,
+  children: React.ReactNode,
+}) => {
+  if (!listLength && searchText) return <PlaceholderResourceEmptySearch />
+  return <>{children}</>
+}
+

package/src/components/Placeholder.tsx

@@ -1,3 +1,4 @@
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
 import { Box, Flex, Text } from '@citric/core'
 import { AsProp } from '@citric/core/dist/forward-ref-as'
 import { SxProperties } from '@citric/core/dist/sx'
@@ -29,18 +30,23 @@ export const Placeholder = ({ title, description, button, img, fullWidth, show =
 
   return (
     <Card sx={{ ...(fullWidth ? { w: '100%' } : {}) }} style={style} className={className}>
-      <CardContent as={Flex} py={27} justifyContent="center" flexDirection="column" alignItems="center" sx={sx}>
-        {img ?? <GenericPlaceholder />}
-
-        {title && <Text as="label" appearance="h4" mb="3" pt={5}>
-          {title}
-        </Text>}
+      <CardContent
+        as={Flex}
+        py={15}
+        sx={{ display: 'grid', gridTemplateColumns: '0.6fr 1fr', alignItems: 'center', gap: '92px', ...sx }}
+      >
+        <Box sx={{ justifySelf: 'end' }}>{img ?? <GenericPlaceholder />}</Box>
+        <Box>
+          {title && <Text as="label" appearance="h4" mb="3" pt={5}>
+            {title}
+          </Text>}
 
-        <Text mb="3" appearance="body2" colorScheme="light.700">
-          {description}
-        </Text>
+          <Text mb="3" appearance="body2" colorScheme="light.700">
+            {description}
+          </Text>
 
-        {button}
+          {button}
+        </Box>
       </CardContent>
     </Card>
   )
@@ -66,8 +72,12 @@ export const PlaceholderCallToAction = ({
 
   return (
     <Card sx={{ w: fullWidth ? '100%' : 'auto', bg: 'transparent', ...sxCard }} style={style} className={className}>
-      <CardContent as={Flex} alignItems="center" justifyContent="center" py={15} sx={{ gap: '92px', ...sx }}>
-        {img ?? <GenericPlaceholder />}
+      <CardContent
+        as={Flex}
+        py={15}
+        sx={{ display: 'grid', gridTemplateColumns: '0.6fr 1fr', alignItems: 'center', gap: '92px', ...sx }}
+      >
+        <Box sx={{ justifySelf: 'end' }}>{img ?? <GenericPlaceholder />}</Box>
 
         <Box>
           {title && <Text as={titleAs} appearance="h4" mb="3" aria-live="assertive">
@@ -88,3 +98,25 @@ export const PlaceholderCallToAction = ({
     </Card>
   )
 }
+
+
+export const PlaceholderResourceEmptySearch = ({ title, description }: Pick<Props, 'title' | 'description'>) => {
+  const t = useTranslate(dictionary)
+
+  return (
+    <PlaceholderCallToAction fullWidth={true}
+      title={title || t.title} description={description || t.description}
+    />
+  )
+}
+
+const dictionary = {
+  en: {
+    title: 'Sorry, your search did not match any results.',
+    description: 'Please, refine your search and try again.',
+  },
+  pt: {
+    title: 'Desculpe, sua busca não encontrou nenhum resultado.',
+    description: 'Por favor, refine sua busca e tente novamente.',
+  },
+} satisfies Dictionary

package/src/components/Select/CreatableSelect.tsx

@@ -1,6 +1,6 @@
 import { theme } from '@stack-spot/portal-theme'
 import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
-import { FC, useEffect, useState } from 'react'
+import { FC } from 'react'
 import { CSSObjectWithLabel } from 'react-select'
 import Creatable from 'react-select/creatable'
 import { BadgeItem } from './BadgeItem'
@@ -18,56 +18,14 @@ export interface CreatableSelectProps {
   options?: CreatableSelectOptionType[],
   className?: string,
   value?: string | string[],
-  onChange?: (newValue: CreatableValueType) => void,
+  inputValue?: CreatableValueType,
+  onChange: (newValue: CreatableValueType) => void,
+  onCreateOption?: (newValue: string) => void,
 }
 
-export const CreatableSelect: FC<CreatableSelectProps> = ({ disabled, options, value, isMulti, onChange, id, ...props }) => {
+export const CreatableSelect: FC<CreatableSelectProps> = 
+({ disabled, options, inputValue, isMulti, onChange, onCreateOption, id, ...props }) => {
   const t = useTranslate(dictionary)
-  const [inputOptions, setInputOptions] = useState(options || [])
-  const prepareValue = () => {
-    let startValue: CreatableValueType | undefined = undefined
-    if (value) {
-      if (isMulti) {
-        const typedValue = value as string[] || []
-        startValue = [...typedValue].map((v) => ({ label: v, value: v }))
-      } else {
-        const typedValue = value as string
-        startValue = { label: typedValue, value: typedValue }
-      }
-    }
-    return startValue
-  }
-
-  const [inputValue, setInputValue] = useState<CreatableValueType | undefined>(prepareValue())
-
-  useEffect(() => {
-    const newValue = prepareValue()
-    inputValue !== newValue && setInputValue(newValue)
-  }, [value])
-
-
-  const handleCreate = (newValue: string) => {
-    const newOption = { label: newValue, value: newValue }
-    setInputOptions((prev) => [...prev, newOption])
-    if (isMulti) {
-      setInputValue((prev) => {
-        const previousValue = Array.isArray(prev) ? prev : []
-        const newInputValue = [...(previousValue as CreatableSelectOptionType[]), newOption]
-        setTimeout(() => {
-          onChange && onChange(newInputValue)
-        }, 100)
-        return newInputValue
-      })
-    } else {
-      setInputValue(newOption)
-      onChange && onChange(newOption)
-    }
-  }
-
-  const handleChange = (newValue: CreatableValueType) => {
-    setInputValue(newValue)
-    onChange && onChange(newValue)
-  }
 
   return (
     <Creatable
@@ -77,10 +35,10 @@ export const CreatableSelect: FC<CreatableSelectProps> = ({ disabled, options, v
       isClearable={true}
       isDisabled={disabled}
       value={inputValue}
-      options={inputOptions}
+      options={options}
       isMulti={isMulti}
-      onChange={handleChange}
-      onCreateOption={handleCreate}
+      onChange={onChange}
+      onCreateOption={onCreateOption}
       components={{ MultiValueContainer: BadgeItem, MultiValueLabel: LabelItem, MultiValueRemove: CloseItem, ClearIndicator: ClearInput }}
       noOptionsMessage={() => (t.typeYourOption)}
       formatCreateLabel={(value) => (value)}

package/src/components/Table/HeaderItem.tsx

@@ -0,0 +1,52 @@
+import { Button, Flex, IconBox, Styles, Text } from '@citric/core'
+import { Props as FlexProps } from '@citric/core/dist/Flex'
+import { SortAscending, SortDescending } from '@citric/icons'
+import React, { ReactNode } from 'react'
+
+export type SortTypes = 'ASC' | 'DESC' | undefined
+
+interface HeaderSortProps extends FlexProps {
+  children: ReactNode | string,
+  sortType: SortTypes,
+  onSort: (sortType: SortTypes) => void,
+}
+
+export const parseParams = ({ key, sort }: { key: string | undefined, sort: 'ASC' | 'DESC' | undefined }) =>
+  key && sort ? `${key?.toUpperCase()}_${sort?.toUpperCase()}` : undefined
+
+function next(current: SortTypes) {
+  switch (current) {
+    case undefined: return 'ASC'
+    case 'ASC': return 'DESC'
+    case 'DESC': return undefined
+  }
+}
+
+export const HeaderSort: React.FC<HeaderSortProps> = ({ children, sortType, onSort, ...props }) => (
+  <Flex
+    as={Button}
+    appearance="text"
+    alignItems="center"
+    flexWrap="nowrap"
+    sx={{ '&:hover, &:active, &:focus': { borderColor: 'transparent' }, padding: 0 } as Styles}
+    onClick={() => onSort(next(sortType))} {...props}>
+    <Text appearance="microtext1" mr="2" colorScheme="light.700">
+      {children}
+    </Text>
+
+    <IconBox colorIcon="inverse.500" size="xs">
+      {sortType === 'ASC' && <SortAscending />}
+      {sortType === 'DESC' && <SortDescending />}
+    </IconBox>
+  </Flex>
+)
+
+type FullFlexProps = Parameters<typeof Flex>[0]
+
+export const Header: React.FC<FullFlexProps> = ({ children, ...props }) => (
+  <Flex alignItems="center" {...props}>
+    <Text appearance="microtext1" mr="2" colorScheme="light.700">
+      {children}
+    </Text>
+  </Flex>
+)

package/src/components/Table/SettingsVerticalMenu.tsx

@@ -0,0 +1,50 @@
+import { Box, IconBox, OneOfIconSizes } from '@citric/core'
+import { SxProperties } from '@citric/core/dist/sx'
+import { EllipsisVertical } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { useState } from 'react'
+
+interface SettingsVerticalMenuProps {
+  id: string,
+  buttonAriaLabel?: string,
+  size?: OneOfIconSizes,
+  sxIconButton?: SxProperties,
+  buttonDataTestHint?: string,
+  items: React.ComponentProps<typeof SelectionList>['items'],
+}
+
+export const SettingsVerticalMenu = ({ 
+  id, 
+  buttonAriaLabel, 
+  size, 
+  buttonDataTestHint, 
+  sxIconButton, 
+  items = [] }: SettingsVerticalMenuProps) => {
+  const [visibleMenu, setVisibleMenu] = useState(false)
+  if (items?.length === 0) {
+    return null
+  }
+
+  return (
+    <Box sx={{ position: 'relative' }}>
+      <IconButton 
+        role="button"
+        title={buttonAriaLabel} 
+        data-test-hint={buttonDataTestHint} 
+        aria-label={buttonAriaLabel} 
+        onClick={() => setVisibleMenu(state => !state)} >
+        <IconBox size={size} sx={sxIconButton}>
+          <EllipsisVertical />
+        </IconBox>
+      </IconButton>
+      <SelectionList
+        id={id}
+        visible={visibleMenu}
+        onHide={() => setVisibleMenu(false)}
+        style={{ position: 'absolute', top: 40, right: 0, minWidth: '200px' }}
+        items={items}
+      />
+    </Box>
+  )
+}

package/src/components/Table/StyledLinkTable.tsx

@@ -0,0 +1,22 @@
+import styled from 'styled-components'
+import { ReactNode } from 'react'
+import { useAnchorTag } from '../../context/anchor'
+
+const StyledLink = styled.a`
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+export const StyledLinkTable = ({
+  children,
+  ...props
+}: { children: ReactNode } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  const Link = useAnchorTag()
+
+  return (
+    <StyledLink as={Link} {...props}>
+      {children}
+    </StyledLink>
+  )
+}

package/src/components/Table/TableData.tsx

@@ -0,0 +1,251 @@
+import { Button, IconBox, Text } from '@citric/core'
+import { SxProperties } from '@citric/core/dist/sx'
+import { Trash } from '@citric/icons'
+import { LoadingCircular, Table, Tbody, Td, Th, Thead, Tr } from '@citric/ui'
+import { SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { theme } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { useState } from 'react'
+import styled from 'styled-components'
+import { ContentValidateFilter } from '../ContentValidateFilter'
+import { HeaderSort, SortTypes } from './HeaderItem'
+import { SettingsVerticalMenu } from './SettingsVerticalMenu'
+
+export type TableColumnsDefault = 'name' | 'description'
+
+export type ColumnDefinition<T, K extends keyof T> = {
+  key: K,
+  header: string,
+  sortable?: boolean,
+  customRender?: (data: T) => JSX.Element | string | null,
+  sx?: SxProperties,
+  width?: string,
+}
+
+type SortDetailsType<T, K extends keyof T> = {
+  sort: K,
+  direction: SortTypes,
+  index?: number,
+}
+
+type TableHeaderProps<T, K extends keyof T> = {
+  columns: ColumnDefinition<T, K>[],
+  onSort?: ({ sort, direction, index }: SortDetailsType<T, K>) => void,
+  onRemove?: (row: T) => void,
+  sxTh?: SxProperties,
+  hasBorder?: boolean,
+  initialSortDetails?: Omit<SortDetailsType<T, K>, 'sort'>,
+}
+
+const StyledTh = styled(Th)<{ $hasBorder?: boolean }>`
+  border-top: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+  border-bottom: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+  &:first-child {
+    border-left: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+  }
+  &:last-child {
+    border-right: ${({ $hasBorder }) => ($hasBorder ? `1px solid ${theme.color.light[400]}` : '')};
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+  }
+`
+
+const StyledTd = styled(Td)<{ $hasBorder?: boolean }>`
+  border-radius: 0px !important;
+  
+  &:first-child {
+    border-top-left-radius: 4px !important;
+    border-bottom-left-radius: 4px !important;
+  }
+  &:last-child {
+    border-top-right-radius: 4px !important;
+    border-bottom-right-radius: 4px !important;
+  }
+`
+
+const TableHeader = <T, K extends keyof T>({ columns, onSort, onRemove, sxTh, hasBorder, initialSortDetails }: TableHeaderProps<T, K>) => {
+  const [sort, setSort] = useState<SortTypes>(initialSortDetails?.direction)
+  const [activeSort, setActiveSort] = useState<number | undefined>(initialSortDetails?.index)
+
+  const Sortable = ({ sort, direction, index }: { sort: K, direction: SortTypes, index: number }) => {
+    onSort?.({ sort, direction, index })
+    setSort(direction)
+    setActiveSort(index)
+  }
+
+  return (
+    <Thead>
+      <Tr>
+        {columns.map((column, index) => column?.sortable && onSort ? (
+          <StyledTh key={column.key.toString()} sx={sxTh} $hasBorder={hasBorder}>
+            <HeaderSort
+              sortType={activeSort !== index ? undefined : sort}
+              onSort={(sortType) => Sortable?.({ sort: column.key, direction: sortType, index })}
+            >
+              {column.header}
+            </HeaderSort>
+          </StyledTh>
+        ) : (
+          <StyledTh key={column.key.toString()} sx={sxTh} $hasBorder={hasBorder}>
+            <Text appearance="microtext1" mr="2">
+              {column.header}
+            </Text>
+          </StyledTh>
+        ))}
+        {onRemove && <Th />}
+      </Tr>
+    </Thead>
+  )
+}
+
+type TableRowsProps<T, K extends keyof T> = {
+  data: T[],
+  columns: ColumnDefinition<T, K>[],
+  onRemove?: (row: T) => void,
+  canRemove?: (row: T) => boolean,
+  options?: React.ComponentProps<typeof SelectionList>['items'],
+  onClickRow?: (data: T) => void,
+}
+
+interface RemoveButtonProps<T> {
+  row: T,
+  onRemove?: (row: T) => void,
+  canRemove?: (row: T) => boolean,
+}
+
+function RemoveButton<T>({ row, onRemove, canRemove }: RemoveButtonProps<T>) {
+  const t = useTranslate(dictionary)
+  const [isLoading, setLoading] = useState(false)
+
+  if (!onRemove || (canRemove && !canRemove(row))) {
+    return null
+  }
+
+  const handleRemove = async () => {
+    if (isLoading) return
+    setLoading(true)
+    try {
+      await onRemove(row)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Button colorScheme="danger" onClick={handleRemove} size="sm">
+      {isLoading ? <LoadingCircular/> : <>
+        <IconBox size="xs" mr={2} colorIcon="danger">
+          <Trash />
+        </IconBox><Text appearance="microtext1" mr="2">
+          {t.remove}
+        </Text>
+      </>}
+    </Button>
+  )
+}
+
+const TableRows = <T, K extends keyof T>({ data, columns, options, onRemove, canRemove }: TableRowsProps<T, K>) => {
+  const rows = data.map((row, index) => (
+    <Tr key={`row-${index}`}>
+      {columns.map((column, columnIndex) => (
+        <StyledTd
+          key={columnIndex}
+          sx={{ ...column.sx }}>
+          <> {column?.customRender ? column.customRender(row) : row[column.key]}</>
+        </StyledTd>
+      ))}
+
+      {canRemove && <StyledTd>
+        <RemoveButton row={row} onRemove={onRemove} canRemove={canRemove} />
+      </StyledTd>}
+      {options && <StyledTd>
+        <SettingsVerticalMenu
+          id="workflow-studio-menu"
+          items={options}
+          size="xs"
+        />
+      </StyledTd>}
+    </Tr>
+  ))
+
+  return <Tbody sx={{ borderSpacing: '0 8px' }}>{rows}</Tbody>
+}
+
+type TableProps<T, K extends keyof T> = {
+  data: T[],
+  columns: ColumnDefinition<T, K>[],
+  onSort?: ({ sort, direction, index }: SortDetailsType<T, K>) => void,
+  onRemove?: (data: T) => void,
+  canRemove?: (row: T) => boolean,
+  tableAppearance?: 'striped' | 'filled',
+  options?: React.ComponentProps<typeof SelectionList>['items'],
+  sxHeader?: SxProperties,
+  hasHeaderBorder?: boolean,
+  searchParamName?: string,
+  initialSortDetails?: Omit<SortDetailsType<T, K>, 'sort'>,
+  /**
+   * Accepts a react element that is rendered below the table, used mostly for pagination.
+   */
+  afterContent?: React.ReactElement,
+}
+
+export const TableData = <T, K extends keyof T>({
+  data,
+  columns,
+  onSort,
+  onRemove,
+  canRemove,
+  tableAppearance = 'striped',
+  options,
+  sxHeader,
+  hasHeaderBorder,
+  searchParamName = 'search',
+  initialSortDetails,
+  afterContent,
+}: TableProps<T, K>) => {
+  const searchParams = new URLSearchParams(window.location.search)
+  const search = searchParams.get(searchParamName) ?? ''
+
+  return (
+    <ContentValidateFilter listLength={data.length} searchText={search}>
+      {!!data.length && (
+        <>
+          <Table appearance={tableAppearance} sx={{ mb: 5 }}>
+            <colgroup>
+              {columns.map((column, index) => (
+                <col key={index} style={{ width: column.width || 'auto' }} />
+              ))}
+            </colgroup>
+            <TableHeader
+              sxTh={sxHeader}
+              columns={columns}
+              onSort={onSort}
+              onRemove={onRemove}
+              hasBorder={tableAppearance === 'striped' ? false : hasHeaderBorder}
+              initialSortDetails={initialSortDetails}
+            />
+            <TableRows
+              data={data}
+              columns={columns}
+              onRemove={onRemove}
+              canRemove={canRemove}
+              options={options}
+            />
+          </Table>
+          {!!afterContent && afterContent}
+        </>
+      )}
+    </ContentValidateFilter>
+  )
+}
+
+const dictionary = {
+  en: {
+    remove: 'Remove',
+  },
+  pt: {
+    remove: 'Remover',
+  },
+}

package/src/components/Table/index.tsx

@@ -0,0 +1,2 @@
+export { StyledLinkTable } from '../Table/StyledLinkTable'
+export { TableData, ColumnDefinition } from '../Table/TableData'

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../../tsconfig",
   "compilerOptions": {
+    "rootDir": "src", 
     "module": "ESNext",
     "outDir": "dist"
   },