@obosbbl/grunnmuren-react 1.10.0 → 1.11.1

package/dist/Hero/Hero.d.ts

@@ -6,7 +6,7 @@ export declare const HeroContext: import("react").Context<{
 }>;
 export type HeroColor = 'green' | 'blue' | 'white';
 export type HeroContentPosition = 'below-center' | 'below-left' | 'top-left' | 'bottom-left' | 'top-right' | 'bottom-right' | 'center' | 'vertical-split';
-export interface HeroProps {
+export interface HeroProps extends React.ComponentPropsWithoutRef<'div'> {
     /** @default white */
     bgColor?: HeroColor;
     className?: string;
@@ -18,4 +18,4 @@ export interface HeroProps {
     /** Instance of HeroImage */
     image?: React.ReactNode;
 }
-export declare const Hero: (props: HeroProps) => JSX.Element;
+export declare const Hero: import("react").ForwardRefExoticComponent<HeroProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Hero/HeroActions.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
-interface HeroActionsProps {
+interface HeroActionsProps extends React.ComponentPropsWithoutRef<'div'> {
     className?: string;
     children?: React.ReactNode;
 }
-export declare const HeroActions: (props: HeroActionsProps) => JSX.Element;
+export declare const HeroActions: import("react").ForwardRefExoticComponent<HeroActionsProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/Hero/HeroContent.d.ts

@@ -1,9 +1,9 @@
 /// <reference types="react" />
-interface HeroContentProps {
+interface HeroContentProps extends React.ComponentPropsWithoutRef<'div'> {
     children?: React.ReactNode;
     className?: string;
     heading: string;
     description?: string;
 }
-export declare const HeroContent: (props: HeroContentProps) => JSX.Element;
+export declare const HeroContent: import("react").ForwardRefExoticComponent<HeroContentProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/Hero/HeroImage.d.ts

@@ -3,6 +3,7 @@ interface HeroImageProps {
     src: string;
     mdSrc: string;
     alt?: string;
+    className?: string;
 }
-export declare const HeroImage: (props: HeroImageProps) => JSX.Element;
+export declare const HeroImage: import("react").ForwardRefExoticComponent<HeroImageProps & import("react").RefAttributes<HTMLPictureElement>>;
 export {};

package/dist/grunnmuren.es.js

@@ -856,7 +856,7 @@ const HeroContext = createContext({
   contentPosition: "below-center",
   hasImage: false
 });
-const Hero = (props) => {
+const Hero = forwardRef((props, ref) => {
   const _a = props, {
     bgColor = "white",
     children,
@@ -889,23 +889,25 @@ const Hero = (props) => {
           gridTemplateAreas: '"hero"'
         } : void 0
       }, rest), {
+        ref,
         children: [image, children]
       }))
     })
   });
-};
-const HeroImage = (props) => {
+});
+const HeroImage = forwardRef((props, ref) => {
   const {
     contentPosition
   } = useContext(HeroContext);
   return /* @__PURE__ */ jsxs("picture", {
-    className: cx("aspect-w-6 aspect-h-7 block", {
+    className: cx(props.className, "aspect-w-6 aspect-h-7 block", {
       "sm:aspect-w-8 sm:aspect-h-4": contentPosition !== "vertical-split",
       "sm:aspect-w-8 sm:aspect-h-8": contentPosition === "vertical-split"
     }),
     style: contentPosition !== "vertical-split" && contentPosition !== "below-center" && contentPosition !== "below-left" ? {
       gridArea: "hero"
     } : void 0,
+    ref,
     children: [/* @__PURE__ */ jsx("source", {
       media: "(min-width: 768px)",
       srcSet: props.mdSrc
@@ -916,8 +918,8 @@ const HeroImage = (props) => {
       alt: props.alt
     })]
   });
-};
-const HeroContent = (props) => {
+});
+const HeroContent = forwardRef((props, ref) => {
   const {
     bgColor,
     contentPosition,
@@ -957,15 +959,16 @@ const HeroContent = (props) => {
     style: usesGridArea ? {
       gridArea: "hero"
     } : void 0,
+    ref,
     children: [/* @__PURE__ */ jsx("h1", {
       children: heading
     }), description && /* @__PURE__ */ jsx("p", {
-      className: "text-lg md:text-xl",
+      className: "text-lg font-semibold md:text-xl",
       children: description
     }), children]
   }));
-};
-const HeroActions = (props) => {
+});
+const HeroActions = forwardRef((props, ref) => {
   const _a = props, {
     className
   } = _a, rest = __objRest(_a, [
@@ -974,12 +977,14 @@ const HeroActions = (props) => {
   const {
     contentPosition
   } = useContext(HeroContext);
-  return /* @__PURE__ */ jsx("div", __spreadValues({
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({
     className: cx(className, "grid items-center justify-center justify-items-center gap-4 md:grid-flow-col", {
       "md:justify-start": contentPosition === "vertical-split" || contentPosition === "below-left"
     })
-  }, rest));
-};
+  }, rest), {
+    ref
+  }));
+});
 const Input = forwardRef((props, ref) => {
   const _a = props, {
     className,
@@ -1521,11 +1526,11 @@ const Snackbar = (props) => {
   return /* @__PURE__ */ jsx("div", {
     className: "container max-w-[59rem]",
     children: /* @__PURE__ */ jsx("div", {
-      className: "bg-orange-light rounded-lg p-4",
+      className: "bg-orange-light px-8 py-4 max-md:p-4",
       children: /* @__PURE__ */ jsxs("div", {
         className: "snackbar grid items-center",
         children: [/* @__PURE__ */ jsx(InfoCircle, {
-          className: "text-orange snackbar-icon mr-4 md:mr-8 md:text-2xl"
+          className: "text-orange snackbar-icon mr-4 self-start md:mr-8 md:text-2xl"
         }), /* @__PURE__ */ jsx("h3", {
           className: cx("snackbar-header min-w-0 max-w-prose text-base font-medium", {
             "overflow-hidden overflow-ellipsis whitespace-nowrap": !isExpanded

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "1.10.0",
+  "version": "1.11.1",
   "description": "OBOS Grunnmuren design system React components",
   "license": "MIT",
   "repository": {
@@ -18,22 +18,22 @@
   "types": "./dist/index.d.ts",
   "devDependencies": {
     "@babel/core": "7.20.12",
-    "@storybook/addon-controls": "6.5.15",
-    "@storybook/addon-docs": "6.5.15",
+    "@storybook/addon-controls": "6.5.16",
+    "@storybook/addon-docs": "6.5.16",
     "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.15",
-    "@storybook/manager-webpack5": "6.5.15",
-    "@storybook/react": "6.5.15",
-    "@types/react": "18.0.26",
+    "@storybook/builder-webpack5": "6.5.16",
+    "@storybook/manager-webpack5": "6.5.16",
+    "@storybook/react": "6.5.16",
+    "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
     "@vitejs/plugin-react": "1.3.2",
     "postcss": "8.4.21",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "require-from-string": "2.0.2",
-    "rimraf": "4.0.7",
+    "rimraf": "4.1.2",
     "tailwindcss": "3.2.4",
-    "type-fest": "3.5.2",
+    "type-fest": "3.5.6",
     "vite": "2.9.15",
     "webpack": "5.75.0",
     "@obosbbl/grunnmuren-tailwind": "0.8.4"