@crystallize/design-system 1.20.1 → 1.21.0

package/src/radio/radio.stories.tsx

@@ -14,21 +14,29 @@ export default meta;
 
 type Story = StoryObj<typeof Radio.Group>;
 
+const style = { display: 'flex', marginLeft: '0.5rem', alignItems: 'center' };
+
 export const Example: Story = {
   render: () => {
     return (
       <Radio.Group defaultValue="default">
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="default" id="example-r1" />
-          <Label htmlFor="example-r1">Default</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="example-r1">
+            Default
+          </Label>
         </div>
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="comfortable" id="example-r2" />
-          <Label htmlFor="example-r2">Comfortable</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="example-r2">
+            Comfortable
+          </Label>
         </div>
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="compact" id="example-r3" />
-          <Label htmlFor="example-r3">Compact</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="example-r3">
+            Compact
+          </Label>
         </div>
       </Radio.Group>
     );
@@ -39,17 +47,23 @@ export const Uncontrolled: Story = {
   render: () => {
     return (
       <Radio.Group defaultValue="default">
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="default" id="uncontrolled-r1" />
-          <Label htmlFor="uncontrolled-r1">Default</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="uncontrolled-r1">
+            Default
+          </Label>
         </div>
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="comfortable" id="uncontrolled-r2" />
-          <Label htmlFor="uncontrolled-r2">Comfortable</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="uncontrolled-r2">
+            Comfortable
+          </Label>
         </div>
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="compact" id="uncontrolled-r3" />
-          <Label htmlFor="uncontrolled-r3">Compact</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="uncontrolled-r3">
+            Compact
+          </Label>
         </div>
       </Radio.Group>
     );
@@ -61,17 +75,23 @@ export const Controlled: Story = {
     const [value, setValue] = useState('default');
     return (
       <Radio.Group value={value} onValueChange={v => setValue(v)}>
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="default" id="controlled-r1" />
-          <Label htmlFor="controlled-r1">Default</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="controlled-r1">
+            Default
+          </Label>
         </div>
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="comfortable" id="controlled-r2" />
-          <Label htmlFor="controlled-r2">Comfortable</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="controlled-r2">
+            Comfortable
+          </Label>
         </div>
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="compact" id="controlled-r3" />
-          <Label htmlFor="controlled-r3">Compact</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="controlled-r3">
+            Compact
+          </Label>
         </div>
       </Radio.Group>
     );
@@ -81,18 +101,24 @@ export const Controlled: Story = {
 export const Horizontal: Story = {
   render: () => {
     return (
-      <Radio.Group defaultValue="default" orientation="horizontal" className="flex space-x-6">
-        <div className="flex items-center space-x-2">
+      <Radio.Group defaultValue="default" orientation="horizontal" style={{ display: 'flex' }}>
+        <div style={style}>
           <Radio.Item value="default" id="horizontal-r1" />
-          <Label htmlFor="horizontal-r1">Default</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="horizontal-r1">
+            Default
+          </Label>
         </div>
-        <div className="flex items-center space-x-2">
+        <div style={{ ...style, margin: '0 1.5rem' }}>
           <Radio.Item value="comfortable" id="horizontal-r2" />
-          <Label htmlFor="horizontal-r2">Comfortable</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="horizontal-r2">
+            Comfortable
+          </Label>
         </div>
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="compact" id="horizontal-r3" />
-          <Label htmlFor="horizontal-r3">Compact</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="horizontal-r3">
+            Compact
+          </Label>
         </div>
       </Radio.Group>
     );
@@ -103,17 +129,23 @@ export const NoLoop: Story = {
   render: () => {
     return (
       <Radio.Group defaultValue="default" loop={false}>
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="default" id="noloop-r1" />
-          <Label htmlFor="noloop-r1">Default</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="noloop-r1">
+            Default
+          </Label>
         </div>
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="comfortable" id="noloop-r2" />
-          <Label htmlFor="noloop-r2">Comfortable</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="noloop-r2">
+            Comfortable
+          </Label>
         </div>
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="compact" id="noloop-r3" />
-          <Label htmlFor="noloop-r3">Compact</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="noloop-r3">
+            Compact
+          </Label>
         </div>
       </Radio.Group>
     );
@@ -124,17 +156,23 @@ export const Disabled: Story = {
   render: () => {
     return (
       <Radio.Group defaultValue="default">
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="default" id="disabled-r1" />
-          <Label htmlFor="disabled-r1">Default</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="disabled-r1">
+            Default
+          </Label>
         </div>
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="comfortable" id="disabled-r2" disabled />
-          <Label htmlFor="disabled-r2">Comfortable</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="disabled-r2">
+            Comfortable
+          </Label>
         </div>
-        <div className="flex items-center space-x-2">
+        <div style={style}>
           <Radio.Item value="compact" id="disabled-r3" />
-          <Label htmlFor="disabled-r3">Compact</Label>
+          <Label style={{ marginLeft: 4 }} htmlFor="disabled-r3">
+            Compact
+          </Label>
         </div>
       </Radio.Group>
     );

package/src/rich-text-editor/plugins/DraggableBlockPlugin/index.css

@@ -20,7 +20,7 @@
     width: 16px;
     height: 16px;
     opacity: 0.3;
-    background-image: url(../../images/icons/draggable-block-menu.svg);
+    background-image: url(images/icons/draggable-block-menu.svg);
   }
 }
 

package/src/rich-text-editor/plugins/FloatingLinkEditorPlugin/index.css

@@ -21,7 +21,8 @@
     @apply block overflow-hidden text-ellipsis whitespace-nowrap text-s-blue-600-300 no-underline;
 
     &:hover {
-      @apply underline;
+      /* Can not use underline - The `underline` class does not exist. If `underline` is a custom class, */
+      text-decoration-line: underline;
     }
   }
 }

package/src/rich-text-editor/plugins/ToolbarPlugin/index.css

@@ -37,6 +37,10 @@
     }
   }
 
+  &__block-format__icon {
+    @apply h-6 w-6 rounded-md border bg-[length:18px_18px] bg-center bg-no-repeat;
+  }
+
   &__toggle-icon {
     @apply h-6 w-6 border bg-[length:18px_18px] bg-center bg-no-repeat;
   }
@@ -110,7 +114,8 @@
   @apply items-center justify-between;
 
   &__dimensions {
-    @apply grid grid-cols-[1fr_1px_1fr] rounded-md border border-solid border-gray-100-800 shadow-sm;
+    @apply grid-cols-[1fr_1px_1fr] rounded-md border border-solid border-gray-100-800 shadow-sm;
+    display: grid;
 
     &__separator {
       @apply h-full bg-gray-100-800;

package/src/rich-text-editor/plugins/ToolbarPlugin/index.tsx

@@ -252,7 +252,7 @@ function BlockFormatDropDown({
           </DropdownMenu.Item>
           <DropdownMenu.Item onClick={formatCode} data-testid="toggle-block-format-code">
             <i
-              className={`icon c-rte-icon-code border w-6 h-6 rounded-md bg-no-repeat bg-center bg-[length:18px_18px] ${
+              className={`icon c-rte-icon-code c-rte-toolbar__block-format__icon ${
                 blockType === 'code' ? 'selected' : ''
               }`}
             />

package/src/rich-text-editor/rich-text-editor.css

@@ -148,7 +148,8 @@
   }
 
   .c-rte-placeholder {
-    @apply pointer-events-none absolute left-6 right-10 top-0 inline-block select-none overflow-hidden text-ellipsis whitespace-nowrap text-[14px] font-normal italic text-gray-300-600;
+    @apply pointer-events-none absolute left-6 right-10 top-0 inline-block select-none overflow-hidden text-ellipsis whitespace-nowrap text-[14px] font-normal text-gray-300-600;
+    font-style: italic;
   }
 
   @keyframes CursorBlink {

package/src/rich-text-editor/rich-text-editor.stories.tsx

@@ -13,8 +13,15 @@ const meta: Meta<typeof RichTextEditor> = {
   },
   decorators: [
     Story => (
-      <div className="bg-gray-50-900 p-10">
-        <div className="shadow-md border-red bg-elevate max-w-[1100px] mx-auto rounded-md">
+      <div style={{ backgroundColor: 'rgb(var(--c-color-gray-50-900)', padding: 40 }}>
+        <div
+          style={{
+            borderRadius: '0.375rem',
+            boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
+            maxWidth: '1100px',
+            backgroundColor: 'rgb(var(--c-color-elevate)',
+          }}
+        >
           <Story />
         </div>
       </div>
@@ -470,16 +477,3 @@ export const CustomTranslation: Story = {
     },
   },
 };
-
-export const Bug: Story = {
-  args: {
-    initialData: [
-      {
-        kind: 'inline',
-        type: null,
-        textContent:
-          'Krigsårene frem mot 1814 inneholder noen av de mest dramatiske begivenhetene i både dansk og norsk historie. I denne boken finner du for første gang en samlet fremstilling av krigsårene mellom 1807 og 1814 fra et felles dansk-norsk perspektiv.Dette verket er et sentralt bidrag i markeringen av 200-årsjubileet for grunnloven og den dansk-norske skilsmissen, skrevet av en dansk og en norsk historiker. I boken forteller de om krigsbegivenhetene både til lands og til sjøs, hvordan de ble opplevd blant ulike samfunnslag fra elitene i København, Christiania og Kiel, til husmenn i Østerdalen, bønder på Lolland-Falster og småhandelsfolk i Slesvig-Holstein.1814 var det moderne Norges fødsel. Norge ble selvstendig med en av Europas mest liberale grunnlover, og både selvstendigheten og grunnloven fikk leve videre selv om Norge mot slutten av året ble forent med Sverige i en løs union. Politisk sett gjorde dette Norge til en av Napoleonskrigenes vinnere, men ""mirakelåret"" 1814 ble født av et nederlag.',
-      },
-    ],
-  },
-};

package/src/rich-text-editor/tests/rich-text-editor-text-formats.test.tsx

@@ -34,7 +34,12 @@ describe('RichTextEditor text formats', () => {
 
     const user = userEvent.setup();
 
-    await user.dblClick(screen.getByText('bold'));
+    await selectTextInElement({
+      element: screen.getByText('bold'),
+      startOffset: 0,
+      endOffset: 4,
+    });
+
     await user.click(screen.getByTestId('toggle-format-bold'));
 
     expect(onChange).toHaveBeenLastCalledWith([
@@ -120,7 +125,11 @@ describe('RichTextEditor text formats', () => {
 
     const user = userEvent.setup();
 
-    await user.dblClick(screen.getByText('italic'));
+    await selectTextInElement({
+      element: screen.getByText('italic'),
+      startOffset: 0,
+      endOffset: 6,
+    });
     await user.click(screen.getByTestId('toggle-format-emphasized'));
 
     expect(onChange).toBeCalledTimes(1);

package/src/rich-text-editor/themes/CrystallizeRTEditorTheme.css

@@ -31,8 +31,7 @@
 .CrystallizeRTEditorTheme__h1 {
   font-size: 20px;
 
-  @apply m-0 mb-1 mt-2 font-medium leading-6
-    text-gray-800-100;
+  @apply m-0 mb-1 mt-2 font-medium leading-6 text-gray-800-100;
 }
 .CrystallizeRTEditorTheme__h2 {
   font-size: 19px;
@@ -44,11 +43,11 @@
 }
 .CrystallizeRTEditorTheme__h4 {
   font-size: 17px;
-  @apply m-0 mb-1 mt-2  font-medium leading-6 text-gray-800-100;
+  @apply m-0 mb-1 mt-2 font-medium leading-6 text-gray-800-100;
 }
 .CrystallizeRTEditorTheme__h5 {
   font-size: 16px;
-  @apply m-0 mb-1 mt-2  font-medium leading-6 text-gray-800-100;
+  @apply m-0 mb-1 mt-2 font-medium leading-6 text-gray-800-100;
 }
 .CrystallizeRTEditorTheme__h6 {
   font-size: 16px;
@@ -61,10 +60,10 @@
   @apply font-bold;
 }
 .CrystallizeRTEditorTheme__textItalic {
-  @apply italic;
+  font-style: italic;
 }
 .CrystallizeRTEditorTheme__textUnderline {
-  @apply underline;
+  text-decoration-line: underline;
 }
 .CrystallizeRTEditorTheme__textStrikethrough {
   @apply line-through;
@@ -97,13 +96,13 @@
   cursor: pointer;
 }
 .CrystallizeRTEditorTheme__code {
-  @apply relative my-2 mx-0 block overflow-x-auto rounded-md border border-solid border-gray-100-800 bg-purple-50-900 p-2 pl-14 text-sm leading-5;
+  @apply relative mx-0 my-2 block overflow-x-auto rounded-md border border-solid border-gray-100-800 bg-purple-50-900 p-2 pl-14 text-sm leading-5;
   font-family: Menlo, Consolas, Monaco, monospace;
   font-size: 12px;
   tab-size: 2;
 }
 .CrystallizeRTEditorTheme__code:before {
-  @apply absolute top-0 left-0 border-0 border-r-[1px] border-solid border-gray-100-800 bg-purple-100-800 p-2 text-right text-gray-400-500;
+  @apply absolute left-0 top-0 border-0 border-r-[1px] border-solid border-gray-100-800 bg-purple-100-800 p-2 text-right text-gray-400-500;
   content: attr(data-gutter);
   white-space: pre-wrap;
   min-width: 25px;
@@ -303,7 +302,7 @@
   list-style-position: inside;
 }
 .CrystallizeRTEditorTheme__listItem {
-  @apply my-0 mx-5 leading-6 text-gray-600-300;
+  @apply mx-5 my-0 leading-6 text-gray-600-300;
 }
 .CrystallizeRTEditorTheme__listItemChecked,
 .CrystallizeRTEditorTheme__listItemUnchecked {

package/src/select/select.css

@@ -23,7 +23,8 @@
 }
 
 .c-select-value {
-  @apply italic text-gray-500-400;
+  @apply text-gray-500-400;
+  font-style: italic;
 }
 
 .c-select-content {

package/src/select/select.stories.tsx

@@ -50,7 +50,7 @@ export const WithLabel = () => {
   const [value, setValue] = useState('react');
 
   return (
-    <div className="flex flex-col items-start space-y-2">
+    <div style={{ display: 'flex', marginTop: '0.5rem', flexDirection: 'column', alignItems: 'flex-start' }}>
       <Label htmlFor="with-label-c1">Select framework</Label>
       <Select.Container id="with-label-c1" value={value} onValueChange={setValue}>
         <Select.Item value="react">React</Select.Item>

package/src/slider/Slider.stories.tsx

@@ -46,7 +46,7 @@ export const Controlled: Story = {
     const [value, setValue] = useState<number[]>([25]);
 
     return (
-      <div className="space-y-6">
+      <div>
         <Slider aria-label="volume" step={1} max={100} onValueChange={setValue} value={value} />
         <pre>{value}</pre>
       </div>

package/src/stack-icon/stack-icon.css

@@ -0,0 +1,8 @@
+.c-stack-icon {
+  @apply relative inline-block leading-[0];
+
+  &__icon {
+    @apply absolute right-0 top-0 flex items-center justify-center rounded border border-solid border-white bg-gray-50-900;
+    transform: translate(33.33%, -33.33%);
+  }
+}

package/src/stack-icon/stack-icon.tsx

@@ -1,4 +1,5 @@
 import { Icon } from '../iconography';
+import './stack-icon.css';
 
 type StackIconProps = {
   type: 'create';
@@ -8,12 +9,9 @@ type StackIconProps = {
 
 export function StackIcon({ type, children, size = 18 }: StackIconProps) {
   return (
-    <span className="relative leading-[0] inline-block">
+    <span className="c-stack-icon">
       {type === 'create' && (
-        <span
-          style={{ width: size, height: size }}
-          className="absolute right-0 top-0 flex -translate-y-1/3 translate-x-1/3 items-center justify-center rounded border border-solid border-white bg-gray-50-900"
-        >
+        <span style={{ width: size, height: size }} className="c-stack-icon__icon">
           <Icon.Add width={size - 4} height={size - 4} />
         </span>
       )}

package/src/switch/Switch.stories.tsx

@@ -4,6 +4,8 @@ import type { Meta } from '@storybook/react';
 import { Switch } from '.';
 import { Label } from '../label';
 
+const style = { display: 'flex', paddingTop: '3rem', paddingBottom: '3rem', justifyContent: 'center', width: '25%' };
+
 export default {
   title: 'Components/Switch',
   parameters: {
@@ -13,7 +15,7 @@ export default {
 
 export function Example() {
   return (
-    <div className="flex w-1/4 justify-center py-12">
+    <div style={style}>
       <Switch />
     </div>
   );
@@ -21,7 +23,7 @@ export function Example() {
 
 export const Uncontrolled = () => {
   return (
-    <div className="flex w-1/4 justify-center py-12">
+    <div style={style}>
       <Switch defaultChecked={true} />
     </div>
   );
@@ -31,7 +33,7 @@ export function Controlled() {
   const [checked, setChecked] = useState(false);
 
   return (
-    <div className="flex w-1/4 justify-center py-12">
+    <div style={style}>
       <Switch checked={checked} onCheckedChange={c => setChecked(c)} />
     </div>
   );
@@ -39,7 +41,7 @@ export function Controlled() {
 
 export const WithLabel = () => {
   return (
-    <div className="flex px-14 py-12 gap-2 items-center">
+    <div style={{ display: 'flex', padding: '3rem', gap: '0.5rem', alignItems: 'center' }}>
       <Switch id="with-label-c1" defaultChecked={true} />
       <Label htmlFor="with-label-c1">Apply price list to all products</Label>
     </div>
@@ -48,14 +50,18 @@ export const WithLabel = () => {
 
 export const Disabled = () => {
   return (
-    <div className="flex flex-col px-14 py-12 gap-2 ">
-      <div className="flex mb-9 items-center space-x-2">
+    <div style={{ display: 'flex', padding: '3rem', gap: '0.5rem', alignItems: 'center' }}>
+      <div style={{ display: 'flex', marginBottom: '2.25rem', alignItems: 'center' }}>
         <Switch id="disabled-c1" defaultChecked={true} disabled />
-        <Label htmlFor="disabled-c1">Apply price list to all products</Label>
+        <Label style={{ marginLeft: 4 }} htmlFor="disabled-c1">
+          Apply price list to all products
+        </Label>
       </div>
-      <div className="flex items-center space-x-2">
+      <div style={{ display: 'flex', marginBottom: '2.25rem', alignItems: 'center' }}>
         <Switch id="disabled-c2" defaultChecked={false} disabled />
-        <Label htmlFor="disabled-c2">Apply price list to all products</Label>
+        <Label style={{ marginLeft: 4 }} htmlFor="disabled-c2">
+          Apply price list to all products
+        </Label>
       </div>
     </div>
   );

package/src/tag/tag.css

@@ -10,6 +10,10 @@
   &__remove-button {
     @apply m-0 -mr-2 cursor-pointer border-none bg-transparent p-0 text-[0];
   }
+
+  &__remove-button-text {
+    @apply sr-only;
+  }
 }
 
 .c-tag-default {

package/src/tag/tag.tsx

@@ -44,7 +44,7 @@ export function Tag({ children, className, variant, size, prepend, onRemove, ...
           }}
         >
           <Icon.Cancel width={12} height={12} />
-          <span className="sr-only">Remove</span>
+          <span className="c-tag__remove-button-text">Remove</span>
         </button>
       )}
     </div>

package/src/toast/toast.css

@@ -47,5 +47,7 @@
 }
 
 .c-toast-close {
-  @apply absolute right-1 top-1 hidden;
+  @apply absolute right-1 top-1;
+  /* Can not use hidden - The `hidden` class does not exist. If `hidden` is a custom class */
+  display: none;
 }

package/src/toast/toast.stories.tsx

@@ -15,7 +15,7 @@ export const SimpleToast: Story = {
   render: () => (
     <>
       <Toaster />
-      <div className="flex w-1/2 gap-2">
+      <div style={{ display: 'flex', gap: '0.5rem', width: '50%' }}>
         <Button onClick={() => toast({ title: 'You did something good' })}>Success toast</Button>
         <Button onClick={() => toast({ title: 'You have been warned buddy', type: 'warning' })}>Warning toast</Button>
         <Button onClick={() => toast({ title: 'There was a oopsie daisy ', type: 'error' })}>Error toast</Button>
@@ -89,7 +89,7 @@ export const TimeoutToast: Story = {
   render: () => (
     <>
       <Toaster />
-      <div className="flex w-full  gap-4">
+      <div style={{ display: 'flex', gap: '1rem', width: '100%' }}>
         <Button onClick={() => toast({ title: 'Can you read this? ', timeout: 500, type: 'info' })}>Quick toast</Button>
 
         <Button

package/src/tooltip/Tooltip.stories.tsx

@@ -12,7 +12,7 @@ export default {
 
 export function Example() {
   return (
-    <div className="flex w-1/4 justify-center py-12">
+    <div style={{ display: 'flex', paddingTop: '3rem', paddingBottom: '3rem', justifyContent: 'center', width: '25%' }}>
       <Tooltip content="This has auto alignment">
         <Button>Hover me for a basic tip</Button>
       </Tooltip>
@@ -22,7 +22,18 @@ export function Example() {
 
 export function DefinedSides() {
   return (
-    <div className="flex w-full justify-start px-6 py-12 gap-4">
+    <div
+      style={{
+        display: 'flex',
+        paddingLeft: '1.5rem',
+        paddingRight: '1.5rem',
+        paddingTop: '3rem',
+        paddingBottom: '3rem',
+        gap: '1rem',
+        justifyContent: 'flex-start',
+        width: '100%',
+      }}
+    >
       <Tooltip content="I am a tip to the left" side="left">
         <Button>Hot top to the left</Button>
       </Tooltip>
@@ -41,19 +52,21 @@ export function DefinedSides() {
 
 export function WithContent() {
   return (
-    <div className="flex justify-start py-12">
+    <div style={{ display: 'flex', paddingTop: '3rem', paddingBottom: '3rem', justifyContent: 'flex-start' }}>
       <Tooltip
+        side="left"
         content={
-          <div className="max-w-xs p-2">
+          <div style={{ padding: '0.5rem', maxWidth: '20rem' }}>
             <h3>Tooltip with content</h3>
-            <p className="text-sm leading-6">In here you can add whatever kind of content you want. Even buttons</p>
-            <div className="flex gap-2 justify-end">
+            <p style={{ fontSize: '0.875rem', lineHeight: '1.25rem' }}>
+              In here you can add whatever kind of content you want. Even buttons
+            </p>
+            <div style={{ display: 'flex', gap: '0.5rem', justifyContent: 'flex-end' }}>
               <Button intent="danger">Cancel</Button>
               <Button intent="action">Done</Button>
             </div>
           </div>
         }
-        side="left"
       >
         <Button>Hover me for extended tip with actions</Button>
       </Tooltip>

package/src/tooltip/tooltip.css

@@ -1,5 +1,6 @@
 .c-tooltip-content {
-  @apply z-[100] select-none rounded-md px-4 py-2 text-xs font-medium italic leading-none shadow-tooltip transition;
+  @apply z-[100] select-none rounded-md px-4 py-2 text-xs font-medium leading-none shadow-tooltip transition;
+  font-style: italic;
 }
 
 .c-tooltip-success {

package/tailwind.config.cjs

@@ -4,8 +4,24 @@ const colorsPlugin = require('./plugins/colors');
 
 /** @type {import("tailwindcss").Config} */
 module.exports = {
-  content: ['./src/**/*.tsx'],
+  content: ['./src/**/*.{tsx,ts}', '!./src/**/*.stories.tsx', '!./src/**/*.test.{tsx,ts}'],
   safelist: ['c-dark'],
+  blocklist: [
+    'container',
+    'transform',
+    'table',
+    'grid',
+    'hidden',
+    'resize',
+    'italic',
+    'underline',
+    'static',
+    'inline',
+    'list-item',
+    'table-row',
+    'table-cell',
+    'table-caption',
+  ],
   experimental: {
     optimizeUniversalDefaults: true,
   },