@lumx/react 3.20.1-alpha.14 → 3.20.1-alpha.15

package/_internal/components/grid-column-985b9327.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-column-985b9327.js","sources":["../../../src/components/grid-column/GridColumn.tsx"],"sourcesContent":["import { ReactElement, ReactNode } from 'react';\n\nimport isInteger from 'lodash/isInteger';\nimport classNames from 'classnames';\n\nimport { Size } from '@lumx/react';\nimport { GenericProps } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nexport type GridColumnGapSize = Extract<Size, 'tiny' | 'regular' | 'big' | 'huge'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface GridColumnProps extends GenericProps {\n    /** Customize the root element. */\n    as?: React.ElementType;\n    /** Children elements. */\n    children?: ReactNode;\n    /** Space between columns and rows. */\n    gap?: GridColumnGapSize;\n    /** Ideal number of columns. */\n    maxColumns?: number;\n    /** Minimum width for each item, reduce the number of column if there is not enough space. */\n    itemMinWidth?: number;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'GridColumn';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<GridColumnProps> = {};\n\n/**\n * The GridColumn is a layout component that can display children in a grid\n * with custom display properties. It also comes with a responsive design,\n * with a number of column that reduce when there is not enough space for each item.\n *\n * @param props Component props.\n * @param ref Component ref.\n * @return React element.\n */\nexport const GridColumn = forwardRef<GridColumnProps>((props, ref): ReactElement => {\n    const {\n        as: Component = 'div',\n        gap,\n        maxColumns,\n        itemMinWidth,\n        children,\n        className,\n        style = {},\n        ...forwardedProps\n    } = props;\n\n    return (\n        <Component\n            {...forwardedProps}\n            ref={ref as React.Ref<any>}\n            className={classNames(className, CLASSNAME)}\n            style={{\n                ...style,\n                ['--lumx-grid-column-item-min-width' as any]: isInteger(itemMinWidth) && `${itemMinWidth}px`,\n                ['--lumx-grid-column-columns' as any]: maxColumns,\n                ['--lumx-grid-column-gap' as any]: gap && `var(--lumx-spacing-unit-${gap})`,\n            }}\n        >\n            {children}\n        </Component>\n    );\n});\nGridColumn.displayName = COMPONENT_NAME;\nGridColumn.className = CLASSNAME;\nGridColumn.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","GridColumn","forwardRef","props","ref","as","Component","gap","maxColumns","itemMinWidth","children","className","style","forwardedProps","React","createElement","_extends","classNames","isInteger","displayName","defaultProps"],"mappings":";;;;AAYA;AACA;AACA;;AAcA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,YAAY,CAAA;;AAEnC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAuC,GAAG,EAAE,CAAA;;AAElD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMC,UAAU,GAAGC,UAAU,CAAkB,CAACC,KAAK,EAAEC,GAAG,KAAmB;EAChF,MAAM;IACFC,EAAE,EAAEC,SAAS,GAAG,KAAK;IACrBC,GAAG;IACHC,UAAU;IACVC,YAAY;IACZC,QAAQ;IACRC,SAAS;IACTC,KAAK,GAAG,EAAE;IACV,GAAGC,cAAAA;AACP,GAAC,GAAGV,KAAK,CAAA;EAET,oBACIW,KAAA,CAAAC,aAAA,CAACT,SAAS,EAAAU,QAAA,KACFH,cAAc,EAAA;AAClBT,IAAAA,GAAG,EAAEA,GAAsB;AAC3BO,IAAAA,SAAS,EAAEM,UAAU,CAACN,SAAS,EAAEb,SAAS,CAAE;AAC5Cc,IAAAA,KAAK,EAAE;AACH,MAAA,GAAGA,KAAK;MACR,CAAC,mCAAmC,GAAUM,SAAS,CAACT,YAAY,CAAC,IAAI,CAAGA,EAAAA,YAAY,CAAI,EAAA,CAAA;MAC5F,CAAC,4BAA4B,GAAUD,UAAU;AACjD,MAAA,CAAC,wBAAwB,GAAUD,GAAG,IAAI,2BAA2BA,GAAG,CAAA,CAAA,CAAA;AAC5E,KAAA;AAAE,GAAA,CAAA,EAEDG,QACM,CAAC,CAAA;AAEpB,CAAC,EAAC;AACFT,UAAU,CAACkB,WAAW,GAAGtB,cAAc,CAAA;AACvCI,UAAU,CAACU,SAAS,GAAGb,SAAS,CAAA;AAChCG,UAAU,CAACmB,YAAY,GAAGpB,aAAa;;;;"}

package/_internal/components/heading-5e954dfc.js

@@ -0,0 +1,54 @@
+import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
+import { getRootClassName } from '@lumx/core/js/utils/className';
+import { u as useHeadingLevel, D as DEFAULT_TYPOGRAPHY_BY_LEVEL } from '../HeadingLevelProvider-e4817816.js';
+export { H as HeadingLevelProvider } from '../HeadingLevelProvider-e4817816.js';
+import { T as Text } from '../index-b4d256e7.js';
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Heading';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * Renders a heading component.
+ * Extends the `Text` Component with the heading level automatically computed based on
+ * the current level provided by the context.
+ */
+const Heading = forwardRef((props, ref) => {
+  const {
+    children,
+    as,
+    className,
+    ...forwardedProps
+  } = props;
+  const {
+    headingElement
+  } = useHeadingLevel();
+  const computedHeadingElement = as || headingElement;
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    ref: ref,
+    className: classNames(className, CLASSNAME),
+    as: computedHeadingElement,
+    typography: DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]
+  }, forwardedProps), children);
+});
+Heading.displayName = COMPONENT_NAME;
+Heading.className = CLASSNAME;
+Heading.defaultProps = DEFAULT_PROPS;
+
+export { Heading, useHeadingLevel };
+//# sourceMappingURL=heading-5e954dfc.js.map

package/_internal/components/heading-5e954dfc.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"heading-5e954dfc.js","sources":["../../../src/components/heading/Heading.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { HeadingElement } from '@lumx/react/utils/type';\nimport { getRootClassName } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { Text, TextProps } from '../text';\nimport { DEFAULT_TYPOGRAPHY_BY_LEVEL } from './constants';\nimport { useHeadingLevel } from './useHeadingLevel';\n\n/**\n * Defines the props of the component.\n */\nexport interface HeadingProps extends Partial<TextProps> {\n    /**\n     * Display a specific heading level instead of the one provided by parent context provider.\n     */\n    as?: HeadingElement;\n    /**\n     * Children\n     */\n    children?: React.ReactNode;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Heading';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS = {} as const;\n\n/**\n * Renders a heading component.\n * Extends the `Text` Component with the heading level automatically computed based on\n * the current level provided by the context.\n */\nexport const Heading = forwardRef<HeadingProps>((props, ref) => {\n    const { children, as, className, ...forwardedProps } = props;\n    const { headingElement } = useHeadingLevel();\n\n    const computedHeadingElement = as || headingElement;\n    return (\n        <Text\n            ref={ref}\n            className={classNames(className, CLASSNAME)}\n            as={computedHeadingElement}\n            typography={DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement]}\n            {...forwardedProps}\n        >\n            {children}\n        </Text>\n    );\n});\n\nHeading.displayName = COMPONENT_NAME;\nHeading.className = CLASSNAME;\nHeading.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Heading","forwardRef","props","ref","children","as","className","forwardedProps","headingElement","useHeadingLevel","computedHeadingElement","React","createElement","Text","_extends","classNames","typography","DEFAULT_TYPOGRAPHY_BY_LEVEL","displayName","defaultProps"],"mappings":";;;;;;AAUA;AACA;AACA;;AAYA;AACA;AACA;AACA,MAAMA,cAAc,GAAG,SAAS,CAAA;;AAEhC;AACA;AACA;AACA,MAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAc,CAAC,CAAA;;AAElD;AACA;AACA;AACA,MAAMG,aAAa,GAAG,EAAW,CAAA;;AAEjC;AACA;AACA;AACA;AACA;AACO,MAAMC,OAAO,GAAGC,UAAU,CAAe,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC5D,MAAM;IAAEC,QAAQ;IAAEC,EAAE;IAAEC,SAAS;IAAE,GAAGC,cAAAA;AAAe,GAAC,GAAGL,KAAK,CAAA;EAC5D,MAAM;AAAEM,IAAAA,cAAAA;GAAgB,GAAGC,eAAe,EAAE,CAAA;AAE5C,EAAA,MAAMC,sBAAsB,GAAGL,EAAE,IAAIG,cAAc,CAAA;AACnD,EAAA,oBACIG,KAAA,CAAAC,aAAA,CAACC,IAAI,EAAAC,QAAA,CAAA;AACDX,IAAAA,GAAG,EAAEA,GAAI;AACTG,IAAAA,SAAS,EAAES,UAAU,CAACT,SAAS,EAAET,SAAS,CAAE;AAC5CQ,IAAAA,EAAE,EAAEK,sBAAuB;IAC3BM,UAAU,EAAEC,2BAA2B,CAACP,sBAAsB,CAAA;GAC1DH,EAAAA,cAAc,CAEjBH,EAAAA,QACC,CAAC,CAAA;AAEf,CAAC,EAAC;AAEFJ,OAAO,CAACkB,WAAW,GAAGtB,cAAc,CAAA;AACpCI,OAAO,CAACM,SAAS,GAAGT,SAAS,CAAA;AAC7BG,OAAO,CAACmB,YAAY,GAAGpB,aAAa;;;;"}

package/_internal/components/icon-2e7345ad.js

@@ -0,0 +1,103 @@
+import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
+import { mdiAlertCircle } from '@lumx/icons';
+import { getRootClassName, resolveColorWithVariants, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useTheme } from '../ThemeContext-3181f000.js';
+import { Theme, ColorPalette, Size } from '@lumx/core/js/constants';
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'Icon';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {};
+
+/**
+ * Icon component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const Icon = forwardRef((props, ref) => {
+  const defaultTheme = useTheme();
+  const {
+    className,
+    color: propColor,
+    colorVariant: propColorVariant,
+    hasShape,
+    icon,
+    size,
+    theme = defaultTheme,
+    alt,
+    ...forwardedProps
+  } = props;
+  const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);
+
+  // Color
+  let iconColor = color;
+  if (!iconColor && (hasShape || theme)) {
+    iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;
+  }
+
+  // Color variant
+  let iconColorVariant = colorVariant;
+  if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {
+    iconColorVariant = 'L2';
+  }
+
+  // Size
+  let iconSize = size;
+  if (size && hasShape) {
+    if (size === Size.xxs || size === Size.xs) {
+      iconSize = Size.s;
+    } else if (size === Size.xxl) {
+      iconSize = Size.xl;
+    }
+  } else if (hasShape) {
+    iconSize = Size.m;
+  }
+  return /*#__PURE__*/React.createElement("i", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      color: iconColor,
+      colorVariant: iconColorVariant,
+      hasShape,
+      prefix: CLASSNAME,
+      theme,
+      size: iconSize
+    }), !hasShape && `${CLASSNAME}--no-shape`, !hasShape && iconColor === ColorPalette.yellow && icon === mdiAlertCircle && `${CLASSNAME}--has-dark-layer`, `${CLASSNAME}--path`)
+  }), /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": alt ? undefined : 'true',
+    role: alt ? 'img' : undefined,
+    "aria-label": alt,
+    height: "1em",
+    preserveAspectRatio: "xMidYMid meet",
+    style: {
+      verticalAlign: '-0.125em'
+    },
+    viewBox: "0 0 24 24",
+    width: "1em"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: icon,
+    fill: "currentColor"
+  })));
+});
+Icon.displayName = COMPONENT_NAME;
+Icon.className = CLASSNAME;
+Icon.defaultProps = DEFAULT_PROPS;
+
+export { Icon };
+//# sourceMappingURL=icon-2e7345ad.js.map

package/_internal/components/icon-2e7345ad.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-2e7345ad.js","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport { mdiAlertCircle } from '@lumx/icons';\nimport { ColorPalette, ColorVariant, ColorWithVariants, Size, Theme } from '@lumx/react';\nimport { GenericProps, HasTheme } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses, resolveColorWithVariants } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\n\nexport type IconSizes = Extract<Size, 'xxs' | 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface IconProps extends GenericProps, HasTheme {\n    /** Color variant. */\n    color?: ColorWithVariants;\n    /** Lightened or darkened variant of the selected icon color. */\n    colorVariant?: ColorVariant;\n    /** Whether the icon has a shape. */\n    hasShape?: boolean;\n    /**\n     * Icon (SVG path) draw code (`d` property of the `<path>` SVG element).\n     * See https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths\n     */\n    icon: string;\n    /** Size variant. */\n    size?: IconSizes;\n    /** Sets an alternative text on the svg. Will set an `img` role to the svg. */\n    alt?: string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Icon';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<IconProps> = {};\n\n/**\n * Icon component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Icon = forwardRef<IconProps, HTMLElement>((props, ref) => {\n    const defaultTheme = useTheme();\n    const {\n        className,\n        color: propColor,\n        colorVariant: propColorVariant,\n        hasShape,\n        icon,\n        size,\n        theme = defaultTheme,\n        alt,\n        ...forwardedProps\n    } = props;\n    const [color, colorVariant] = resolveColorWithVariants(propColor, propColorVariant);\n\n    // Color\n    let iconColor = color;\n    if (!iconColor && (hasShape || theme)) {\n        iconColor = theme === Theme.dark ? ColorPalette.light : ColorPalette.dark;\n    }\n\n    // Color variant\n    let iconColorVariant = colorVariant;\n    if (!iconColorVariant && hasShape && iconColor === ColorPalette.dark) {\n        iconColorVariant = 'L2';\n    }\n\n    // Size\n    let iconSize = size;\n    if (size && hasShape) {\n        if (size === Size.xxs || size === Size.xs) {\n            iconSize = Size.s;\n        } else if (size === Size.xxl) {\n            iconSize = Size.xl;\n        }\n    } else if (hasShape) {\n        iconSize = Size.m;\n    }\n\n    return (\n        <i\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    color: iconColor,\n                    colorVariant: iconColorVariant,\n                    hasShape,\n                    prefix: CLASSNAME,\n                    theme,\n                    size: iconSize,\n                }),\n                !hasShape && `${CLASSNAME}--no-shape`,\n                !hasShape &&\n                    iconColor === ColorPalette.yellow &&\n                    icon === mdiAlertCircle &&\n                    `${CLASSNAME}--has-dark-layer`,\n                `${CLASSNAME}--path`,\n            )}\n        >\n            <svg\n                aria-hidden={alt ? undefined : 'true'}\n                role={alt ? 'img' : undefined}\n                aria-label={alt}\n                height=\"1em\"\n                preserveAspectRatio=\"xMidYMid meet\"\n                style={{ verticalAlign: '-0.125em' }}\n                viewBox=\"0 0 24 24\"\n                width=\"1em\"\n            >\n                <path d={icon} fill=\"currentColor\" />\n            </svg>\n        </i>\n    );\n});\nIcon.displayName = COMPONENT_NAME;\nIcon.className = CLASSNAME;\nIcon.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","Icon","forwardRef","props","ref","defaultTheme","useTheme","className","color","propColor","colorVariant","propColorVariant","hasShape","icon","size","theme","alt","forwardedProps","resolveColorWithVariants","iconColor","Theme","dark","ColorPalette","light","iconColorVariant","iconSize","Size","xxs","xs","s","xxl","xl","m","React","createElement","_extends","classNames","handleBasicClasses","prefix","yellow","mdiAlertCircle","undefined","role","height","preserveAspectRatio","style","verticalAlign","viewBox","width","d","fill","displayName","defaultProps"],"mappings":"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"}

package/_internal/components/image-block-8d21dd7e.js

@@ -0,0 +1,109 @@
+import { f as forwardRef, _ as _extends, c as classNames } from '../forwardRef-49d2bb84.js';
+import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
+import { u as useTheme } from '../ThemeContext-3181f000.js';
+import { I as ImageCaption } from '../ImageCaption-4279b2b6.js';
+import { Alignment, Theme } from '@lumx/core/js/constants';
+import { T as Thumbnail } from '../Thumbnail-30d2a781.js';
+
+/**
+ * Image block variants.
+ */
+const ImageBlockCaptionPosition = {
+  below: 'below',
+  over: 'over'
+};
+
+/**
+ *  Image block sizes.
+ */
+
+/**
+ * Defines the props of the component.
+ */
+
+/**
+ * Component display name.
+ */
+const COMPONENT_NAME = 'ImageBlock';
+
+/**
+ * Component default class name and class prefix.
+ */
+const CLASSNAME = getRootClassName(COMPONENT_NAME);
+
+/**
+ * Component default props.
+ */
+const DEFAULT_PROPS = {
+  captionPosition: ImageBlockCaptionPosition.below,
+  align: Alignment.left
+};
+
+/**
+ * ImageBlock component.
+ *
+ * @param  props Component props.
+ * @param  ref   Component ref.
+ * @return React element.
+ */
+const ImageBlock = forwardRef((props, ref) => {
+  const defaultTheme = useTheme() || Theme.light;
+  const {
+    actions,
+    align = DEFAULT_PROPS.align,
+    alt,
+    captionPosition = DEFAULT_PROPS.captionPosition,
+    captionStyle,
+    className,
+    description,
+    descriptionProps,
+    fillHeight,
+    image,
+    size,
+    tags,
+    theme = defaultTheme,
+    thumbnailProps,
+    title,
+    titleProps,
+    ...forwardedProps
+  } = props;
+  return /*#__PURE__*/React.createElement("figure", _extends({
+    ref: ref
+  }, forwardedProps, {
+    className: classNames(className, handleBasicClasses({
+      prefix: CLASSNAME,
+      captionPosition,
+      align,
+      size,
+      theme
+    }), fillHeight && `${CLASSNAME}--fill-height`)
+  }), /*#__PURE__*/React.createElement(Thumbnail, _extends({}, thumbnailProps, {
+    className: classNames(`${CLASSNAME}__image`, thumbnailProps?.className),
+    fillHeight: fillHeight,
+    align: align,
+    image: image,
+    size: size,
+    theme: theme,
+    alt: alt || title
+  })), /*#__PURE__*/React.createElement(ImageCaption, {
+    as: "figcaption",
+    baseClassName: CLASSNAME,
+    theme: theme,
+    title: title,
+    titleProps: titleProps,
+    description: description,
+    descriptionProps: descriptionProps,
+    tags: tags,
+    captionStyle: captionStyle,
+    align: align,
+    truncate: captionPosition === 'over'
+  }), actions && /*#__PURE__*/React.createElement("div", {
+    className: `${CLASSNAME}__actions`
+  }, actions));
+});
+ImageBlock.displayName = COMPONENT_NAME;
+ImageBlock.className = CLASSNAME;
+ImageBlock.defaultProps = DEFAULT_PROPS;
+
+export { ImageBlock, ImageBlockCaptionPosition };
+//# sourceMappingURL=image-block-8d21dd7e.js.map

package/_internal/components/image-block-8d21dd7e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-block-8d21dd7e.js","sources":["../../../src/components/image-block/ImageBlock.tsx"],"sourcesContent":["import { ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Alignment, HorizontalAlignment, Size, Theme, Thumbnail } from '@lumx/react';\n\nimport { GenericProps, HasTheme, ValueOf } from '@lumx/react/utils/type';\nimport { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';\nimport { forwardRef } from '@lumx/react/utils/react/forwardRef';\n\nimport { useTheme } from '@lumx/react/utils/theme/ThemeContext';\nimport { ThumbnailProps } from '../thumbnail/Thumbnail';\nimport { ImageCaption, ImageCaptionMetadata } from './ImageCaption';\n\n/**\n * Image block variants.\n */\nexport const ImageBlockCaptionPosition = {\n    below: 'below',\n    over: 'over',\n} as const;\nexport type ImageBlockCaptionPosition = ValueOf<typeof ImageBlockCaptionPosition>;\n\n/**\n *  Image block sizes.\n */\nexport type ImageBlockSize = Extract<Size, 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface ImageBlockProps extends GenericProps, HasTheme, ImageCaptionMetadata {\n    /** Action toolbar content. */\n    actions?: ReactNode;\n    /** Alignment. */\n    align?: HorizontalAlignment;\n    /** Image alternative text. */\n    alt: string;\n    /** Caption position. */\n    captionPosition?: ImageBlockCaptionPosition;\n    /** Whether the image has to fill its container height or not. */\n    fillHeight?: boolean;\n    /** Image URL. */\n    image: string;\n    /** Size variant. */\n    size?: ImageBlockSize;\n    /** Props to pass to the thumbnail (minus those already set by the ImageBlock props). */\n    thumbnailProps?: Omit<ThumbnailProps, 'image' | 'size' | 'theme' | 'align' | 'fillHeight'>;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'ImageBlock';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Component default props.\n */\nconst DEFAULT_PROPS: Partial<ImageBlockProps> = {\n    captionPosition: ImageBlockCaptionPosition.below,\n    align: Alignment.left,\n};\n\n/**\n * ImageBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const ImageBlock = forwardRef<ImageBlockProps, HTMLDivElement>((props, ref) => {\n    const defaultTheme = useTheme() || Theme.light;\n    const {\n        actions,\n        align = DEFAULT_PROPS.align,\n        alt,\n        captionPosition = DEFAULT_PROPS.captionPosition,\n        captionStyle,\n        className,\n        description,\n        descriptionProps,\n        fillHeight,\n        image,\n        size,\n        tags,\n        theme = defaultTheme,\n        thumbnailProps,\n        title,\n        titleProps,\n        ...forwardedProps\n    } = props;\n    return (\n        <figure\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    prefix: CLASSNAME,\n                    captionPosition,\n                    align,\n                    size,\n                    theme,\n                }),\n                fillHeight && `${CLASSNAME}--fill-height`,\n            )}\n        >\n            <Thumbnail\n                {...thumbnailProps}\n                className={classNames(`${CLASSNAME}__image`, thumbnailProps?.className)}\n                fillHeight={fillHeight}\n                align={align}\n                image={image}\n                size={size}\n                theme={theme}\n                alt={(alt || title) as string}\n            />\n            <ImageCaption\n                as=\"figcaption\"\n                baseClassName={CLASSNAME}\n                theme={theme}\n                title={title}\n                titleProps={titleProps}\n                description={description}\n                descriptionProps={descriptionProps}\n                tags={tags}\n                captionStyle={captionStyle}\n                align={align}\n                truncate={captionPosition === 'over'}\n            />\n            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n        </figure>\n    );\n});\nImageBlock.displayName = COMPONENT_NAME;\nImageBlock.className = CLASSNAME;\nImageBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["ImageBlockCaptionPosition","below","over","COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","captionPosition","align","Alignment","left","ImageBlock","forwardRef","props","ref","defaultTheme","useTheme","Theme","light","actions","alt","captionStyle","className","description","descriptionProps","fillHeight","image","size","tags","theme","thumbnailProps","title","titleProps","forwardedProps","React","createElement","_extends","classNames","handleBasicClasses","prefix","Thumbnail","ImageCaption","as","baseClassName","truncate","displayName","defaultProps"],"mappings":"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"}