@lumx/react 3.20.1-alpha.36 → 3.20.1-alpha.38

package/_internal/components/flag/index-33e9d909.js

@@ -1,59 +0,0 @@
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { u as useTheme } from '../../3181f000.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Theme, ColorPalette, Size } from '@lumx/core/js/constants';
-import { I as Icon } from '../../bace1bf1.js';
-import { T as Text } from '../../e913a3af.js';
-
-const COMPONENT_NAME = 'Flag';
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-const DEFAULT_PROPS = {};
-
-/**
- * Flag component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Flag = forwardRef((props, ref) => {
-  const defaultTheme = useTheme() || Theme.light;
-  const {
-    label,
-    icon,
-    color,
-    className,
-    theme = defaultTheme,
-    truncate,
-    ...forwardedProps
-  } = props;
-  const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);
-  const isTruncated = !!truncate;
-  return /*#__PURE__*/jsxs("div", {
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME,
-      color: flagColor,
-      isTruncated
-    })),
-    ref: ref,
-    children: [icon && /*#__PURE__*/jsx(Icon, {
-      icon: icon,
-      size: Size.xxs,
-      className: `${CLASSNAME}__icon`
-    }), /*#__PURE__*/jsx(Text, {
-      as: "span",
-      truncate: isTruncated,
-      typography: "overline",
-      className: `${CLASSNAME}__label`,
-      children: label
-    })]
-  });
-});
-Flag.displayName = COMPONENT_NAME;
-Flag.className = CLASSNAME;
-Flag.defaultProps = DEFAULT_PROPS;
-
-export { Flag };

package/_internal/components/flex-box/index-0d6b6b43.js

@@ -1,56 +0,0 @@
-import classNames from 'classnames';
-import castArray from 'lodash/castArray';
-import { Orientation } from '@lumx/core/js/constants';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsx } from 'react/jsx-runtime';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'FlexBox';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * FlexBox component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const FlexBox = forwardRef((props, ref) => {
-  const {
-    as: Component = 'div',
-    children,
-    className,
-    fillSpace,
-    gap,
-    hAlign,
-    marginAuto,
-    noShrink,
-    orientation,
-    vAlign,
-    wrap,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx(Component, {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME,
-      orientation: orientation ?? (wrap || hAlign || vAlign ? Orientation.horizontal : null),
-      vAlign,
-      hAlign,
-      gap
-    }), wrap && `${CLASSNAME}--wrap`, fillSpace && `${CLASSNAME}--fill-space`, noShrink && `${CLASSNAME}--no-shrink`, marginAuto && castArray(marginAuto).map(align => `${CLASSNAME}--margin-auto-${align}`)),
-    children: children
-  });
-});
-FlexBox.displayName = COMPONENT_NAME;
-FlexBox.className = CLASSNAME;
-
-export { FlexBox };

package/_internal/components/generic-block/index-836c4352.js

@@ -1,124 +0,0 @@
-import React__default, { Children } from 'react';
-import classNames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
-import noop from 'lodash/noop';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { p as partitionMulti } from '../../4daccdd5.js';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsxs } from 'react/jsx-runtime';
-import { i as isComponentType } from '../../e806b848.js';
-import { Size, Orientation } from '@lumx/core/js/constants';
-import { FlexBox } from '../flex-box/index-0d6b6b43.js';
-import pick from 'lodash/pick';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'GenericBlock';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  gap: Size.big,
-  orientation: Orientation.horizontal
-};
-const Figure = noop.bind({});
-const isFigure = isComponentType(Figure);
-const Content = noop.bind({});
-const isContent = isComponentType(Content);
-const Actions = noop.bind({});
-const isActions = isComponentType(Actions);
-
-/**
- * The GenericBlock is a layout component made of 3 sections that can be
- * displayed either horizontally of vertically with the same gap between each section.
- *
- * The sections are:
- * - `Figure` => A visual element to display before the main content.
- * - `Content` => The main content displayed
- * - `Actions` => One or more actions to set after the element.
- *
- * @see https://www.figma.com/file/lzzrQmsfaXRaOyRfoEogPZ/DS%3A-playground?node-id=1%3A4076
- */
-const BaseGenericBlock = forwardRef((props, ref) => {
-  const {
-    className,
-    figure,
-    figureProps,
-    children,
-    actions,
-    actionsProps,
-    gap = DEFAULT_PROPS.gap,
-    orientation = DEFAULT_PROPS.orientation,
-    contentProps,
-    ...forwardedProps
-  } = props;
-  const sections = React__default.useMemo(() => {
-    // Split children by section type
-    const [[figureChild], [contentChild], [actionsChild], ...otherChildren] = partitionMulti(Children.toArray(children), [isFigure, isContent, isActions]);
-    return {
-      figureChild,
-      figureChildProps: figureChild?.props,
-      contentChild,
-      contentChildProps: contentChild?.props,
-      actionsChild,
-      actionsChildProps: actionsChild?.props,
-      otherChildren: otherChildren.filter(child => !isEmpty(child))
-    };
-  }, [children]);
-  return /*#__PURE__*/jsxs(FlexBox, {
-    ref: ref,
-    className: classNames(className, CLASSNAME),
-    gap: gap,
-    orientation: orientation,
-    ...forwardedProps,
-    children: [(figure || sections.figureChildProps?.children) && /*#__PURE__*/jsxs(FlexBox, {
-      ref: sections.figureChild?.ref,
-      vAlign: forwardedProps.vAlign,
-      hAlign: forwardedProps.hAlign,
-      ...figureProps,
-      ...sections.figureChildProps,
-      className: classNames(figureProps?.className, sections.figureChildProps?.className, `${CLASSNAME}__figure`),
-      children: [figure, sections.figureChildProps?.children]
-    }), (sections.contentChildProps?.children || sections.otherChildren.length > 0) && /*#__PURE__*/jsxs(FlexBox, {
-      ref: sections.contentChild?.ref,
-      orientation: Orientation.vertical,
-      fillSpace: true,
-      vAlign: forwardedProps.vAlign,
-      hAlign: forwardedProps.hAlign,
-      ...contentProps,
-      ...sections.contentChildProps,
-      className: classNames(contentProps?.className, sections.contentChildProps?.className, `${CLASSNAME}__content`),
-      children: [sections.contentChildProps?.children, sections.otherChildren]
-    }), (actions || sections.actionsChildProps?.children) && /*#__PURE__*/jsxs(FlexBox, {
-      ref: sections.actionsChild?.ref,
-      vAlign: forwardedProps.vAlign,
-      hAlign: forwardedProps.hAlign,
-      ...actionsProps,
-      ...sections.actionsChildProps,
-      className: classNames(actionsProps?.className, sections.actionsChildProps?.className, `${CLASSNAME}__actions`),
-      children: [actions, sections.actionsChildProps?.children]
-    })]
-  });
-});
-BaseGenericBlock.displayName = COMPONENT_NAME;
-BaseGenericBlock.className = CLASSNAME;
-BaseGenericBlock.defaultProps = DEFAULT_PROPS;
-const GenericBlock = Object.assign(BaseGenericBlock, {
-  Figure,
-  Content,
-  Actions
-});
-
-/**
- * Accepted gap sizes for the generic block.
- */
-const GenericBlockGapSize = pick(Size, ['tiny', 'regular', 'medium', 'big', 'huge']);
-
-export { GenericBlock, GenericBlockGapSize };

package/_internal/components/grid/index-8c16a4f1.js

@@ -1,104 +0,0 @@
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsx } from 'react/jsx-runtime';
-import { Orientation } from '@lumx/core/js/constants';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME$1 = 'Grid';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME$1 = getRootClassName(COMPONENT_NAME$1);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {
-  orientation: Orientation.horizontal,
-  wrap: 'nowrap'
-};
-
-/**
- * Grid component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const Grid = forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    gutter,
-    hAlign,
-    orientation = DEFAULT_PROPS.orientation,
-    vAlign,
-    wrap = DEFAULT_PROPS.wrap,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, `${CLASSNAME$1}-container`, {
-      [`${CLASSNAME$1}--h-align-${hAlign}`]: hAlign
-    }, {
-      [`${CLASSNAME$1}--v-align-${vAlign}`]: vAlign
-    }, handleBasicClasses({
-      prefix: CLASSNAME$1,
-      orientation,
-      wrap,
-      gutter
-    })),
-    children: children
-  });
-});
-Grid.displayName = COMPONENT_NAME$1;
-Grid.className = CLASSNAME$1;
-Grid.defaultProps = DEFAULT_PROPS;
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'GridItem';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * GridItem component.
- *
- * @param  props Component props.
- * @param  ref   Component ref.
- * @return React element.
- */
-const GridItem = forwardRef((props, ref) => {
-  const {
-    children,
-    className,
-    width,
-    align,
-    order,
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx("div", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME,
-      width,
-      order,
-      align
-    })),
-    children: children
-  });
-});
-GridItem.displayName = COMPONENT_NAME;
-GridItem.className = CLASSNAME;
-
-export { Grid, GridItem };

package/_internal/components/grid-column/index-4a2f56bb.js

@@ -1,59 +0,0 @@
-import isInteger from 'lodash/isInteger';
-import classNames from 'classnames';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../../8bce732e.js';
-import { jsx } from 'react/jsx-runtime';
-
-/**
- * Component display name.
- */
-const COMPONENT_NAME = 'GridColumn';
-
-/**
- * Component default class name and class prefix.
- */
-const CLASSNAME = getRootClassName(COMPONENT_NAME);
-
-/**
- * Component default props.
- */
-const DEFAULT_PROPS = {};
-
-/**
- * The GridColumn is a layout component that can display children in a grid
- * with custom display properties. It also comes with a responsive design,
- * with a number of column that reduce when there is not enough space for each item.
- *
- * @param props Component props.
- * @param ref Component ref.
- * @return React element.
- */
-const GridColumn = forwardRef((props, ref) => {
-  const {
-    as: Component = 'div',
-    gap,
-    maxColumns,
-    itemMinWidth,
-    children,
-    className,
-    style = {},
-    ...forwardedProps
-  } = props;
-  return /*#__PURE__*/jsx(Component, {
-    ...forwardedProps,
-    ref: ref,
-    className: classNames(className, CLASSNAME),
-    style: {
-      ...style,
-      ['--lumx-grid-column-item-min-width']: isInteger(itemMinWidth) && `${itemMinWidth}px`,
-      ['--lumx-grid-column-columns']: maxColumns,
-      ['--lumx-grid-column-gap']: gap && `var(--lumx-spacing-unit-${gap})`
-    },
-    children: children
-  });
-});
-GridColumn.displayName = COMPONENT_NAME;
-GridColumn.className = CLASSNAME;
-GridColumn.defaultProps = DEFAULT_PROPS;
-
-export { GridColumn };

package/_internal/components/heading/index-fd558a9a.js

@@ -1,53 +0,0 @@
-import classNames from 'classnames';
-import { getRootClassName } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../../8bce732e.js';
-import { u as useHeadingLevel, D as DEFAULT_TYPOGRAPHY_BY_LEVEL } from '../../ebdcb0c7.js';
-export { H as HeadingLevelProvider } from '../../ebdcb0c7.js';
-import { jsx } from 'react/jsx-runtime';
-import { T as Text } from '../../e913a3af.js';
-
-/**
- * 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__*/jsx(Text, {
-    ref: ref,
-    className: classNames(className, CLASSNAME),
-    as: computedHeadingElement,
-    typography: DEFAULT_TYPOGRAPHY_BY_LEVEL[computedHeadingElement],
-    ...forwardedProps,
-    children: children
-  });
-});
-Heading.displayName = COMPONENT_NAME;
-Heading.className = CLASSNAME;
-Heading.defaultProps = DEFAULT_PROPS;
-
-export { Heading, useHeadingLevel };

package/_internal/components/icon/index-e7b9b40e.js

@@ -1 +0,0 @@
-export { I as Icon } from '../../bace1bf1.js';

package/_internal/components/image-block/index-7021c2f1.js

@@ -1,110 +0,0 @@
-import classNames from 'classnames';
-import { getRootClassName, handleBasicClasses } from '@lumx/core/js/utils/className';
-import { f as forwardRef } from '../../8bce732e.js';
-import { u as useTheme } from '../../3181f000.js';
-import { I as ImageCaption } from '../../5cef5e8c.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { Alignment, Theme } from '@lumx/core/js/constants';
-import { T as Thumbnail } from '../../035c132d.js';
-
-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__*/jsxs("figure", {
-    ref: ref,
-    ...forwardedProps,
-    className: classNames(className, handleBasicClasses({
-      prefix: CLASSNAME,
-      captionPosition,
-      align,
-      size,
-      theme
-    }), fillHeight && `${CLASSNAME}--fill-height`),
-    children: [/*#__PURE__*/jsx(Thumbnail, {
-      ...thumbnailProps,
-      className: classNames(`${CLASSNAME}__image`, thumbnailProps?.className),
-      fillHeight: fillHeight,
-      align: align,
-      image: image,
-      size: size,
-      theme: theme,
-      alt: alt || title
-    }), /*#__PURE__*/jsx(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__*/jsx("div", {
-      className: `${CLASSNAME}__actions`,
-      children: actions
-    })]
-  });
-});
-ImageBlock.displayName = COMPONENT_NAME;
-ImageBlock.className = CLASSNAME;
-ImageBlock.defaultProps = DEFAULT_PROPS;
-
-export { ImageBlock, ImageBlockCaptionPosition };