@obosbbl/grunnmuren-react 3.0.6 → 3.0.8

package/dist/index.d.mts

@@ -458,7 +458,7 @@ declare const cardVariants: (props?: ({
     class?: never;
     className?: cva.ClassValue;
 })) | undefined) => string;
-declare const Card: ({ children, className: _className, variant, layout, ...restProps }: CardProps) => react_jsx_runtime.JSX.Element;
+declare const Card: ({ children, className, variant, layout, ...restProps }: CardProps) => react_jsx_runtime.JSX.Element;
 type CardLinkWrapperProps = {
     children?: React.ReactNode;
     className?: string;

package/dist/index.mjs

@@ -1117,7 +1117,8 @@ function Backlink(props) {
 const cardVariants = cva({
     base: [
         'group/card',
-        'rounded-2xl border p-3',
+        'rounded-[inherit]',
+        'border p-3',
         'flex flex-col gap-y-4',
         'relative',
         // **** Content ****
@@ -1229,17 +1230,18 @@ const cardVariants = cva({
         }
     ]
 });
-const Card = ({ children, className: _className, variant, layout, ...restProps })=>{
-    const className = cardVariants({
-        className: _className,
+const Card = ({ children, className, variant, layout, ...restProps })=>{
+    const cardClassName = cardVariants({
         variant,
         layout
     });
-    return /*#__PURE__*/ jsx("div", {
-        className: "@container",
+    return(// The border-radius is set on the outer container to make it act as an invisible wrapper, only used for container queries
+    // Since passing the className prop to this container is necessary to make custom styles behave as expected, we need to apply the border-radius here incase the consumer passes a custom background color
+    /*#__PURE__*/ jsx("div", {
+        ...restProps,
+        className: cx(className, '@container rounded-2xl'),
         children: /*#__PURE__*/ jsx("div", {
-            className: className,
-            ...restProps,
+            className: cardClassName,
             children: /*#__PURE__*/ jsx(Provider, {
                 values: [
                     [
@@ -1272,7 +1274,7 @@ const Card = ({ children, className: _className, variant, layout, ...restProps }
                 children: children
             })
         })
-    });
+    }));
 };
 const cardLinkVariants = cva({
     base: 'w-fit max-w-full',
@@ -2513,7 +2515,7 @@ const LinkList = ({ className, children, ...restProps })=>{
             'grid auto-rows-max gap-y-0.25', // Gaps for when the list is displayed in multiple columns
             '@lg:gap-x-12 @md:gap-x-9 @sm:gap-x-4 @xl:gap-x-16', numberofLinks > 5 && [
                 '@xl:grid-cols-2',
-                numberofLinks > 10 && '@4xl:grid-cols-3'
+                (numberofLinks === 9 || numberofLinks > 10) && '@4xl:grid-cols-3'
             ]),
             children: children
         })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "3.0.6",
+  "version": "3.0.8",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"