@remotion/design 4.0.405 → 4.0.407

package/dist/index.d.ts

@@ -2,9 +2,12 @@ export { Button } from './Button';
 export { Card } from './Card';
 export { CheckIcon } from './CheckIcon';
 export { Counter } from './Counter';
+export { InlineCode } from './InlineCode';
 export { Input } from './Input';
+export { Link } from './Link';
 export { PlanePaperIcon } from './PaperPlaneIcon';
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from './Select';
 export { Switch } from './Switch';
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs';
 export { Textarea } from './Textarea';
 export { Triangle } from './Triangle';

package/dist/index.js

@@ -2,9 +2,12 @@ export { Button } from './Button';
 export { Card } from './Card';
 export { CheckIcon } from './CheckIcon';
 export { Counter } from './Counter';
+export { InlineCode } from './InlineCode';
 export { Input } from './Input';
+export { Link } from './Link';
 export { PlanePaperIcon } from './PaperPlaneIcon';
 export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, } from './Select';
 export { Switch } from './Switch';
+export { Tabs, TabsContent, TabsList, TabsTrigger } from './Tabs';
 export { Textarea } from './Textarea';
 export { Triangle } from './Triangle';

package/dist/tailwind.css

@@ -43,6 +43,7 @@
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
     --color-slate-200: oklch(92.9% 0.013 255.508);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
     --color-gray-200: oklch(92.8% 0.006 264.531);
     --color-black: #000;
     --color-white: #fff;
@@ -261,6 +262,9 @@
   .my-1 {
     margin-block: calc(var(--spacing) * 1);
   }
+  .mt-2 {
+    margin-top: calc(var(--spacing) * 2);
+  }
   .box-border {
     box-sizing: border-box;
   }
@@ -393,6 +397,10 @@
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 4px;
   }
+  .border-none {
+    --tw-border-style: none;
+    border-style: none;
+  }
   .border-solid {
     --tw-border-style: solid;
     border-style: solid;
@@ -499,6 +507,12 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .text-brand {
+    color: #0b84f3;
+  }
   .text-inherit {
     color: inherit;
   }
@@ -509,6 +523,12 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
+  .underline-offset-4 {
+    text-underline-offset: 4px;
+  }
   .opacity-50 {
     opacity: 50%;
   }
@@ -568,6 +588,33 @@
       }
     }
   }
+  .focus-visible\:ring-2 {
+    &:focus-visible {
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus-visible\:ring-offset-2 {
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
+  .focus-visible\:outline-hidden {
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
+    }
+  }
+  .disabled\:pointer-events-none {
+    &:disabled {
+      pointer-events: none;
+    }
+  }
   .disabled\:cursor-default {
     &:disabled {
       cursor: default;
@@ -627,6 +674,25 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
+  .data-\[state\=active\]\:bg-brand {
+    &[data-state="active"] {
+      background-color: #0b84f3;
+    }
+  }
+  .data-\[state\=active\]\:text-white {
+    &[data-state="active"] {
+      color: var(--color-white);
+    }
+  }
+  .data-\[state\=inactive\]\:hover\:bg-gray-100 {
+    &[data-state="inactive"] {
+      &:hover {
+        @media (hover: hover) {
+          background-color: var(--color-gray-100);
+        }
+      }
+    }
+  }
   .dark\:bg-\[\#121212\] {
     @media (prefers-color-scheme: dark) {
       background-color: #121212;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/design",
-	"version": "4.0.405",
+	"version": "4.0.407",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
 	"module": "dist/esm/index.mjs",
@@ -19,12 +19,13 @@
 		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts"
 	},
 	"dependencies": {
-		"@remotion/paths": "4.0.405",
-		"@remotion/shapes": "4.0.405",
-		"@remotion/svg-3d-engine": "4.0.405",
+		"@remotion/paths": "4.0.407",
+		"@remotion/shapes": "4.0.407",
+		"@remotion/svg-3d-engine": "4.0.407",
 		"clsx": "^2.1.1",
-		"remotion": "4.0.405",
+		"remotion": "4.0.407",
 		"@radix-ui/react-select": "2.1.1",
+		"@radix-ui/react-tabs": "^1.1.0",
 		"lucide-react": "0.439.0"
 	},
 	"peerDependencies": {
@@ -32,7 +33,7 @@
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.405",
+		"@remotion/eslint-config-internal": "4.0.407",
 		"eslint": "9.19.0",
 		"react": "19.2.3",
 		"react-dom": "19.2.3",