boreal-ui 0.0.23 → 0.0.25

package/dist/core/{Card-DCxLBwi0.cjs → Card-B8vnbUG9.cjs}

@@ -18,6 +18,9 @@ const CardBase = ({
   shadow = borealStyleConfig.getDefaultShadow(),
   imageUrl,
   imageAlt,
+  imageHeight,
+  imageWidth,
+  imageFill,
   className = "",
   imageClassName = "",
   headerClassName = "",
@@ -46,9 +49,13 @@ const CardBase = ({
   const headerId = ariaLabelledBy || `${autoId}-header`;
   const descriptionId = `${autoId}-description`;
   const hasImage = !!imageUrl;
-  const showBlur = blur && typeof imageUrl !== "string";
   const derivedAriaLabel = ariaLabel || title || description || "Content card";
   const FallbackImage = (props) => /* @__PURE__ */ jsxRuntime.jsx("img", { ...props });
+  const hasImageObj = typeof imageUrl === "object" && imageUrl && "src" in imageUrl;
+  const imgSrc = hasImageObj ? imageUrl.src : imageUrl;
+  const resolvedWidth = (hasImageObj ? imageUrl.width : void 0) ?? imageWidth;
+  const resolvedHeight = (hasImageObj ? imageUrl.height : void 0) ?? imageHeight;
+  const imgAlt = imageAlt || `${title || "Card"} image`;
   const ImageRenderer = ImageComponent || FallbackImage;
   const cardClassName = React.useMemo(
     () => classNames.combineClassNames(
@@ -75,15 +82,24 @@ const CardBase = ({
       "aria-labelledby": title ? headerId : void 0,
       "aria-label": !title ? derivedAriaLabel : void 0,
       children: loading ? /* @__PURE__ */ jsxRuntime.jsx(SkeletonComponent, { width: "100%", height: "250px", "data-testid": "skeleton" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classMap.content, children: [
-        hasImage && /* @__PURE__ */ jsxRuntime.jsx(
+        hasImage && (imageFill ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: classMap.media, children: /* @__PURE__ */ jsxRuntime.jsx(
           ImageRenderer,
           {
-            src: imageUrl,
-            alt: imageAlt || `${title || "Card"} image`,
+            src: imgSrc,
+            alt: imgAlt,
             className: classNames.combineClassNames(classMap.image, imageClassName),
-            placeholder: showBlur ? "blur" : void 0
+            fill: true
           }
-        ),
+        ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+          ImageRenderer,
+          {
+            src: imgSrc,
+            alt: imgAlt,
+            className: classNames.combineClassNames(classMap.image, imageClassName),
+            width: resolvedWidth ?? 640,
+            height: resolvedHeight ?? 360
+          }
+        )),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
@@ -221,4 +237,4 @@ const Card = (props) => {
   );
 };
 exports.Card = Card;
-//# sourceMappingURL=Card-DCxLBwi0.cjs.map
+//# sourceMappingURL=Card-B8vnbUG9.cjs.map

package/dist/core/Card-B8vnbUG9.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-B8vnbUG9.cjs","sources":["../../src/components/Card/CardBase.tsx","../../src/components/Card/core/Card.tsx"],"sourcesContent":["import React, { useId, useMemo } from \"react\";\r\nimport { ActionButton, CardProps } from \"./Card.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\ntype ExtendedActionButton = ActionButton & {\r\n  buttonComponent: React.ElementType;\r\n  iconButtonComponent: React.ElementType;\r\n};\r\n\r\nexport interface CardBaseProps extends CardProps {\r\n  classMap: Record<string, string>;\r\n  SkeletonComponent: React.FC<{\r\n    width: string;\r\n    height: string;\r\n    [\"data-testid\"]?: string;\r\n  }>;\r\n  ImageComponent?: React.ElementType;\r\n  actionButtons: ExtendedActionButton[];\r\n}\r\n\r\nconst CardBase: React.FC<CardBaseProps> = ({\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  cardIcon,\r\n  title = \"\",\r\n  description = \"\",\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  imageUrl,\r\n  imageAlt,\r\n  imageHeight,\r\n  imageWidth,\r\n  imageFill,\r\n  className = \"\",\r\n  imageClassName = \"\",\r\n  headerClassName = \"\",\r\n  bodyClassName = \"\",\r\n  footerClassName = \"\",\r\n  outline = false,\r\n  size = getDefaultSize(),\r\n  align = \"center\",\r\n  renderHeader,\r\n  renderContent,\r\n  renderFooter,\r\n  actionButtons = [],\r\n  useIconButtons = false,\r\n  layout = \"vertical\",\r\n  blur = false,\r\n  loading = false,\r\n  children,\r\n  \"data-testid\": testId = \"card\",\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-label\": ariaLabel,\r\n  classMap,\r\n  SkeletonComponent,\r\n  ImageComponent,\r\n}) => {\r\n  const autoId = useId();\r\n  const headerId = ariaLabelledBy || `${autoId}-header`;\r\n  const descriptionId = `${autoId}-description`;\r\n  const hasImage = !!imageUrl;\r\n  const showBlur = blur && typeof imageUrl !== \"string\";\r\n  const derivedAriaLabel = ariaLabel || title || description || \"Content card\";\r\n\r\n  const FallbackImage = (props: React.ImgHTMLAttributes<HTMLImageElement>) => (\r\n    <img {...props} />\r\n  );\r\n\r\n  const hasImageObj =\r\n    typeof imageUrl === \"object\" && imageUrl && \"src\" in imageUrl;\r\n  const imgSrc = hasImageObj ? imageUrl.src : (imageUrl as string | undefined);\r\n\r\n  const resolvedWidth =\r\n    (hasImageObj ? (imageUrl as any).width : undefined) ?? imageWidth;\r\n  const resolvedHeight =\r\n    (hasImageObj ? (imageUrl as any).height : undefined) ?? imageHeight;\r\n\r\n  const imgAlt = imageAlt || `${title || \"Card\"} image`;\r\n\r\n  const ImageRenderer = ImageComponent || FallbackImage;\r\n\r\n  const cardClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.card,\r\n        classMap[layout],\r\n        align && classMap[align],\r\n        classMap[theme],\r\n        classMap[state],\r\n        classMap[size],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        outline && classMap.outline,\r\n        loading && classMap.loading,\r\n        className\r\n      ),\r\n    [classMap, size, outline, align, className]\r\n  );\r\n\r\n  return (\r\n    <div\r\n      data-testid={testId}\r\n      className={cardClassName}\r\n      role=\"region\"\r\n      aria-labelledby={title ? headerId : undefined}\r\n      aria-label={!title ? derivedAriaLabel : undefined}\r\n    >\r\n      {loading ? (\r\n        <SkeletonComponent width=\"100%\" height=\"250px\" data-testid=\"skeleton\" />\r\n      ) : (\r\n        <div className={classMap.content}>\r\n          {hasImage &&\r\n            (imageFill ? (\r\n              <div className={classMap.media}>\r\n                <ImageRenderer\r\n                  src={imgSrc as any}\r\n                  alt={imgAlt}\r\n                  className={combineClassNames(classMap.image, imageClassName)}\r\n                  fill\r\n                />\r\n              </div>\r\n            ) : (\r\n              <ImageRenderer\r\n                src={imgSrc as any}\r\n                alt={imgAlt}\r\n                className={combineClassNames(classMap.image, imageClassName)}\r\n                width={resolvedWidth ?? 640}\r\n                height={resolvedHeight ?? 360}\r\n              />\r\n            ))}\r\n\r\n          <div>\r\n            <div\r\n              className={combineClassNames(classMap.header, headerClassName)}\r\n              id={headerId}\r\n            >\r\n              {renderHeader ? (\r\n                renderHeader()\r\n              ) : title ? (\r\n                <h2 className={classMap.title}>\r\n                  {cardIcon && (\r\n                    <span\r\n                      className={classMap.icon}\r\n                      aria-hidden=\"true\"\r\n                      data-testid=\"card-icon\"\r\n                    >\r\n                      {React.createElement(cardIcon)}\r\n                    </span>\r\n                  )}\r\n                  {title}\r\n                </h2>\r\n              ) : null}\r\n            </div>\r\n\r\n            <div\r\n              className={combineClassNames(classMap.body, bodyClassName)}\r\n              role=\"group\"\r\n              aria-describedby={description ? descriptionId : undefined}\r\n            >\r\n              {renderContent ? (\r\n                renderContent()\r\n              ) : (\r\n                <>\r\n                  {description && (\r\n                    <p id={descriptionId} className={classMap.description}>\r\n                      {description}\r\n                    </p>\r\n                  )}\r\n                  {children && (\r\n                    <div className={classMap.children}>{children}</div>\r\n                  )}\r\n                </>\r\n              )}\r\n            </div>\r\n\r\n            {(actionButtons.length > 0 || renderFooter) && (\r\n              <div\r\n                className={combineClassNames(classMap.footer, footerClassName)}\r\n              >\r\n                {actionButtons.length > 0 && (\r\n                  <div className={classMap.actions}>\r\n                    {actionButtons.map((button, index) =>\r\n                      useIconButtons && button.icon ? (\r\n                        <button.iconButtonComponent\r\n                          key={index}\r\n                          icon={button.icon}\r\n                          onClick={button.onClick}\r\n                          className={classMap.action_button}\r\n                          theme={button.theme || \"clear\"}\r\n                          state={button.state || \"\"}\r\n                          aria-label={button.label}\r\n                          size={button.size || size}\r\n                          href={button.href}\r\n                          loading={button.loading}\r\n                        />\r\n                      ) : (\r\n                        <button.buttonComponent\r\n                          key={index}\r\n                          onClick={button.onClick}\r\n                          className={classMap.action_button}\r\n                          theme={button.theme || \"secondary\"}\r\n                          state={button.state || \"\"}\r\n                          href={button.href}\r\n                          loading={button.loading}\r\n                          size={button.size || size}\r\n                          aria-label={button.label}\r\n                        >\r\n                          {button.label}\r\n                        </button.buttonComponent>\r\n                      )\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {renderFooter && renderFooter()}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default CardBase;\r\n","import React from \"react\";\r\nimport CardBase from \"../CardBase\";\r\nimport \"./Card.scss\";\r\nimport { Button, IconButton, Skeleton } from \"../../../index.core\";\r\nimport { CardProps } from \"../Card.types\";\r\n\r\nconst classes = {\r\n  card: \"card\",\r\n\r\n  left: \"card_left\",\r\n  right: \"card_right\",\r\n  center: \"card_center\",\r\n\r\n  primary: \"card_primary\",\r\n  secondary: \"card_secondary\",\r\n  tertiary: \"card_tertiary\",\r\n  quaternary: \"card_quaternary\",\r\n\r\n  success: \"card_success\",\r\n  warning: \"card_warning\",\r\n  error: \"card_error\",\r\n\r\n  clear: \"card_clear\",\r\n\r\n  outline: \"card_outline\",\r\n  loading: \"card_loading\",\r\n\r\n  content: \"card_content\",\r\n\r\n  xs: \"card_xs\",\r\n  small: \"card_small\",\r\n  medium: \"card_medium\",\r\n  large: \"card_large\",\r\n  xl: \"card_xl\",\r\n\r\n  shadowNone: \"card_shadow-None\",\r\n  shadowLight: \"card_shadow-Light\",\r\n  shadowMedium: \"card_shadow-Medium\",\r\n  shadowStrong: \"card_shadow-Strong\",\r\n  shadowIntense: \"card_shadow-Intense\",\r\n\r\n  roundNone: \"card_round-None\",\r\n  roundSmall: \"card_round-Small\",\r\n  roundMedium: \"card_round-Medium\",\r\n  roundLarge: \"card_round-Large\",\r\n\r\n  vertical: \"card_vertical\",\r\n  horizontal: \"card_horizontal\",\r\n\r\n  image: \"card_image\",\r\n  header: \"card_header\",\r\n  title: \"card_title\",\r\n  icon: \"card_icon\",\r\n  body: \"card_body\",\r\n  description: \"card_description\",\r\n  children: \"card_children\",\r\n  footer: \"card_footer\",\r\n  actions: \"card_actions\",\r\n  action_button: \"card_action_button\",\r\n};\r\n\r\nconst Card: React.FC<CardProps> = (props) => {\r\n  const wrappedButtons = (props.actionButtons ?? []).map((b) => ({\r\n    ...b,\r\n    buttonComponent: Button,\r\n    iconButtonComponent: IconButton,\r\n  }));\r\n\r\n  return (\r\n    <CardBase\r\n      {...props}\r\n      actionButtons={wrappedButtons}\r\n      classMap={classes}\r\n      SkeletonComponent={Skeleton}\r\n    />\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"names":["getDefaultTheme","getDefaultRounding","getDefaultShadow","getDefaultSize","useId","jsx","useMemo","combineClassNames","capitalize","jsxs","Fragment","Button","IconButton","Skeleton"],"mappings":"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"}

package/dist/core/{Card-DKPk0zgQ.js → Card-CaCboEwS.js}

@@ -17,6 +17,9 @@ const CardBase = ({
   shadow = getDefaultShadow(),
   imageUrl,
   imageAlt,
+  imageHeight,
+  imageWidth,
+  imageFill,
   className = "",
   imageClassName = "",
   headerClassName = "",
@@ -45,9 +48,13 @@ const CardBase = ({
   const headerId = ariaLabelledBy || `${autoId}-header`;
   const descriptionId = `${autoId}-description`;
   const hasImage = !!imageUrl;
-  const showBlur = blur && typeof imageUrl !== "string";
   const derivedAriaLabel = ariaLabel || title || description || "Content card";
   const FallbackImage = (props) => /* @__PURE__ */ jsx("img", { ...props });
+  const hasImageObj = typeof imageUrl === "object" && imageUrl && "src" in imageUrl;
+  const imgSrc = hasImageObj ? imageUrl.src : imageUrl;
+  const resolvedWidth = (hasImageObj ? imageUrl.width : void 0) ?? imageWidth;
+  const resolvedHeight = (hasImageObj ? imageUrl.height : void 0) ?? imageHeight;
+  const imgAlt = imageAlt || `${title || "Card"} image`;
   const ImageRenderer = ImageComponent || FallbackImage;
   const cardClassName = useMemo(
     () => combineClassNames(
@@ -74,15 +81,24 @@ const CardBase = ({
       "aria-labelledby": title ? headerId : void 0,
       "aria-label": !title ? derivedAriaLabel : void 0,
       children: loading ? /* @__PURE__ */ jsx(SkeletonComponent, { width: "100%", height: "250px", "data-testid": "skeleton" }) : /* @__PURE__ */ jsxs("div", { className: classMap.content, children: [
-        hasImage && /* @__PURE__ */ jsx(
+        hasImage && (imageFill ? /* @__PURE__ */ jsx("div", { className: classMap.media, children: /* @__PURE__ */ jsx(
           ImageRenderer,
           {
-            src: imageUrl,
-            alt: imageAlt || `${title || "Card"} image`,
+            src: imgSrc,
+            alt: imgAlt,
             className: combineClassNames(classMap.image, imageClassName),
-            placeholder: showBlur ? "blur" : void 0
+            fill: true
           }
-        ),
+        ) }) : /* @__PURE__ */ jsx(
+          ImageRenderer,
+          {
+            src: imgSrc,
+            alt: imgAlt,
+            className: combineClassNames(classMap.image, imageClassName),
+            width: resolvedWidth ?? 640,
+            height: resolvedHeight ?? 360
+          }
+        )),
         /* @__PURE__ */ jsxs("div", { children: [
           /* @__PURE__ */ jsx(
             "div",
@@ -222,4 +238,4 @@ const Card = (props) => {
 export {
   Card as C
 };
-//# sourceMappingURL=Card-DKPk0zgQ.js.map
+//# sourceMappingURL=Card-CaCboEwS.js.map

package/dist/core/Card-CaCboEwS.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card-CaCboEwS.js","sources":["../../src/components/Card/CardBase.tsx","../../src/components/Card/core/Card.tsx"],"sourcesContent":["import React, { useId, useMemo } from \"react\";\r\nimport { ActionButton, CardProps } from \"./Card.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { capitalize } from \"../../utils/capitalize\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultSize,\r\n  getDefaultTheme,\r\n} from \"../../config/boreal-style-config\";\r\n\r\ntype ExtendedActionButton = ActionButton & {\r\n  buttonComponent: React.ElementType;\r\n  iconButtonComponent: React.ElementType;\r\n};\r\n\r\nexport interface CardBaseProps extends CardProps {\r\n  classMap: Record<string, string>;\r\n  SkeletonComponent: React.FC<{\r\n    width: string;\r\n    height: string;\r\n    [\"data-testid\"]?: string;\r\n  }>;\r\n  ImageComponent?: React.ElementType;\r\n  actionButtons: ExtendedActionButton[];\r\n}\r\n\r\nconst CardBase: React.FC<CardBaseProps> = ({\r\n  theme = getDefaultTheme(),\r\n  state = \"\",\r\n  cardIcon,\r\n  title = \"\",\r\n  description = \"\",\r\n  rounding = getDefaultRounding(),\r\n  shadow = getDefaultShadow(),\r\n  imageUrl,\r\n  imageAlt,\r\n  imageHeight,\r\n  imageWidth,\r\n  imageFill,\r\n  className = \"\",\r\n  imageClassName = \"\",\r\n  headerClassName = \"\",\r\n  bodyClassName = \"\",\r\n  footerClassName = \"\",\r\n  outline = false,\r\n  size = getDefaultSize(),\r\n  align = \"center\",\r\n  renderHeader,\r\n  renderContent,\r\n  renderFooter,\r\n  actionButtons = [],\r\n  useIconButtons = false,\r\n  layout = \"vertical\",\r\n  blur = false,\r\n  loading = false,\r\n  children,\r\n  \"data-testid\": testId = \"card\",\r\n  \"aria-labelledby\": ariaLabelledBy,\r\n  \"aria-label\": ariaLabel,\r\n  classMap,\r\n  SkeletonComponent,\r\n  ImageComponent,\r\n}) => {\r\n  const autoId = useId();\r\n  const headerId = ariaLabelledBy || `${autoId}-header`;\r\n  const descriptionId = `${autoId}-description`;\r\n  const hasImage = !!imageUrl;\r\n  const showBlur = blur && typeof imageUrl !== \"string\";\r\n  const derivedAriaLabel = ariaLabel || title || description || \"Content card\";\r\n\r\n  const FallbackImage = (props: React.ImgHTMLAttributes<HTMLImageElement>) => (\r\n    <img {...props} />\r\n  );\r\n\r\n  const hasImageObj =\r\n    typeof imageUrl === \"object\" && imageUrl && \"src\" in imageUrl;\r\n  const imgSrc = hasImageObj ? imageUrl.src : (imageUrl as string | undefined);\r\n\r\n  const resolvedWidth =\r\n    (hasImageObj ? (imageUrl as any).width : undefined) ?? imageWidth;\r\n  const resolvedHeight =\r\n    (hasImageObj ? (imageUrl as any).height : undefined) ?? imageHeight;\r\n\r\n  const imgAlt = imageAlt || `${title || \"Card\"} image`;\r\n\r\n  const ImageRenderer = ImageComponent || FallbackImage;\r\n\r\n  const cardClassName = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.card,\r\n        classMap[layout],\r\n        align && classMap[align],\r\n        classMap[theme],\r\n        classMap[state],\r\n        classMap[size],\r\n        shadow && classMap[`shadow${capitalize(shadow)}`],\r\n        rounding && classMap[`round${capitalize(rounding)}`],\r\n        outline && classMap.outline,\r\n        loading && classMap.loading,\r\n        className\r\n      ),\r\n    [classMap, size, outline, align, className]\r\n  );\r\n\r\n  return (\r\n    <div\r\n      data-testid={testId}\r\n      className={cardClassName}\r\n      role=\"region\"\r\n      aria-labelledby={title ? headerId : undefined}\r\n      aria-label={!title ? derivedAriaLabel : undefined}\r\n    >\r\n      {loading ? (\r\n        <SkeletonComponent width=\"100%\" height=\"250px\" data-testid=\"skeleton\" />\r\n      ) : (\r\n        <div className={classMap.content}>\r\n          {hasImage &&\r\n            (imageFill ? (\r\n              <div className={classMap.media}>\r\n                <ImageRenderer\r\n                  src={imgSrc as any}\r\n                  alt={imgAlt}\r\n                  className={combineClassNames(classMap.image, imageClassName)}\r\n                  fill\r\n                />\r\n              </div>\r\n            ) : (\r\n              <ImageRenderer\r\n                src={imgSrc as any}\r\n                alt={imgAlt}\r\n                className={combineClassNames(classMap.image, imageClassName)}\r\n                width={resolvedWidth ?? 640}\r\n                height={resolvedHeight ?? 360}\r\n              />\r\n            ))}\r\n\r\n          <div>\r\n            <div\r\n              className={combineClassNames(classMap.header, headerClassName)}\r\n              id={headerId}\r\n            >\r\n              {renderHeader ? (\r\n                renderHeader()\r\n              ) : title ? (\r\n                <h2 className={classMap.title}>\r\n                  {cardIcon && (\r\n                    <span\r\n                      className={classMap.icon}\r\n                      aria-hidden=\"true\"\r\n                      data-testid=\"card-icon\"\r\n                    >\r\n                      {React.createElement(cardIcon)}\r\n                    </span>\r\n                  )}\r\n                  {title}\r\n                </h2>\r\n              ) : null}\r\n            </div>\r\n\r\n            <div\r\n              className={combineClassNames(classMap.body, bodyClassName)}\r\n              role=\"group\"\r\n              aria-describedby={description ? descriptionId : undefined}\r\n            >\r\n              {renderContent ? (\r\n                renderContent()\r\n              ) : (\r\n                <>\r\n                  {description && (\r\n                    <p id={descriptionId} className={classMap.description}>\r\n                      {description}\r\n                    </p>\r\n                  )}\r\n                  {children && (\r\n                    <div className={classMap.children}>{children}</div>\r\n                  )}\r\n                </>\r\n              )}\r\n            </div>\r\n\r\n            {(actionButtons.length > 0 || renderFooter) && (\r\n              <div\r\n                className={combineClassNames(classMap.footer, footerClassName)}\r\n              >\r\n                {actionButtons.length > 0 && (\r\n                  <div className={classMap.actions}>\r\n                    {actionButtons.map((button, index) =>\r\n                      useIconButtons && button.icon ? (\r\n                        <button.iconButtonComponent\r\n                          key={index}\r\n                          icon={button.icon}\r\n                          onClick={button.onClick}\r\n                          className={classMap.action_button}\r\n                          theme={button.theme || \"clear\"}\r\n                          state={button.state || \"\"}\r\n                          aria-label={button.label}\r\n                          size={button.size || size}\r\n                          href={button.href}\r\n                          loading={button.loading}\r\n                        />\r\n                      ) : (\r\n                        <button.buttonComponent\r\n                          key={index}\r\n                          onClick={button.onClick}\r\n                          className={classMap.action_button}\r\n                          theme={button.theme || \"secondary\"}\r\n                          state={button.state || \"\"}\r\n                          href={button.href}\r\n                          loading={button.loading}\r\n                          size={button.size || size}\r\n                          aria-label={button.label}\r\n                        >\r\n                          {button.label}\r\n                        </button.buttonComponent>\r\n                      )\r\n                    )}\r\n                  </div>\r\n                )}\r\n                {renderFooter && renderFooter()}\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      )}\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default CardBase;\r\n","import React from \"react\";\r\nimport CardBase from \"../CardBase\";\r\nimport \"./Card.scss\";\r\nimport { Button, IconButton, Skeleton } from \"../../../index.core\";\r\nimport { CardProps } from \"../Card.types\";\r\n\r\nconst classes = {\r\n  card: \"card\",\r\n\r\n  left: \"card_left\",\r\n  right: \"card_right\",\r\n  center: \"card_center\",\r\n\r\n  primary: \"card_primary\",\r\n  secondary: \"card_secondary\",\r\n  tertiary: \"card_tertiary\",\r\n  quaternary: \"card_quaternary\",\r\n\r\n  success: \"card_success\",\r\n  warning: \"card_warning\",\r\n  error: \"card_error\",\r\n\r\n  clear: \"card_clear\",\r\n\r\n  outline: \"card_outline\",\r\n  loading: \"card_loading\",\r\n\r\n  content: \"card_content\",\r\n\r\n  xs: \"card_xs\",\r\n  small: \"card_small\",\r\n  medium: \"card_medium\",\r\n  large: \"card_large\",\r\n  xl: \"card_xl\",\r\n\r\n  shadowNone: \"card_shadow-None\",\r\n  shadowLight: \"card_shadow-Light\",\r\n  shadowMedium: \"card_shadow-Medium\",\r\n  shadowStrong: \"card_shadow-Strong\",\r\n  shadowIntense: \"card_shadow-Intense\",\r\n\r\n  roundNone: \"card_round-None\",\r\n  roundSmall: \"card_round-Small\",\r\n  roundMedium: \"card_round-Medium\",\r\n  roundLarge: \"card_round-Large\",\r\n\r\n  vertical: \"card_vertical\",\r\n  horizontal: \"card_horizontal\",\r\n\r\n  image: \"card_image\",\r\n  header: \"card_header\",\r\n  title: \"card_title\",\r\n  icon: \"card_icon\",\r\n  body: \"card_body\",\r\n  description: \"card_description\",\r\n  children: \"card_children\",\r\n  footer: \"card_footer\",\r\n  actions: \"card_actions\",\r\n  action_button: \"card_action_button\",\r\n};\r\n\r\nconst Card: React.FC<CardProps> = (props) => {\r\n  const wrappedButtons = (props.actionButtons ?? []).map((b) => ({\r\n    ...b,\r\n    buttonComponent: Button,\r\n    iconButtonComponent: IconButton,\r\n  }));\r\n\r\n  return (\r\n    <CardBase\r\n      {...props}\r\n      actionButtons={wrappedButtons}\r\n      classMap={classes}\r\n      SkeletonComponent={Skeleton}\r\n    />\r\n  );\r\n};\r\n\r\nexport default Card;\r\n"],"names":["Skeleton"],"mappings":"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"}

package/dist/core/Card.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const Card = require("./Card-DCxLBwi0.cjs");
+const Card = require("./Card-B8vnbUG9.cjs");
 module.exports = Card.Card;
 //# sourceMappingURL=Card.cjs.js.map

package/dist/core/Card.js

@@ -1,4 +1,4 @@
-import { C } from "./Card-DKPk0zgQ.js";
+import { C } from "./Card-CaCboEwS.js";
 export {
   C as default
 };

package/dist/core/{Footer-CJOKuXJh.js → Footer-Bi3OLtAi.js}

@@ -114,14 +114,9 @@ const FooterBase = ({
               LinkWrapper,
               {
                 href: link.href,
-                children: /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: classMap.link,
-                    "data-testid": `${testId}-link-${link.label.toLowerCase().replace(/\s+/g, "-")}`,
-                    children: link.label
-                  }
-                )
+                className: classMap.link,
+                "data-testid": `${testId}-link-${link.label.toLowerCase().replace(/\s+/g, "-")}`,
+                children: link.label
               }
             ) }, i)) })
           }
@@ -206,4 +201,4 @@ export {
   Footer as F,
   UserThemeSettings as U
 };
-//# sourceMappingURL=Footer-CJOKuXJh.js.map
+//# sourceMappingURL=Footer-Bi3OLtAi.js.map

package/dist/core/Footer-Bi3OLtAi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer-Bi3OLtAi.js","sources":["../../src/components/Select/ThemeSelect/core/ThemeSelect.tsx","../../src/components/Footer/FooterBase.tsx","../../src/components/Footer/core/Footer.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\r\nimport Select from \"../../core/Select\";\r\nimport { ThemeContext } from \"../../../../context/ThemeContext\";\r\nimport { RoundingType, ShadowType, StateType, ThemeType } from \"@/types/types\";\r\nimport { getAllColorSchemes } from \"../../../../styles/colorSchemeRegistry\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"@/config/boreal-style-config\";\r\n\r\ninterface ThemeSelectProps {\r\n  theme?: ThemeType;\r\n  shadow?: ShadowType;\r\n  rounding?: RoundingType;\r\n  \"data-testid\"?: string;\r\n  state?: StateType;\r\n}\r\n\r\nconst UserThemeSettings: React.FC<ThemeSelectProps> = ({\r\n  theme = getDefaultTheme(),\r\n  shadow = getDefaultShadow(),\r\n  rounding = getDefaultRounding(),\r\n  \"data-testid\": testId = \"theme-select\",\r\n  state = \"\",\r\n}) => {\r\n  const allSchemes = getAllColorSchemes();\r\n  const themeContext = useContext(ThemeContext);\r\n\r\n  if (!themeContext) {\r\n    throw new Error(\r\n      \"ThemeContext is undefined. Make sure to wrap this component with ThemeProvider.\"\r\n    );\r\n  }\r\n\r\n  const { selectedScheme, setSelectedScheme } = themeContext;\r\n\r\n  const options = allSchemes.map((scheme, index) => ({\r\n    value: index.toString(),\r\n    label: scheme.name,\r\n  }));\r\n\r\n  return (\r\n    <div className=\"control-container\">\r\n      <Select\r\n        theme={theme}\r\n        shadow={shadow}\r\n        rounding={rounding}\r\n        state={state}\r\n        data-testid={`${testId}-select`}\r\n        options={options}\r\n        value={selectedScheme.toString()}\r\n        onChange={(value: string | number) =>\r\n          setSelectedScheme(parseInt(value as string, 10))\r\n        }\r\n        ariaLabel=\"Select Theme\"\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default UserThemeSettings;\r\n","import React, { JSX, useMemo } from \"react\";\r\nimport { FooterProps } from \"./Footer.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { getDefaultTheme } from \"../../config/boreal-style-config\";\r\nimport { capitalize } from \"@/utils/capitalize\";\r\n\r\nexport interface BaseFooterProps extends FooterProps {\r\n  IconButton: React.ComponentType<any>;\r\n  ThemeSelect: React.ComponentType<any>;\r\n  ImageComponent?: React.ElementType;\r\n  classMap: Record<string, string>;\r\n  LinkWrapper?: (props: {\r\n    href: string;\r\n    children: React.ReactNode;\r\n    className?: string;\r\n    [key: string]: any;\r\n  }) => JSX.Element;\r\n}\r\n\r\nconst FooterBase: React.FC<BaseFooterProps> = ({\r\n  theme = getDefaultTheme(),\r\n  attachment = \"static\",\r\n  shadow = \"none\",\r\n  rounding = \"none\",\r\n  className = \"\",\r\n  \"data-testid\": testId = \"footer\",\r\n  copyright,\r\n  links = [],\r\n  logo,\r\n  socialLinks = [],\r\n  showThemeSelect = false,\r\n  IconButton,\r\n  ImageComponent = \"img\",\r\n  ThemeSelect,\r\n  classMap,\r\n  LinkWrapper = ({ href, children }) => <a href={href}>{children}</a>,\r\n}) => {\r\n  const footerClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.footer,\r\n        classMap[theme],\r\n        classMap[`shadow${capitalize(shadow)}`],\r\n        classMap[`round${capitalize(rounding)}`],\r\n        classMap[`attachment${capitalize(attachment)}`],\r\n        className\r\n      ),\r\n    [classMap, theme, className]\r\n  );\r\n  return (\r\n    <footer\r\n      className={footerClass}\r\n      role=\"contentinfo\"\r\n      aria-label=\"Footer\"\r\n      data-testid={testId}\r\n    >\r\n      <div className={classMap.content}>\r\n        <div className={classMap.left} data-testid={`${testId}-left`}>\r\n          {logo &&\r\n          (typeof logo === \"string\" ||\r\n            (typeof logo === \"object\" && \"src\" in logo)) ? (\r\n            <ImageComponent\r\n              className={classMap.logo}\r\n              aria-label=\"Logo\"\r\n              role=\"img\"\r\n              data-testid={`${testId}-logo`}\r\n              loading=\"lazy\"\r\n              src={logo}\r\n              alt=\"Logo\"\r\n              height={20}\r\n              width={20}\r\n            />\r\n          ) : (\r\n            <span\r\n              className={classMap.logo}\r\n              aria-label=\"Logo\"\r\n              role=\"img\"\r\n              data-testid={`${testId}-logo`}\r\n            >\r\n              {logo}\r\n            </span>\r\n          )}\r\n\r\n          {copyright && (\r\n            <div className={classMap.left} data-testid={`${testId}-copyright`}>\r\n              <p>{copyright}</p>\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {links.length > 0 && (\r\n          <nav\r\n            className={classMap.links}\r\n            aria-label=\"Footer site links\"\r\n            data-testid={`${testId}-nav`}\r\n          >\r\n            <ul role=\"list\">\r\n              {links.map((link, i) => (\r\n                <li key={i}>\r\n                  <LinkWrapper\r\n                    href={link.href}\r\n                    className={classMap.link}\r\n                    data-testid={`${testId}-link-${link.label.toLowerCase().replace(/\\s+/g, \"-\")}`}\r\n                  >\r\n                    {link.label}\r\n                  </LinkWrapper>\r\n                </li>\r\n              ))}\r\n            </ul>\r\n          </nav>\r\n        )}\r\n\r\n        {showThemeSelect && (\r\n          <div\r\n            className={classMap.themeToggle}\r\n            data-testid={`${testId}-theme-select`}\r\n            aria-label=\"Theme selector container\"\r\n          >\r\n            <ThemeSelect theme={\"clear\"} shadow={\"none\"} />\r\n          </div>\r\n        )}\r\n\r\n        {socialLinks.length > 0 && (\r\n          <div\r\n            className={classMap.social}\r\n            aria-label=\"Social media\"\r\n            role=\"navigation\"\r\n            data-testid={`${testId}-social`}\r\n          >\r\n            {socialLinks.map((social, index) => (\r\n              <IconButton\r\n                key={index}\r\n                icon={social.icon}\r\n                href={social.href}\r\n                isExternal\r\n                shadow=\"none\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n                ariaLabel={social.title}\r\n                title={social.title}\r\n                theme=\"clear\"\r\n                data-testid={`${testId}-social-${social.title\r\n                  .toLowerCase()\r\n                  .replace(/\\s+/g, \"-\")}`}\r\n              />\r\n            ))}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </footer>\r\n  );\r\n};\r\n\r\nexport default FooterBase;\r\n","import React from \"react\";\r\nimport FooterBase from \"../FooterBase\";\r\nimport { FooterProps } from \"../Footer.types\";\r\nimport IconButton from \"../../IconButton/core/IconButton\";\r\nimport ThemeSelect from \"../../Select/ThemeSelect/core/ThemeSelect\";\r\nimport \"./Footer.scss\";\r\n\r\nconst classes = {\r\n  footer: \"footer\",\r\n\r\n  primary: \"footer_primary\",\r\n  secondary: \"footer_secondary\",\r\n  tertiary: \"footer_tertiary\",\r\n  quaternary: \"footer_quaternary\",\r\n  clear: \"footer_clear\",\r\n\r\n  shadowNone: \"footer_shadow-None\",\r\n  shadowLight: \"footer_shadow-Light\",\r\n  shadowMedium: \"footer_shadow-Medium\",\r\n  shadowStrong: \"footer_shadow-Strong\",\r\n  shadowIntense: \"footer_shadow-Intense\",\r\n\r\n  roundNone: \"footer_round-None\",\r\n  roundSmall: \"footer_round-Small\",\r\n  roundMedium: \"footer_round-Medium\",\r\n  roundLarge: \"footer_round-Large\",\r\n\r\n  attachmentStatic: \"footer_attachment-static\",\r\n  attachmentFixed: \"footer_attachment-fixed\",\r\n  attachmentSticky: \"footer_attachment-sticky\",\r\n\r\n  content: \"footer_content\",\r\n  logo: \"footer_logo\",\r\n  left: \"footer_left\",\r\n  links: \"footer_links\",\r\n  link: \"footer_link\",\r\n  social: \"footer_social\",\r\n\r\n  themeToggle: \"footer_theme_toggle\",\r\n};\r\n\r\nconst Footer: React.FC<FooterProps> = (props) => {\r\n  return (\r\n    <FooterBase\r\n      {...props}\r\n      IconButton={IconButton}\r\n      ThemeSelect={ThemeSelect}\r\n      classMap={classes}\r\n    />\r\n  );\r\n};\r\n\r\nexport default Footer;\r\n"],"names":["IconButton","ThemeSelect"],"mappings":"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"}

package/dist/core/{Footer-BKfoTV0l.cjs → Footer-CgPo0kjA.cjs}

@@ -115,14 +115,9 @@ const FooterBase = ({
               LinkWrapper,
               {
                 href: link.href,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: classMap.link,
-                    "data-testid": `${testId}-link-${link.label.toLowerCase().replace(/\s+/g, "-")}`,
-                    children: link.label
-                  }
-                )
+                className: classMap.link,
+                "data-testid": `${testId}-link-${link.label.toLowerCase().replace(/\s+/g, "-")}`,
+                children: link.label
               }
             ) }, i)) })
           }
@@ -205,4 +200,4 @@ const Footer = (props) => {
 };
 exports.Footer = Footer;
 exports.UserThemeSettings = UserThemeSettings;
-//# sourceMappingURL=Footer-BKfoTV0l.cjs.map
+//# sourceMappingURL=Footer-CgPo0kjA.cjs.map

package/dist/core/Footer-CgPo0kjA.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Footer-CgPo0kjA.cjs","sources":["../../src/components/Select/ThemeSelect/core/ThemeSelect.tsx","../../src/components/Footer/FooterBase.tsx","../../src/components/Footer/core/Footer.tsx"],"sourcesContent":["import React, { useContext } from \"react\";\r\nimport Select from \"../../core/Select\";\r\nimport { ThemeContext } from \"../../../../context/ThemeContext\";\r\nimport { RoundingType, ShadowType, StateType, ThemeType } from \"@/types/types\";\r\nimport { getAllColorSchemes } from \"../../../../styles/colorSchemeRegistry\";\r\nimport {\r\n  getDefaultRounding,\r\n  getDefaultShadow,\r\n  getDefaultTheme,\r\n} from \"@/config/boreal-style-config\";\r\n\r\ninterface ThemeSelectProps {\r\n  theme?: ThemeType;\r\n  shadow?: ShadowType;\r\n  rounding?: RoundingType;\r\n  \"data-testid\"?: string;\r\n  state?: StateType;\r\n}\r\n\r\nconst UserThemeSettings: React.FC<ThemeSelectProps> = ({\r\n  theme = getDefaultTheme(),\r\n  shadow = getDefaultShadow(),\r\n  rounding = getDefaultRounding(),\r\n  \"data-testid\": testId = \"theme-select\",\r\n  state = \"\",\r\n}) => {\r\n  const allSchemes = getAllColorSchemes();\r\n  const themeContext = useContext(ThemeContext);\r\n\r\n  if (!themeContext) {\r\n    throw new Error(\r\n      \"ThemeContext is undefined. Make sure to wrap this component with ThemeProvider.\"\r\n    );\r\n  }\r\n\r\n  const { selectedScheme, setSelectedScheme } = themeContext;\r\n\r\n  const options = allSchemes.map((scheme, index) => ({\r\n    value: index.toString(),\r\n    label: scheme.name,\r\n  }));\r\n\r\n  return (\r\n    <div className=\"control-container\">\r\n      <Select\r\n        theme={theme}\r\n        shadow={shadow}\r\n        rounding={rounding}\r\n        state={state}\r\n        data-testid={`${testId}-select`}\r\n        options={options}\r\n        value={selectedScheme.toString()}\r\n        onChange={(value: string | number) =>\r\n          setSelectedScheme(parseInt(value as string, 10))\r\n        }\r\n        ariaLabel=\"Select Theme\"\r\n      />\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default UserThemeSettings;\r\n","import React, { JSX, useMemo } from \"react\";\r\nimport { FooterProps } from \"./Footer.types\";\r\nimport { combineClassNames } from \"../../utils/classNames\";\r\nimport { getDefaultTheme } from \"../../config/boreal-style-config\";\r\nimport { capitalize } from \"@/utils/capitalize\";\r\n\r\nexport interface BaseFooterProps extends FooterProps {\r\n  IconButton: React.ComponentType<any>;\r\n  ThemeSelect: React.ComponentType<any>;\r\n  ImageComponent?: React.ElementType;\r\n  classMap: Record<string, string>;\r\n  LinkWrapper?: (props: {\r\n    href: string;\r\n    children: React.ReactNode;\r\n    className?: string;\r\n    [key: string]: any;\r\n  }) => JSX.Element;\r\n}\r\n\r\nconst FooterBase: React.FC<BaseFooterProps> = ({\r\n  theme = getDefaultTheme(),\r\n  attachment = \"static\",\r\n  shadow = \"none\",\r\n  rounding = \"none\",\r\n  className = \"\",\r\n  \"data-testid\": testId = \"footer\",\r\n  copyright,\r\n  links = [],\r\n  logo,\r\n  socialLinks = [],\r\n  showThemeSelect = false,\r\n  IconButton,\r\n  ImageComponent = \"img\",\r\n  ThemeSelect,\r\n  classMap,\r\n  LinkWrapper = ({ href, children }) => <a href={href}>{children}</a>,\r\n}) => {\r\n  const footerClass = useMemo(\r\n    () =>\r\n      combineClassNames(\r\n        classMap.footer,\r\n        classMap[theme],\r\n        classMap[`shadow${capitalize(shadow)}`],\r\n        classMap[`round${capitalize(rounding)}`],\r\n        classMap[`attachment${capitalize(attachment)}`],\r\n        className\r\n      ),\r\n    [classMap, theme, className]\r\n  );\r\n  return (\r\n    <footer\r\n      className={footerClass}\r\n      role=\"contentinfo\"\r\n      aria-label=\"Footer\"\r\n      data-testid={testId}\r\n    >\r\n      <div className={classMap.content}>\r\n        <div className={classMap.left} data-testid={`${testId}-left`}>\r\n          {logo &&\r\n          (typeof logo === \"string\" ||\r\n            (typeof logo === \"object\" && \"src\" in logo)) ? (\r\n            <ImageComponent\r\n              className={classMap.logo}\r\n              aria-label=\"Logo\"\r\n              role=\"img\"\r\n              data-testid={`${testId}-logo`}\r\n              loading=\"lazy\"\r\n              src={logo}\r\n              alt=\"Logo\"\r\n              height={20}\r\n              width={20}\r\n            />\r\n          ) : (\r\n            <span\r\n              className={classMap.logo}\r\n              aria-label=\"Logo\"\r\n              role=\"img\"\r\n              data-testid={`${testId}-logo`}\r\n            >\r\n              {logo}\r\n            </span>\r\n          )}\r\n\r\n          {copyright && (\r\n            <div className={classMap.left} data-testid={`${testId}-copyright`}>\r\n              <p>{copyright}</p>\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        {links.length > 0 && (\r\n          <nav\r\n            className={classMap.links}\r\n            aria-label=\"Footer site links\"\r\n            data-testid={`${testId}-nav`}\r\n          >\r\n            <ul role=\"list\">\r\n              {links.map((link, i) => (\r\n                <li key={i}>\r\n                  <LinkWrapper\r\n                    href={link.href}\r\n                    className={classMap.link}\r\n                    data-testid={`${testId}-link-${link.label.toLowerCase().replace(/\\s+/g, \"-\")}`}\r\n                  >\r\n                    {link.label}\r\n                  </LinkWrapper>\r\n                </li>\r\n              ))}\r\n            </ul>\r\n          </nav>\r\n        )}\r\n\r\n        {showThemeSelect && (\r\n          <div\r\n            className={classMap.themeToggle}\r\n            data-testid={`${testId}-theme-select`}\r\n            aria-label=\"Theme selector container\"\r\n          >\r\n            <ThemeSelect theme={\"clear\"} shadow={\"none\"} />\r\n          </div>\r\n        )}\r\n\r\n        {socialLinks.length > 0 && (\r\n          <div\r\n            className={classMap.social}\r\n            aria-label=\"Social media\"\r\n            role=\"navigation\"\r\n            data-testid={`${testId}-social`}\r\n          >\r\n            {socialLinks.map((social, index) => (\r\n              <IconButton\r\n                key={index}\r\n                icon={social.icon}\r\n                href={social.href}\r\n                isExternal\r\n                shadow=\"none\"\r\n                target=\"_blank\"\r\n                rel=\"noopener noreferrer\"\r\n                ariaLabel={social.title}\r\n                title={social.title}\r\n                theme=\"clear\"\r\n                data-testid={`${testId}-social-${social.title\r\n                  .toLowerCase()\r\n                  .replace(/\\s+/g, \"-\")}`}\r\n              />\r\n            ))}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </footer>\r\n  );\r\n};\r\n\r\nexport default FooterBase;\r\n","import React from \"react\";\r\nimport FooterBase from \"../FooterBase\";\r\nimport { FooterProps } from \"../Footer.types\";\r\nimport IconButton from \"../../IconButton/core/IconButton\";\r\nimport ThemeSelect from \"../../Select/ThemeSelect/core/ThemeSelect\";\r\nimport \"./Footer.scss\";\r\n\r\nconst classes = {\r\n  footer: \"footer\",\r\n\r\n  primary: \"footer_primary\",\r\n  secondary: \"footer_secondary\",\r\n  tertiary: \"footer_tertiary\",\r\n  quaternary: \"footer_quaternary\",\r\n  clear: \"footer_clear\",\r\n\r\n  shadowNone: \"footer_shadow-None\",\r\n  shadowLight: \"footer_shadow-Light\",\r\n  shadowMedium: \"footer_shadow-Medium\",\r\n  shadowStrong: \"footer_shadow-Strong\",\r\n  shadowIntense: \"footer_shadow-Intense\",\r\n\r\n  roundNone: \"footer_round-None\",\r\n  roundSmall: \"footer_round-Small\",\r\n  roundMedium: \"footer_round-Medium\",\r\n  roundLarge: \"footer_round-Large\",\r\n\r\n  attachmentStatic: \"footer_attachment-static\",\r\n  attachmentFixed: \"footer_attachment-fixed\",\r\n  attachmentSticky: \"footer_attachment-sticky\",\r\n\r\n  content: \"footer_content\",\r\n  logo: \"footer_logo\",\r\n  left: \"footer_left\",\r\n  links: \"footer_links\",\r\n  link: \"footer_link\",\r\n  social: \"footer_social\",\r\n\r\n  themeToggle: \"footer_theme_toggle\",\r\n};\r\n\r\nconst Footer: React.FC<FooterProps> = (props) => {\r\n  return (\r\n    <FooterBase\r\n      {...props}\r\n      IconButton={IconButton}\r\n      ThemeSelect={ThemeSelect}\r\n      classMap={classes}\r\n    />\r\n  );\r\n};\r\n\r\nexport default Footer;\r\n"],"names":["getDefaultTheme","getDefaultShadow","getDefaultRounding","getAllColorSchemes","useContext","ThemeContext","jsx","Select","IconButton","useMemo","combineClassNames","capitalize","jsxs","ThemeSelect"],"mappings":"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"}

package/dist/core/Footer.cjs.js

@@ -1,4 +1,4 @@
 "use strict";
-const Footer = require("./Footer-BKfoTV0l.cjs");
+const Footer = require("./Footer-CgPo0kjA.cjs");
 module.exports = Footer.Footer;
 //# sourceMappingURL=Footer.cjs.js.map

package/dist/core/Footer.js

@@ -1,4 +1,4 @@
-import { F } from "./Footer-CJOKuXJh.js";
+import { F } from "./Footer-Bi3OLtAi.js";
 export {
   F as default
 };

package/dist/core/index.cjs.js

@@ -11,7 +11,7 @@ const STT = require("./STT-CKXp-dIO.cjs");
 const TextInput = require("./TextInput-8AbKEfUH.cjs");
 const TextArea = require("./TextArea-Dn9aynnY.cjs");
 const Select = require("./Select-DWzxymiA.cjs");
-const Footer = require("./Footer-BKfoTV0l.cjs");
+const Footer = require("./Footer-CgPo0kjA.cjs");
 const FileUpload = require("./FileUpload-Dv2cvYI2.cjs");
 const TagInput = require("./TagInput-BMPHihSz.cjs");
 const RadioButton = require("./RadioButton-DP8HSNZD.cjs");
@@ -53,7 +53,7 @@ const EmptyState = require("./EmptyState-BAaCfJzO.cjs");
 const CommandPalette = require("./CommandPalette-XTi50U_E.cjs");
 const NotificationCenter = require("./NotificationCenter-DxaqoUD1.cjs");
 const Sidebar = require("./Sidebar-CqTJJULG.cjs");
-const Card = require("./Card-DCxLBwi0.cjs");
+const Card = require("./Card-B8vnbUG9.cjs");
 const Avatar = require("./Avatar-B3hD_M2R.cjs");
 const ChipGroupBase = React.forwardRef(
   ({

package/dist/core/index.js

@@ -10,7 +10,7 @@ import { S } from "./STT-CA0J3Cr9.js";
 import { T as T2 } from "./TextInput-CtI8fsXR.js";
 import { T as T3 } from "./TextArea-B0it55lO.js";
 import { S as S2 } from "./Select-CDWU_cuN.js";
-import { F, U } from "./Footer-CJOKuXJh.js";
+import { F, U } from "./Footer-Bi3OLtAi.js";
 import { F as F2 } from "./FileUpload-DxjQ2wnn.js";
 import { T as T4 } from "./TagInput-CrScreYL.js";
 import { R } from "./RadioButton-DTPBlw1t.js";
@@ -52,7 +52,7 @@ import { E } from "./EmptyState-Bd-es_rG.js";
 import { C as C4 } from "./CommandPalette-CHOC0Z2m.js";
 import { N as N2 } from "./NotificationCenter-Bp7AqnTg.js";
 import { S as S7 } from "./Sidebar-z0mG5nn_.js";
-import { C as C5 } from "./Card-DKPk0zgQ.js";
+import { C as C5 } from "./Card-CaCboEwS.js";
 import { A as A2 } from "./Avatar-BxHxzh30.js";
 const ChipGroupBase = forwardRef(
   ({

package/dist/core/style.css

@@ -4015,13 +4015,20 @@ a:hover {
 .card_fade-in {
   animation: fade-in 0.8s ease-in-out;
 }
-.card_image {
+.card_media {
   width: 100%;
   height: auto;
   position: relative;
+  aspect-ratio: 4/4;
   object-fit: cover;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }
+.card_image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+}
 .card_vertical {
   flex-direction: column;
 }

package/dist/next/{Card-B7oD0UlA.cjs → Card-Bk3Kx1sY.cjs}

@@ -8,56 +8,57 @@ const React = require("react");
 const classNames = require("./classNames-BcWMx052.cjs");
 const capitalize = require("./capitalize-DoV-nOmN.cjs");
 const borealStyleConfig = require("./boreal-style-config-Rr5d5Qts.cjs");
-const noScroll = "_noScroll_c3gye_91";
-const errorMessage = "_errorMessage_c3gye_92";
-const loadingContainer = "_loadingContainer_c3gye_93";
-const hideScrollbar = "_hideScrollbar_c3gye_85";
-const sr_only = "_sr_only_c3gye_94";
-const card = "_card_c3gye_539";
-const roundNone = "_roundNone_c3gye_553";
-const roundSmall = "_roundSmall_c3gye_557";
-const roundMedium = "_roundMedium_c3gye_561";
-const roundLarge = "_roundLarge_c3gye_565";
-const roundFull = "_roundFull_c3gye_569";
-const shadowNone = "_shadowNone_c3gye_573";
-const shadowLight = "_shadowLight_c3gye_577";
-const shadowMedium = "_shadowMedium_c3gye_581";
-const shadowStrong = "_shadowStrong_c3gye_585";
-const shadowIntense = "_shadowIntense_c3gye_589";
-const loading = "_loading_c3gye_93";
-const fade_in = "_fade_in_c3gye_604";
-const image = "_image_c3gye_608";
-const vertical = "_vertical_c3gye_616";
-const content = "_content_c3gye_619";
-const horizontal = "_horizontal_c3gye_627";
-const body = "_body_c3gye_650";
-const footer = "_footer_c3gye_657";
-const disabled = "_disabled_c3gye_661";
-const outline = "_outline_c3gye_670";
-const primary = "_primary_c3gye_676";
-const icon = "_icon_c3gye_680";
-const description = "_description_c3gye_681";
-const secondary = "_secondary_c3gye_694";
-const tertiary = "_tertiary_c3gye_712";
-const quaternary = "_quaternary_c3gye_730";
-const clear = "_clear_c3gye_748";
-const success = "_success_c3gye_766";
-const error = "_error_c3gye_92";
-const warning = "_warning_c3gye_800";
-const header = "_header_c3gye_823";
-const title = "_title_c3gye_842";
-const actions = "_actions_c3gye_867";
-const xs = "_xs_c3gye_874";
-const children = "_children_c3gye_884";
-const small = "_small_c3gye_888";
-const medium = "_medium_c3gye_901";
-const large = "_large_c3gye_914";
-const xl = "_xl_c3gye_927";
-const left = "_left_c3gye_940";
-const center = "_center_c3gye_952";
-const right = "_right_c3gye_964";
-const spin = "_spin_c3gye_1";
-const pulse = "_pulse_c3gye_1";
+const noScroll = "_noScroll_1rudq_91";
+const errorMessage = "_errorMessage_1rudq_92";
+const loadingContainer = "_loadingContainer_1rudq_93";
+const hideScrollbar = "_hideScrollbar_1rudq_85";
+const sr_only = "_sr_only_1rudq_94";
+const card = "_card_1rudq_539";
+const roundNone = "_roundNone_1rudq_553";
+const roundSmall = "_roundSmall_1rudq_557";
+const roundMedium = "_roundMedium_1rudq_561";
+const roundLarge = "_roundLarge_1rudq_565";
+const roundFull = "_roundFull_1rudq_569";
+const shadowNone = "_shadowNone_1rudq_573";
+const shadowLight = "_shadowLight_1rudq_577";
+const shadowMedium = "_shadowMedium_1rudq_581";
+const shadowStrong = "_shadowStrong_1rudq_585";
+const shadowIntense = "_shadowIntense_1rudq_589";
+const loading = "_loading_1rudq_93";
+const fade_in = "_fade_in_1rudq_604";
+const media = "_media_1rudq_608";
+const image = "_image_1rudq_617";
+const vertical = "_vertical_1rudq_622";
+const content = "_content_1rudq_625";
+const horizontal = "_horizontal_1rudq_633";
+const body = "_body_1rudq_656";
+const footer = "_footer_1rudq_663";
+const disabled = "_disabled_1rudq_667";
+const outline = "_outline_1rudq_676";
+const primary = "_primary_1rudq_682";
+const icon = "_icon_1rudq_686";
+const description = "_description_1rudq_687";
+const secondary = "_secondary_1rudq_700";
+const tertiary = "_tertiary_1rudq_718";
+const quaternary = "_quaternary_1rudq_736";
+const clear = "_clear_1rudq_754";
+const success = "_success_1rudq_772";
+const error = "_error_1rudq_92";
+const warning = "_warning_1rudq_806";
+const header = "_header_1rudq_829";
+const title = "_title_1rudq_848";
+const actions = "_actions_1rudq_873";
+const xs = "_xs_1rudq_880";
+const children = "_children_1rudq_890";
+const small = "_small_1rudq_894";
+const medium = "_medium_1rudq_907";
+const large = "_large_1rudq_920";
+const xl = "_xl_1rudq_933";
+const left = "_left_1rudq_946";
+const center = "_center_1rudq_958";
+const right = "_right_1rudq_970";
+const spin = "_spin_1rudq_1";
+const pulse = "_pulse_1rudq_1";
 const styles = {
   noScroll,
   errorMessage,
@@ -77,7 +78,8 @@ const styles = {
   shadowIntense,
   loading,
   fade_in,
-  "fade-in": "_fade-in_c3gye_1",
+  "fade-in": "_fade-in_1rudq_1",
+  media,
   image,
   vertical,
   content,
@@ -108,14 +110,14 @@ const styles = {
   left,
   center,
   right,
-  "slide-up": "_slide-up_c3gye_1",
-  "spin-3d": "_spin-3d_c3gye_1",
+  "slide-up": "_slide-up_1rudq_1",
+  "spin-3d": "_spin-3d_1rudq_1",
   spin,
   pulse,
-  "fade-in-up": "_fade-in-up_c3gye_1",
-  "progress-grow": "_progress-grow_c3gye_1",
-  "indeterminate-move": "_indeterminate-move_c3gye_1",
-  "skeleton-loading": "_skeleton-loading_c3gye_1"
+  "fade-in-up": "_fade-in-up_1rudq_1",
+  "progress-grow": "_progress-grow_1rudq_1",
+  "indeterminate-move": "_indeterminate-move_1rudq_1",
+  "skeleton-loading": "_skeleton-loading_1rudq_1"
 };
 const CardBase = ({
   theme = borealStyleConfig.getDefaultTheme(),
@@ -127,6 +129,9 @@ const CardBase = ({
   shadow = borealStyleConfig.getDefaultShadow(),
   imageUrl,
   imageAlt,
+  imageHeight,
+  imageWidth,
+  imageFill,
   className = "",
   imageClassName = "",
   headerClassName = "",
@@ -155,9 +160,13 @@ const CardBase = ({
   const headerId = ariaLabelledBy || `${autoId}-header`;
   const descriptionId = `${autoId}-description`;
   const hasImage = !!imageUrl;
-  const showBlur = blur && typeof imageUrl !== "string";
   const derivedAriaLabel = ariaLabel || title2 || description2 || "Content card";
   const FallbackImage = (props) => /* @__PURE__ */ require$$2.jsx("img", { ...props });
+  const hasImageObj = typeof imageUrl === "object" && imageUrl && "src" in imageUrl;
+  const imgSrc = hasImageObj ? imageUrl.src : imageUrl;
+  const resolvedWidth = (hasImageObj ? imageUrl.width : void 0) ?? imageWidth;
+  const resolvedHeight = (hasImageObj ? imageUrl.height : void 0) ?? imageHeight;
+  const imgAlt = imageAlt || `${title2 || "Card"} image`;
   const ImageRenderer = ImageComponent || FallbackImage;
   const cardClassName = React.useMemo(
     () => classNames.combineClassNames(
@@ -184,15 +193,24 @@ const CardBase = ({
       "aria-labelledby": title2 ? headerId : void 0,
       "aria-label": !title2 ? derivedAriaLabel : void 0,
       children: loading2 ? /* @__PURE__ */ require$$2.jsx(SkeletonComponent, { width: "100%", height: "250px", "data-testid": "skeleton" }) : /* @__PURE__ */ require$$2.jsxs("div", { className: classMap.content, children: [
-        hasImage && /* @__PURE__ */ require$$2.jsx(
+        hasImage && (imageFill ? /* @__PURE__ */ require$$2.jsx("div", { className: classMap.media, children: /* @__PURE__ */ require$$2.jsx(
           ImageRenderer,
           {
-            src: imageUrl,
-            alt: imageAlt || `${title2 || "Card"} image`,
+            src: imgSrc,
+            alt: imgAlt,
             className: classNames.combineClassNames(classMap.image, imageClassName),
-            placeholder: showBlur ? "blur" : void 0
+            fill: true
           }
-        ),
+        ) }) : /* @__PURE__ */ require$$2.jsx(
+          ImageRenderer,
+          {
+            src: imgSrc,
+            alt: imgAlt,
+            className: classNames.combineClassNames(classMap.image, imageClassName),
+            width: resolvedWidth ?? 640,
+            height: resolvedHeight ?? 360
+          }
+        )),
         /* @__PURE__ */ require$$2.jsxs("div", { children: [
           /* @__PURE__ */ require$$2.jsx(
             "div",
@@ -291,4 +309,4 @@ const Card = (props) => {
   );
 };
 exports.Card = Card;
-//# sourceMappingURL=Card-B7oD0UlA.cjs.map
+//# sourceMappingURL=Card-Bk3Kx1sY.cjs.map