react-restyle-components 0.2.24 → 0.2.25

package/lib/package.json

@@ -78,6 +78,8 @@
     "@svgr/webpack": "^8.1.0",
     "@tailwindcss/forms": "^0.5.9",
     "@testing-library/react": "^16.0.1",
+    "@vitest/coverage-c8": "^0.31.4",
+    "@vitest/ui": "^0.31.4",
     "autoprefixer": "^10.4.19",
     "copyfiles": "^2.4.1",
     "craco-alias": "^3.0.1",
@@ -87,8 +89,6 @@
     "gh-pages": "^3.2.3",
     "husky": "^7.0.4",
     "jest": "^29.7.0",
-    "@vitest/coverage-c8": "^0.31.4",
-    "@vitest/ui": "^0.31.4",
     "lint-staged": "^12.4.0",
     "postcss-loader": "^8.1.1",
     "prettier": "^3.3.3",
@@ -100,9 +100,9 @@
     "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.14",
     "ts-jest": "^29.2.5",
-    "webpack": "^5.72.0",
     "vitest": "^0.31.4",
-    "vitest-dom": "^0.1.0"
+    "vitest-dom": "^0.1.0",
+    "webpack": "^5.72.0"
   },
   "eslintConfig": {
     "extends": [

package/lib/src/App.js

@@ -1,10 +1,10 @@
 import React, { useState } from 'react';
 import './App.css';
-import { ColorPickerModal, PdfMedium, Tab, Tabs, } from './core-components';
+import { ColorPickerModal, PdfMedium, Tab, Tabs, Button, } from './core-components';
 function App() {
     const [color, setColor] = useState('#aabbcc');
     return (React.createElement("div", { className: "flex flex-col gap-4 p-4" },
-        React.createElement("p", { style: { margin: '0 0 10px 0' } }, "Autocomplete Comp."),
+        React.createElement(Button, null, "Title"),
         React.createElement(Tabs, { options: [
                 { title: 'Work History', icon: 'FaHistory' },
                 { title: 'Book Order', icon: 'FaBook' },

package/lib/src/core-components/atoms/button/Button.stories.d.ts

@@ -13,13 +13,8 @@ declare const meta: {
         };
     };
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react/dist/types-a5624094").R, {
+        variant?: "solid" | "outline" | undefined;
         tooltip?: string | undefined;
-        level?: "primary" | "secondary" | undefined;
-        variant?: "brand" | "danger" | "accent" | "neutral" | undefined;
-        scale?: "s" | "xl" | "l" | "m" | "xs" | "xxs" | undefined;
-        iconOnly?: boolean | undefined;
-        focus?: "none" | "visible" | "focus" | undefined;
-        loading?: boolean | undefined;
         className?: string | undefined;
         disabled?: boolean | undefined;
         form?: string | undefined;
@@ -307,14 +302,4 @@ type Story = StoryObj<typeof meta>;
  * However the Design System uses a different size for icons if they are the _only_ thing in the button.
  * To handle this we add the prop `iconOnly`.
  */
-export declare const IconOnly: Story;
-export declare const TextOnly: Story;
-/**
- * The Button doesn't technically have any controls to position the icon. The Button can accept any content as its children, so if you want to add an icon at the end of text, you simply add both as children in that order:
- */
-export declare const TextWithIconAtEnd: Story;
-/**
- * Or to put it at the start you just... put it at the start:
- */
-export declare const TextWithIconAtStart: Story;
-export declare const Loading: Story;
+export declare const Basic: Story;

package/lib/src/core-components/atoms/button/Button.stories.js

@@ -1,8 +1,6 @@
 import React from 'react';
-import Attach from '../../../assets/icons/attach.svg';
 import { TooltipProvider } from '../tooltip/tooltip.component';
 import { Button } from './button.component';
-import { useState } from 'react';
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
 const meta = {
     title: 'Design System/Atoms/Button',
@@ -24,43 +22,8 @@ export default meta;
  * However the Design System uses a different size for icons if they are the _only_ thing in the button.
  * To handle this we add the prop `iconOnly`.
  */
-export const IconOnly = {
-    render: (args) => (React.createElement(Button, { ...args },
-        React.createElement(Attach, null))),
-    args: {
-        iconOnly: true,
-    },
-};
-export const TextOnly = {
-    args: {
-        children: 'Button',
-    },
-};
-/**
- * The Button doesn't technically have any controls to position the icon. The Button can accept any content as its children, so if you want to add an icon at the end of text, you simply add both as children in that order:
- */
-export const TextWithIconAtEnd = {
-    render: (args) => (React.createElement(Button, { ...args },
-        "Attach ",
-        React.createElement(Attach, null))),
-};
-/**
- * Or to put it at the start you just... put it at the start:
- */
-export const TextWithIconAtStart = {
-    render: (args) => (React.createElement(Button, { ...args },
-        React.createElement(Attach, null),
-        " Attach")),
-};
-export const Loading = {
+export const Basic = {
     render: function Render(args) {
-        const [loading, setLoading] = useState(false);
-        const handleClick = () => {
-            setLoading(true);
-            setTimeout(() => {
-                setLoading(false);
-            }, 2000);
-        };
-        return (React.createElement(Button, { ...args, loading: loading, onClick: handleClick }, args.children || 'Slow loading button'));
+        return React.createElement(Button, { ...args }, "Submit");
     },
 };

package/lib/src/core-components/atoms/button/Button.types.d.ts

@@ -1,20 +1,9 @@
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 import { LinkProps } from 'react-router-dom';
 export type ButtonProps = {
+    variant?: 'solid' | 'outline';
     /** Optional tooltip content */
     tooltip?: string;
-    /** What level of button? Defaults to 'primary' */
-    level?: 'primary' | 'secondary';
-    /** What variant of button? Defaults to 'brand' */
-    variant?: 'brand' | 'danger' | 'accent' | 'neutral';
-    /** What size of button? Defaults to 'm' */
-    scale?: 'xl' | 'l' | 'm' | 's' | 'xs' | 'xxs';
-    /** Does the button only include a single SVG? If so we will tweak styles. Defaults to false. */
-    iconOnly?: boolean;
-    /** What kind of focus of button? Defaults to 'visible' */
-    focus?: 'visible' | 'focus' | 'none';
-    /** should we replace content with a loading indicator */
-    loading?: boolean;
     /** ClassName to add so you can add additional styling */
     className?: string;
 };

package/lib/src/core-components/atoms/button/button.component.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ButtonProps } from './Button.types';
+import '../../../tc.css';
 /**
  * It's a `<button>button</button>`. Pass in regular button props such as onClick as well as any of the props defined here.
  */

package/lib/src/core-components/atoms/button/button.component.js

@@ -1,16 +1,17 @@
 import React from 'react';
 import { forwardRef } from 'react';
-import clsx from 'clsx';
-import s from './button.module.css';
 import { Tooltip } from '../tooltip/tooltip.component';
+import '../../../tc.css';
 /**
  * It's a `<button>button</button>`. Pass in regular button props such as onClick as well as any of the props defined here.
  */
-export const Button = forwardRef(({ tooltip, disabled = false, type = 'button', className, level = 'primary', variant = 'brand', scale = 'm', iconOnly = false, children, focus = 'visible', loading = false, ...args }, ref) => {
-    const buttonClasses = clsx(s.reset_button, s.button, s[`button-level-${level}`], s[`button-theme-${variant}`], s[`button-size-${scale}`], iconOnly && s[`button-icon-only`], focus === 'focus' && [s.focus], focus === 'visible' && s[`focus-visible`], loading && s.loading, className);
-    const button = (React.createElement("button", { ref: ref, ...args, className: buttonClasses, type: type, disabled: disabled }, children));
+export const Button = forwardRef(({ variant = 'solid', tooltip, disabled = false, type = 'button', className, children, ...args }, ref) => {
+    const buttonColorClass = variant === 'solid'
+        ? 'text-white bg-[#007BFF] hover:bg-[#007BFF] hover:shadow-lg text-white'
+        : 'dark:text-white  text-black border border-gray-400 hover:shadow-lg';
+    const button = (React.createElement("button", { ref: ref, ...args, className: `${className} rounded-100px px-3 py-1  text-md ${buttonColorClass} pt-2 pb-2 font-nunitoSansRegular ${disabled ? 'opacity-50' : 'opacity-100'}`, type: type, disabled: disabled }, children));
     if (tooltip) {
-        return (React.createElement(Tooltip, { content: tooltip, padding: "s" }, button));
+        return React.createElement(Tooltip, { content: tooltip }, button);
     }
     else {
         return button;

package/lib/src/core-components/atoms/button/buttonGroup/ButtonGroup.stories.d.ts

@@ -34,20 +34,3 @@ export declare const Basic: Story;
  * If only a single `Button` is passed in, it will be visually the same as not wrapping in a `ButtonGroup`.
  */
 export declare const BasicOneButton: Story;
-/**
- * To creat a split button you would add a `DropdownMenu` as the last child. Its trigger should be a `Button`.
- */
-/**
- * ButtonGroups can be passed `orientation="vertical"` to stack buttons vertically.
- */
-export declare const Vertical: Story;
-/**
- * Vertical ButtonGroups can also contain a `DropdownMenu`.
- */
-/**
- * ButtonGroups also work with LinkButtons and ToggleButtons.
- *
- * However ToggleButton styling is not currently ideal as the divider is hard to see.
- * Also note that ButtonGroup with ToggleButtons is not the same as a ToggleGroup. The former will allow multiple buttons to be active at once, whereas the latter will only allow one button to be active at a time.
- */
-export declare const FillModes: Story;

package/lib/src/core-components/atoms/button/buttonGroup/ButtonGroup.stories.js

@@ -27,9 +27,9 @@ export default meta;
 export const Basic = {
     args: {
         children: (React.createElement(React.Fragment, null,
-            React.createElement(Button, { scale: "s" }, "Button 1"),
-            React.createElement(Button, { scale: "s" }, "Button 2"),
-            React.createElement(Button, { scale: "s" }, "Button 3"))),
+            React.createElement(Button, null, "Button 1"),
+            React.createElement(Button, null, "Button 2"),
+            React.createElement(Button, null, "Button 3"))),
     },
 };
 /**
@@ -38,234 +38,6 @@ export const Basic = {
 export const BasicOneButton = {
     args: {
         children: (React.createElement(React.Fragment, null,
-            React.createElement(Button, { scale: "s" }, "Button 1"))),
+            React.createElement(Button, null, "Button 1"))),
     },
 };
-/**
- * To creat a split button you would add a `DropdownMenu` as the last child. Its trigger should be a `Button`.
- */
-// export const SplitButton: Story = {
-//   args: {
-//     children: (
-//       <>
-//         <Button level="primary" scale="xs" variant="neutral">
-//           Button 1
-//         </Button>
-//         <DropdownMenu
-//           align="end"
-//           sideOffset={2}
-//           trigger={
-//             <Button
-//               level="primary"
-//               iconOnly={true}
-//               scale="xs"
-//               variant="neutral"
-//             >
-//               👇
-//             </Button>
-//           }
-//         >
-//           <DropdownMenuSection divider="none">
-//             <DropdownMenuButton
-//               onClick={() => {
-//                 // noop
-//               }}
-//             >
-//               Item 1
-//             </DropdownMenuButton>
-//             <DropdownMenuButton
-//               onClick={() => {
-//                 // noop
-//               }}
-//             >
-//               Item 2
-//             </DropdownMenuButton>
-//             <DropdownMenuButton
-//               onClick={() => {
-//                 // noop
-//               }}
-//             >
-//               Item 3
-//             </DropdownMenuButton>
-//           </DropdownMenuSection>
-//         </DropdownMenu>
-//       </>
-//     ),
-//   },
-// };
-/**
- * ButtonGroups can be passed `orientation="vertical"` to stack buttons vertically.
- */
-export const Vertical = {
-    args: {
-        children: (React.createElement(React.Fragment, null,
-            React.createElement(Button, { scale: "s" }, "Button 1"),
-            React.createElement(Button, { scale: "s" }, "Button 2"),
-            React.createElement(Button, { scale: "s" }, "Button 3"))),
-        orientation: 'vertical',
-    },
-};
-/**
- * Vertical ButtonGroups can also contain a `DropdownMenu`.
- */
-// export const VerticalWithDropdown: Story = {
-//   args: {
-//     children: (
-//       <>
-//         <Button scale="s">Button 1</Button>
-//         <DropdownMenu
-//           side="right"
-//           trigger={
-//             <Button scale="s" variant="accent">
-//               Open 👉
-//             </Button>
-//           }
-//         >
-//           <DropdownMenuSection divider="none">
-//             <DropdownMenuButton
-//               onClick={() => {
-//                 // noop
-//               }}
-//             >
-//               Item 1
-//             </DropdownMenuButton>
-//             <DropdownMenuButton
-//               onClick={() => {
-//                 // noop
-//               }}
-//             >
-//               Item 2
-//             </DropdownMenuButton>
-//             <DropdownMenuButton
-//               onClick={() => {
-//                 // noop
-//               }}
-//             >
-//               Item 3
-//             </DropdownMenuButton>
-//           </DropdownMenuSection>
-//         </DropdownMenu>
-//         <Button scale="s">Button 2</Button>
-//       </>
-//     ),
-//     orientation: 'vertical',
-//   },
-// };
-/**
- * ButtonGroups also work with LinkButtons and ToggleButtons.
- *
- * However ToggleButton styling is not currently ideal as the divider is hard to see.
- * Also note that ButtonGroup with ToggleButtons is not the same as a ToggleGroup. The former will allow multiple buttons to be active at once, whereas the latter will only allow one button to be active at a time.
- */
-// export const PseudoButtons: Story = {
-//   args: {
-//     children: <></>,
-//   },
-//   render: () => (
-//     <>
-//       <ButtonGroup>
-//         <LinkButton Component={Link} to="#" scale="s">
-//           LinkButton 1
-//         </LinkButton>
-//         <LinkButton Component={Link} to="#" scale="s">
-//           LinkButton 2
-//         </LinkButton>
-//         <LinkButton Component={Link} to="#" scale="s" variant="danger">
-//           LinkButton 3
-//         </LinkButton>
-//       </ButtonGroup>
-//       <br />
-//       <ButtonGroup>
-//         <ToggleButton scale="s">ToggleButton 1</ToggleButton>
-//         <ToggleButton scale="s">ToggleButton 2</ToggleButton>
-//         <ToggleButton scale="s">ToggleButton 3</ToggleButton>
-//       </ButtonGroup>
-//     </>
-//   ),
-// };
-export const FillModes = {
-    args: {
-        children: React.createElement(React.Fragment, null),
-    },
-    render: () => (React.createElement(React.Fragment, null,
-        React.createElement("h1", null, "Hug"),
-        React.createElement("p", null, "By default the ToggleGroup will hug its contents vertically and horizontally. In most cases this is what you will want as the Design System mostly uses this approach."),
-        React.createElement("div", { style: {
-                width: '400px',
-                height: '200px',
-                display: 'grid',
-                background: '#eee',
-            } },
-            React.createElement(ButtonGroup, null,
-                React.createElement(Button, { scale: "s" }, "Button 1"),
-                React.createElement(Button, { scale: "s" }, "Button 2"),
-                React.createElement(Button, { scale: "s" }, "Button 3"))),
-        React.createElement("h1", null, "Orientation: horizontal"),
-        React.createElement("p", null, "But you can make it fill its parent and stretch out its children. Note that only the minimum amount of styles have been added. It is likely you will need to further customize your Buttons using className to suit your use case."),
-        React.createElement("div", { style: {
-                width: '400px',
-                height: '200px',
-                display: 'grid',
-                background: '#eee',
-            } },
-            React.createElement(ButtonGroup, { horizontalSizing: "fill" },
-                React.createElement(Button, { scale: "s" }, "Button 1"),
-                React.createElement(Button, { scale: "s" }, "Button 2"),
-                React.createElement(Button, { scale: "s" }, "Button 3"))),
-        React.createElement("p", null, "Or vertically"),
-        React.createElement("div", { style: {
-                width: '400px',
-                height: '200px',
-                display: 'grid',
-                background: '#eee',
-            } },
-            React.createElement(ButtonGroup, { verticalSizing: "fill" },
-                React.createElement(Button, { scale: "s" }, "Button 1"),
-                React.createElement(Button, { scale: "s" }, "Button 2"),
-                React.createElement(Button, { scale: "s" }, "Button 3"))),
-        React.createElement("p", null, "Or both"),
-        React.createElement("div", { style: {
-                width: '400px',
-                height: '200px',
-                display: 'grid',
-                background: '#eee',
-            } },
-            React.createElement(ButtonGroup, { verticalSizing: "fill", horizontalSizing: "fill" },
-                React.createElement(Button, { scale: "s" }, "Button 1"),
-                React.createElement(Button, { scale: "s" }, "Button 2"),
-                React.createElement(Button, { scale: "s" }, "Button 3"))),
-        React.createElement("h1", null, "Orientation: vertical"),
-        React.createElement("p", null, "These also work vertically. Here is horizontal fill"),
-        React.createElement("div", { style: {
-                width: '400px',
-                height: '200px',
-                display: 'grid',
-                background: '#eee',
-            } },
-            React.createElement(ButtonGroup, { orientation: "vertical", horizontalSizing: "fill" },
-                React.createElement(Button, { scale: "s" }, "Button 1"),
-                React.createElement(Button, { scale: "s" }, "Button 2"),
-                React.createElement(Button, { scale: "s" }, "Button 3"))),
-        React.createElement("p", null, "vertical"),
-        React.createElement("div", { style: {
-                width: '400px',
-                height: '200px',
-                display: 'grid',
-                background: '#eee',
-            } },
-            React.createElement(ButtonGroup, { orientation: "vertical", verticalSizing: "fill" },
-                React.createElement(Button, { scale: "s" }, "Button 1"),
-                React.createElement(Button, { scale: "s" }, "Button 2"),
-                React.createElement(Button, { scale: "s" }, "Button 3"))),
-        React.createElement("p", null, "and both"),
-        React.createElement("div", { style: {
-                width: '400px',
-                height: '200px',
-                display: 'grid',
-                background: '#eee',
-            } },
-            React.createElement(ButtonGroup, { orientation: "vertical", verticalSizing: "fill", horizontalSizing: "fill" },
-                React.createElement(Button, { scale: "s" }, "Button 1"),
-                React.createElement(Button, { scale: "s" }, "Button 2"),
-                React.createElement(Button, { scale: "s" }, "Button 3"))))),
-};

package/lib/src/core-components/atoms/button/buttonGroup/buttonGroup.component.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ReactNode } from 'react';
+import '../../../tc.css';
 export declare const ButtonGroup: ({ children, orientation, horizontalSizing, verticalSizing, className, }: {
     children: ReactNode;
     orientation?: "horizontal" | "vertical" | undefined;

package/lib/src/core-components/atoms/button/buttonGroup/buttonGroup.component.js

@@ -1,4 +1,3 @@
 import React from 'react';
-import s from '../button.module.css';
-import clsx from 'clsx';
-export const ButtonGroup = ({ children, orientation = 'horizontal', horizontalSizing = 'hug', verticalSizing = 'hug', className, }) => (React.createElement("div", { className: clsx(s.group, s[`is${orientation}`], s[`ishorizontal${horizontalSizing}`], s[`isvertical${verticalSizing}`], className) }, children));
+import '../../../tc.css';
+export const ButtonGroup = ({ children, orientation = 'horizontal', horizontalSizing = 'hug', verticalSizing = 'hug', className, }) => React.createElement("div", { className: `flex gap-2 ${className}` }, children);

package/lib/src/core-components/atoms/tooltip/Tooltip.stories.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { StoryObj } from '@storybook/react';
 declare const meta: {
     title: string;
-    component: ({ align, side, children, content, avoidCollisions, alignOffset, sideOffset, disabled, delay, padding, className, }: React.PropsWithChildren<import("./Tooltip.types").TooltipProps>) => React.JSX.Element;
+    component: ({ align, side, children, content, avoidCollisions, alignOffset, sideOffset, disabled, delay, className, }: React.PropsWithChildren<import("./Tooltip.types").TooltipProps>) => React.JSX.Element;
     tags: string[];
     parameters: {
         docs: {
@@ -11,7 +11,6 @@ declare const meta: {
     };
     decorators: ((Story: import("@storybook/csf").PartialStoryFn<import("@storybook/react/dist/types-a5624094").R, {
         className?: string | undefined;
-        padding?: "s" | "xl" | "l" | "m" | "custom" | undefined;
         delay?: number | undefined;
         side?: "top" | "right" | "bottom" | "left" | undefined;
         sideOffset?: number | undefined;

package/lib/src/core-components/atoms/tooltip/Tooltip.stories.js

@@ -56,9 +56,9 @@ export const JSXContent = {
     },
     render: () => (React.createElement("div", { style: { padding: '100px', display: 'flex', gap: '12px' } },
         React.createElement(Tooltip, { side: "top", content: React.createElement(React.Fragment, null,
-                React.createElement(Button, { variant: "accent" }, "\u2728\u2728\u2728"),
+                React.createElement(Button, { variant: "solid" }, "\u2728\u2728\u2728"),
                 ' ',
-                React.createElement(Button, { variant: "danger" }, "\u2728\u2728\u2728")) },
+                React.createElement(Button, { variant: "solid" }, "\u2728\u2728\u2728")) },
             React.createElement("span", null, "Fancy Tooltip")))),
 };
 export const JSXContentDifferentAlignments = {
@@ -72,11 +72,11 @@ export const JSXContentDifferentAlignments = {
     },
     render: () => (React.createElement("div", { style: { padding: '100px', display: 'flex', gap: '12px' } },
         React.createElement(Tooltip, { side: "top", align: "start", content: React.createElement("span", null, "Tooltip") },
-            React.createElement(Button, { variant: "danger" }, "Align Start")),
+            React.createElement(Button, { variant: "solid" }, "Align Start")),
         React.createElement(Tooltip, { side: "top", align: "center", content: React.createElement("span", null, "Tooltip") },
-            React.createElement(Button, { variant: "danger" }, "Align Center")),
+            React.createElement(Button, { variant: "solid" }, "Align Center")),
         React.createElement(Tooltip, { side: "top", align: "end", content: React.createElement("span", null, "Tooltip") },
-            React.createElement(Button, { variant: "danger" }, "Align End")))),
+            React.createElement(Button, { variant: "solid" }, "Align End")))),
 };
 // export const JsxAsTrigger: Story = {
 //   parameters: {

package/lib/src/core-components/atoms/tooltip/Tooltip.types.d.ts

@@ -2,8 +2,6 @@
 export type TooltipProps = {
     /** custom classname to pass to the tooltip element */
     className?: string;
-    /** padding within the tooltip element*/
-    padding?: 's' | 'm' | 'l' | 'xl' | 'custom';
     /** The delay (in ms) before showing the tooltip */
     delay?: number;
     /** Sets the preferred position relative to the trigger */

package/lib/src/core-components/atoms/tooltip/tooltip.component.d.ts

@@ -5,7 +5,7 @@ import { TooltipProps } from './Tooltip.types';
 /**
  *  The `Tooltip` must be nested somewhere inside the `TooltipProvider` in the component tree.
  */
-export declare const Tooltip: ({ align, side, children, content, avoidCollisions, alignOffset, sideOffset, disabled, delay, padding, className, }: PropsWithChildren<TooltipProps>) => React.JSX.Element;
+export declare const Tooltip: ({ align, side, children, content, avoidCollisions, alignOffset, sideOffset, disabled, delay, className, }: PropsWithChildren<TooltipProps>) => React.JSX.Element;
 /**
  * Wrap a UI tooltip element with TooltipProvider to give it a tooltip.
  */
@@ -14,4 +14,3 @@ export declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderP
  * Exports a tooltip body element to match the full tooltip component.
  * Useful when another library needs to be used for the tooltip trigger - eg AG-grid.
  */
-export declare const TooltipBody: ({ children, padding, }: PropsWithChildren<Pick<TooltipProps, 'padding'>>) => React.JSX.Element;

package/lib/src/core-components/atoms/tooltip/tooltip.component.js

@@ -1,18 +1,15 @@
 import React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import clsx from 'clsx';
-import s from './Tooltip.module.css';
 /**
  *  The `Tooltip` must be nested somewhere inside the `TooltipProvider` in the component tree.
  */
-export const Tooltip = ({ align = 'center', side = 'bottom', children, content, avoidCollisions = true, alignOffset = 0, sideOffset = 5, disabled = false, delay = 400, padding = 'l', className, }) => {
-    const classes = clsx(s.tooltip_content, s[`tooltip_padding_${padding}`], className);
+export const Tooltip = ({ align = 'center', side = 'bottom', children, content, avoidCollisions = true, alignOffset = 0, sideOffset = 5, disabled = false, delay = 400, className, }) => {
     const isChildrenString = typeof children === 'string';
     return (React.createElement(TooltipPrimitive.Root, { delayDuration: delay },
-        React.createElement(TooltipPrimitive.Trigger, { asChild: !isChildrenString, disabled: disabled, className: clsx({ [s.tooltip_reset_button]: isChildrenString }) }, children),
-        React.createElement(TooltipPrimitive.Portal, null, !disabled && content && (React.createElement(TooltipPrimitive.Content, { className: classes, avoidCollisions: avoidCollisions, side: side, align: align, alignOffset: alignOffset, sideOffset: sideOffset },
+        React.createElement(TooltipPrimitive.Trigger, { asChild: !isChildrenString, disabled: disabled, className: className }, children),
+        React.createElement(TooltipPrimitive.Portal, null, !disabled && content && (React.createElement(TooltipPrimitive.Content, { className: className, avoidCollisions: avoidCollisions, side: side, align: align, alignOffset: alignOffset, sideOffset: sideOffset },
             content,
-            React.createElement(TooltipPrimitive.Arrow, { className: s.tooltip_arrow }))))));
+            React.createElement(TooltipPrimitive.Arrow, { className: className }))))));
 };
 /**
  * Wrap a UI tooltip element with TooltipProvider to give it a tooltip.
@@ -22,7 +19,10 @@ export const TooltipProvider = TooltipPrimitive.Provider;
  * Exports a tooltip body element to match the full tooltip component.
  * Useful when another library needs to be used for the tooltip trigger - eg AG-grid.
  */
-export const TooltipBody = ({ children, padding = 'l', }) => {
-    const classes = clsx(s.tooltip_content, s[`tooltip_padding_${padding}`]);
-    return React.createElement("div", { className: classes }, children);
-};
+// export const TooltipBody = ({
+//   children,
+//   padding = 'l',
+// }: PropsWithChildren<Pick<TooltipProps, 'padding'>>) => {
+//   const classes = className;
+//   return <div className={classes}>{children}</div>;
+// };

package/lib/src/core-components/index.d.ts

@@ -1,8 +1,6 @@
 import '../tc.css';
 import * as Form from './atoms/form/form.component';
 export * from './atoms/button/button.component';
-export * from './atoms/button/linkButton.component';
-export * from './atoms/button/toggleButton.component';
 export * from './atoms/button/buttonGroup/buttonGroup.component';
 export * from './atoms/check-box/checkBox.component';
 export * from './atoms/date-picker/date-picker.component';

package/lib/src/core-components/index.js

@@ -1,8 +1,6 @@
 import '../tc.css';
 import * as Form from './atoms/form/form.component';
 export * from './atoms/button/button.component';
-export * from './atoms/button/linkButton.component';
-export * from './atoms/button/toggleButton.component';
 export * from './atoms/button/buttonGroup/buttonGroup.component';
 export * from './atoms/check-box/checkBox.component';
 export * from './atoms/date-picker/date-picker.component';