@lumx/react 2.1.9-alpha-thumbnail3 → 2.1.9-alpha-thumbnail4

package/esm/_internal/Avatar2.js

@@ -44,9 +44,7 @@ var Avatar = forwardRef(function (props, ref) {
       size = props.size,
       theme = props.theme,
       thumbnailProps = props.thumbnailProps,
-      linkProps = props.linkProps,
-      linkAs = props.linkAs,
-      forwardedProps = _objectWithoutProperties(props, ["actions", "alt", "badge", "className", "image", "onClick", "onKeyPress", "size", "theme", "thumbnailProps", "linkProps", "linkAs"]);
+      forwardedProps = _objectWithoutProperties(props, ["actions", "alt", "badge", "className", "image", "onClick", "onKeyPress", "size", "theme", "thumbnailProps"]);
 
   return React.createElement("div", _extends({
     ref: ref
@@ -57,8 +55,6 @@ var Avatar = forwardRef(function (props, ref) {
       theme: theme
     }))
   }), React.createElement(Thumbnail, _extends({
-    linkProps: linkProps,
-    linkAs: linkAs,
     className: "".concat(CLASSNAME, "__thumbnail"),
     onClick: onClick,
     onKeyPress: onKeyPress

package/esm/_internal/Avatar2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar2.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps {\n    /** Action toolbar content. */\n    actions?: ReactNode;\n    /** Image alternative text. */\n    alt: string;\n    /** Badge. */\n    badge?: ReactElement;\n    /** Image URL. */\n    image: string;\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Size variant. */\n    size?: AvatarSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n    thumbnailProps?: Omit<\n        ThumbnailProps,\n        'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n    >;\n    /** Props to pass to the link wrapping the thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\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<AvatarProps> = {\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * Avatar component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        actions,\n        alt,\n        badge,\n        className,\n        image,\n        onClick,\n        onKeyPress,\n        size,\n        theme,\n        thumbnailProps,\n        linkProps,\n        linkAs,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n        >\n            <Thumbnail\n                linkProps={linkProps}\n                linkAs={linkAs}\n                className={`${CLASSNAME}__thumbnail`}\n                onClick={onClick}\n                onKeyPress={onKeyPress}\n                {...thumbnailProps}\n                aspectRatio={AspectRatio.square}\n                size={size}\n                image={image}\n                alt={alt}\n            />\n            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n            {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n        </div>\n    );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","theme","Theme","light","Avatar","forwardRef","props","ref","actions","alt","badge","className","image","onClick","onKeyPress","thumbnailProps","linkProps","linkAs","forwardedProps","classNames","handleBasicClasses","prefix","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;AAQA;;;;AAoCA;;;AAGA,IAAMA,cAAc,GAAG,QAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAmC,GAAG;AACxCC,EAAAA,IAAI,EAAEC,IAAI,CAACC,CAD6B;AAExCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AAF2B,CAA5C;AAKA;;;;;;;;IAOaC,MAAyC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE5EC,OAF4E,GAe5EF,KAf4E,CAE5EE,OAF4E;AAAA,MAG5EC,GAH4E,GAe5EH,KAf4E,CAG5EG,GAH4E;AAAA,MAI5EC,KAJ4E,GAe5EJ,KAf4E,CAI5EI,KAJ4E;AAAA,MAK5EC,SAL4E,GAe5EL,KAf4E,CAK5EK,SAL4E;AAAA,MAM5EC,KAN4E,GAe5EN,KAf4E,CAM5EM,KAN4E;AAAA,MAO5EC,OAP4E,GAe5EP,KAf4E,CAO5EO,OAP4E;AAAA,MAQ5EC,UAR4E,GAe5ER,KAf4E,CAQ5EQ,UAR4E;AAAA,MAS5EhB,IAT4E,GAe5EQ,KAf4E,CAS5ER,IAT4E;AAAA,MAU5EG,KAV4E,GAe5EK,KAf4E,CAU5EL,KAV4E;AAAA,MAW5Ec,cAX4E,GAe5ET,KAf4E,CAW5ES,cAX4E;AAAA,MAY5EC,SAZ4E,GAe5EV,KAf4E,CAY5EU,SAZ4E;AAAA,MAa5EC,MAb4E,GAe5EX,KAf4E,CAa5EW,MAb4E;AAAA,MAczEC,cAdyE,4BAe5EZ,KAf4E;;AAiBhF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQW,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACR,SAAD,EAAYS,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAE1B,SAAV;AAAqBG,MAAAA,IAAI,EAAJA,IAArB;AAA2BG,MAAAA,KAAK,EAALA;AAA3B,KAAD,CAA9B;AAHzB,MAKI,oBAAC,SAAD;AACI,IAAA,SAAS,EAAEe,SADf;AAEI,IAAA,MAAM,EAAEC,MAFZ;AAGI,IAAA,SAAS,YAAKtB,SAAL,gBAHb;AAII,IAAA,OAAO,EAAEkB,OAJb;AAKI,IAAA,UAAU,EAAEC;AALhB,KAMQC,cANR;AAOI,IAAA,WAAW,EAAEO,WAAW,CAACC,MAP7B;AAQI,IAAA,IAAI,EAAEzB,IARV;AASI,IAAA,KAAK,EAAEc,KATX;AAUI,IAAA,GAAG,EAAEH;AAVT,KALJ,EAiBKD,OAAO,IAAI;AAAK,IAAA,SAAS,YAAKb,SAAL;AAAd,KAA0Ca,OAA1C,CAjBhB,EAkBKE,KAAK,IAAI;AAAK,IAAA,SAAS,YAAKf,SAAL;AAAd,KAAwCe,KAAxC,CAlBd,CADJ;AAsBH,CAvCkE;AAwCnEN,MAAM,CAACoB,WAAP,GAAqB9B,cAArB;AACAU,MAAM,CAACO,SAAP,GAAmBhB,SAAnB;AACAS,MAAM,CAACqB,YAAP,GAAsB5B,aAAtB;;;;"}
+{"version":3,"file":"Avatar2.js","sources":["../../../src/components/avatar/Avatar.tsx"],"sourcesContent":["import React, { forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { AspectRatio, Size, Theme, Thumbnail, ThumbnailProps } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Avatar sizes.\n */\nexport type AvatarSize = Extract<Size, 'xs' | 's' | 'm' | 'l' | 'xl' | 'xxl'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface AvatarProps extends GenericProps {\n    /** Action toolbar content. */\n    actions?: ReactNode;\n    /** Image alternative text. */\n    alt: string;\n    /** Badge. */\n    badge?: ReactElement;\n    /** Image URL. */\n    image: string;\n    /** On click callback. */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /** On key press callback. */\n    onKeyPress?: KeyboardEventHandler<HTMLDivElement>;\n    /** Size variant. */\n    size?: AvatarSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Props to pass to the thumbnail (minus those already set by the Avatar props). */\n    thumbnailProps?: Omit<\n        ThumbnailProps,\n        'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'\n    >;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Avatar';\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<AvatarProps> = {\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * Avatar component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        actions,\n        alt,\n        badge,\n        className,\n        image,\n        onClick,\n        onKeyPress,\n        size,\n        theme,\n        thumbnailProps,\n        ...forwardedProps\n    } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}\n        >\n            <Thumbnail\n                className={`${CLASSNAME}__thumbnail`}\n                onClick={onClick}\n                onKeyPress={onKeyPress}\n                {...thumbnailProps}\n                aspectRatio={AspectRatio.square}\n                size={size}\n                image={image}\n                alt={alt}\n            />\n            {actions && <div className={`${CLASSNAME}__actions`}>{actions}</div>}\n            {badge && <div className={`${CLASSNAME}__badge`}>{badge}</div>}\n        </div>\n    );\n});\nAvatar.displayName = COMPONENT_NAME;\nAvatar.className = CLASSNAME;\nAvatar.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","size","Size","m","theme","Theme","light","Avatar","forwardRef","props","ref","actions","alt","badge","className","image","onClick","onKeyPress","thumbnailProps","forwardedProps","classNames","handleBasicClasses","prefix","AspectRatio","square","displayName","defaultProps"],"mappings":";;;;;;AAQA;;;;AAgCA;;;AAGA,IAAMA,cAAc,GAAG,QAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAmC,GAAG;AACxCC,EAAAA,IAAI,EAAEC,IAAI,CAACC,CAD6B;AAExCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AAF2B,CAA5C;AAKA;;;;;;;;IAOaC,MAAyC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAE5EC,OAF4E,GAa5EF,KAb4E,CAE5EE,OAF4E;AAAA,MAG5EC,GAH4E,GAa5EH,KAb4E,CAG5EG,GAH4E;AAAA,MAI5EC,KAJ4E,GAa5EJ,KAb4E,CAI5EI,KAJ4E;AAAA,MAK5EC,SAL4E,GAa5EL,KAb4E,CAK5EK,SAL4E;AAAA,MAM5EC,KAN4E,GAa5EN,KAb4E,CAM5EM,KAN4E;AAAA,MAO5EC,OAP4E,GAa5EP,KAb4E,CAO5EO,OAP4E;AAAA,MAQ5EC,UAR4E,GAa5ER,KAb4E,CAQ5EQ,UAR4E;AAAA,MAS5EhB,IAT4E,GAa5EQ,KAb4E,CAS5ER,IAT4E;AAAA,MAU5EG,KAV4E,GAa5EK,KAb4E,CAU5EL,KAV4E;AAAA,MAW5Ec,cAX4E,GAa5ET,KAb4E,CAW5ES,cAX4E;AAAA,MAYzEC,cAZyE,4BAa5EV,KAb4E;;AAehF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQS,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACN,SAAD,EAAYO,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAExB,SAAV;AAAqBG,MAAAA,IAAI,EAAJA,IAArB;AAA2BG,MAAAA,KAAK,EAALA;AAA3B,KAAD,CAA9B;AAHzB,MAKI,oBAAC,SAAD;AACI,IAAA,SAAS,YAAKN,SAAL,gBADb;AAEI,IAAA,OAAO,EAAEkB,OAFb;AAGI,IAAA,UAAU,EAAEC;AAHhB,KAIQC,cAJR;AAKI,IAAA,WAAW,EAAEK,WAAW,CAACC,MAL7B;AAMI,IAAA,IAAI,EAAEvB,IANV;AAOI,IAAA,KAAK,EAAEc,KAPX;AAQI,IAAA,GAAG,EAAEH;AART,KALJ,EAeKD,OAAO,IAAI;AAAK,IAAA,SAAS,YAAKb,SAAL;AAAd,KAA0Ca,OAA1C,CAfhB,EAgBKE,KAAK,IAAI;AAAK,IAAA,SAAS,YAAKf,SAAL;AAAd,KAAwCe,KAAxC,CAhBd,CADJ;AAoBH,CAnCkE;AAoCnEN,MAAM,CAACkB,WAAP,GAAqB5B,cAArB;AACAU,MAAM,CAACO,SAAP,GAAmBhB,SAAnB;AACAS,MAAM,CAACmB,YAAP,GAAsB1B,aAAtB;;;;"}

package/esm/_internal/DragHandle.js

@@ -40,7 +40,7 @@ var DragHandle = forwardRef(function (props, ref) {
     }))
   }), React.createElement(Icon, {
     icon: mdiDragVertical,
-    color: theme === Theme.dark ? ColorPalette.light : undefined,
+    color: theme === Theme.dark ? ColorPalette.light : ColorPalette.dark,
     size: Size.xs
   }));
 });

package/esm/_internal/DragHandle.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragHandle.js","sources":["../../../src/components/drag-handle/DragHandle.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiDragVertical } from '@lumx/icons';\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DragHandleProps extends GenericProps {\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DragHandle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * DragHandle component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { className, theme, ...forwardedProps } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n        >\n            <Icon icon={mdiDragVertical} color={theme === Theme.dark ? ColorPalette.light : undefined} size={Size.xs} />\n        </div>\n    );\n});\nDragHandle.displayName = COMPONENT_NAME;\nDragHandle.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DragHandle","forwardRef","props","ref","className","theme","forwardedProps","classNames","handleBasicClasses","prefix","mdiDragVertical","Theme","dark","ColorPalette","light","undefined","Size","xs","displayName"],"mappings":";;;;;;;AAQA;;;;AAQA;;;AAGA,IAAMA,cAAc,GAAG,YAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,UAAiD,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAChFC,SADgF,GACxCF,KADwC,CAChFE,SADgF;AAAA,MACrEC,KADqE,GACxCH,KADwC,CACrEG,KADqE;AAAA,MAC3DC,cAD2D,4BACxCJ,KADwC;;AAGxF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQG,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACH,SAAD,EAAYI,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEX,SAAV;AAAqBO,MAAAA,KAAK,EAALA;AAArB,KAAD,CAA9B;AAHzB,MAKI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEK,eAAZ;AAA6B,IAAA,KAAK,EAAEL,KAAK,KAAKM,KAAK,CAACC,IAAhB,GAAuBC,YAAY,CAACC,KAApC,GAA4CC,SAAhF;AAA2F,IAAA,IAAI,EAAEC,IAAI,CAACC;AAAtG,IALJ,CADJ;AASH,CAZ0E;AAa3EjB,UAAU,CAACkB,WAAX,GAAyBrB,cAAzB;AACAG,UAAU,CAACI,SAAX,GAAuBN,SAAvB;;;;"}
+{"version":3,"file":"DragHandle.js","sources":["../../../src/components/drag-handle/DragHandle.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { mdiDragVertical } from '@lumx/icons';\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\n/**\n * Defines the props of the component.\n */\nexport interface DragHandleProps extends GenericProps {\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'DragHandle';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * DragHandle component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { className, theme, ...forwardedProps } = props;\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}\n        >\n            <Icon\n                icon={mdiDragVertical}\n                color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}\n                size={Size.xs}\n            />\n        </div>\n    );\n});\nDragHandle.displayName = COMPONENT_NAME;\nDragHandle.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DragHandle","forwardRef","props","ref","className","theme","forwardedProps","classNames","handleBasicClasses","prefix","mdiDragVertical","Theme","dark","ColorPalette","light","Size","xs","displayName"],"mappings":";;;;;;;AAQA;;;;AAQA;;;AAGA,IAAMA,cAAc,GAAG,YAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;;;;;IAOaG,UAAiD,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAChFC,SADgF,GACxCF,KADwC,CAChFE,SADgF;AAAA,MACrEC,KADqE,GACxCH,KADwC,CACrEG,KADqE;AAAA,MAC3DC,cAD2D,4BACxCJ,KADwC;;AAGxF,SACI;AACI,IAAA,GAAG,EAAEC;AADT,KAEQG,cAFR;AAGI,IAAA,SAAS,EAAEC,UAAU,CAACH,SAAD,EAAYI,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEX,SAAV;AAAqBO,MAAAA,KAAK,EAALA;AAArB,KAAD,CAA9B;AAHzB,MAKI,oBAAC,IAAD;AACI,IAAA,IAAI,EAAEK,eADV;AAEI,IAAA,KAAK,EAAEL,KAAK,KAAKM,KAAK,CAACC,IAAhB,GAAuBC,YAAY,CAACC,KAApC,GAA4CD,YAAY,CAACD,IAFpE;AAGI,IAAA,IAAI,EAAEG,IAAI,CAACC;AAHf,IALJ,CADJ;AAaH,CAhB0E;AAiB3EhB,UAAU,CAACiB,WAAX,GAAyBpB,cAAzB;AACAG,UAAU,CAACI,SAAX,GAAuBN,SAAvB;;;;"}

package/esm/_internal/Flag2.js

@@ -1,5 +1,5 @@
 import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
-import { ColorVariant, Size, Theme, ColorPalette } from './components.js';
+import { Size, Theme, ColorPalette } from './components.js';
 import React, { forwardRef } from 'react';
 import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
 import { I as Icon } from './Icon2.js';
@@ -34,8 +34,6 @@ var Flag = forwardRef(function (props, ref) {
     ref: ref
   }), icon && React.createElement(Icon, {
     icon: icon,
-    color: color,
-    colorVariant: ColorVariant.D2,
     size: Size.xxs,
     className: "".concat(CLASSNAME, "__icon")
   }), React.createElement("span", {

package/esm/_internal/Flag2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flag2.js","sources":["../../../src/components/flag/Flag.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport { ColorPalette, ColorVariant, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nexport interface FlagProps extends GenericProps {\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Color of the component. */\n    color?: ColorPalette;\n    /** Icon to use before the label. */\n    icon?: string;\n    /** Text label of the flag. */\n    label: string;\n}\n\nconst COMPONENT_NAME = 'Flag';\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\nconst DEFAULT_PROPS: Partial<FlagProps> = {\n    theme: Theme.light,\n};\n\n/**\n * Flag component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { label, icon, color, className, theme, ...forwardedProps } = props;\n    const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);\n\n    return (\n        <div\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}\n            ref={ref}\n        >\n            {icon && (\n                <Icon\n                    icon={icon}\n                    color={color}\n                    colorVariant={ColorVariant.D2}\n                    size={Size.xxs}\n                    className={`${CLASSNAME}__icon`}\n                />\n            )}\n            <span className={`${CLASSNAME}__label`}>{label}</span>\n        </div>\n    );\n});\nFlag.displayName = COMPONENT_NAME;\nFlag.className = CLASSNAME;\nFlag.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Flag","forwardRef","props","ref","label","icon","color","className","forwardedProps","flagColor","ColorPalette","dark","classNames","handleBasicClasses","prefix","ColorVariant","D2","Size","xxs","displayName","defaultProps"],"mappings":";;;;;;AAiBA,IAAMA,cAAc,GAAG,MAAvB;AACA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AACA,IAAMG,aAAiC,GAAG;AACtCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AADyB,CAA1C;AAIA;;;;;;;;IAOaC,IAAqC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACpEC,KADoE,GACRF,KADQ,CACpEE,KADoE;AAAA,MAC7DC,IAD6D,GACRH,KADQ,CAC7DG,IAD6D;AAAA,MACvDC,KADuD,GACRJ,KADQ,CACvDI,KADuD;AAAA,MAChDC,SADgD,GACRL,KADQ,CAChDK,SADgD;AAAA,MACrCV,KADqC,GACRK,KADQ,CACrCL,KADqC;AAAA,MAC3BW,cAD2B,4BACRN,KADQ;;AAE5E,MAAMO,SAAS,GAAGH,KAAK,KAAKT,KAAK,KAAKC,KAAK,CAACC,KAAhB,GAAwBW,YAAY,CAACC,IAArC,GAA4CD,YAAY,CAACX,KAA9D,CAAvB;AAEA,SACI,wCACQS,cADR;AAEI,IAAA,SAAS,EAAEI,UAAU,CAACL,SAAD,EAAYM,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEpB,SAAV;AAAqBY,MAAAA,KAAK,EAAEG;AAA5B,KAAD,CAA9B,CAFzB;AAGI,IAAA,GAAG,EAAEN;AAHT,MAKKE,IAAI,IACD,oBAAC,IAAD;AACI,IAAA,IAAI,EAAEA,IADV;AAEI,IAAA,KAAK,EAAEC,KAFX;AAGI,IAAA,YAAY,EAAES,YAAY,CAACC,EAH/B;AAII,IAAA,IAAI,EAAEC,IAAI,CAACC,GAJf;AAKI,IAAA,SAAS,YAAKxB,SAAL;AALb,IANR,EAcI;AAAM,IAAA,SAAS,YAAKA,SAAL;AAAf,KAAyCU,KAAzC,CAdJ,CADJ;AAkBH,CAtB8D;AAuB/DJ,IAAI,CAACmB,WAAL,GAAmB1B,cAAnB;AACAO,IAAI,CAACO,SAAL,GAAiBb,SAAjB;AACAM,IAAI,CAACoB,YAAL,GAAoBxB,aAApB;;;;"}
+{"version":3,"file":"Flag2.js","sources":["../../../src/components/flag/Flag.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\n\nimport { ColorPalette, Icon, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\n\nexport interface FlagProps extends GenericProps {\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** Color of the component. */\n    color?: ColorPalette;\n    /** Icon to use before the label. */\n    icon?: string;\n    /** Text label of the flag. */\n    label: string;\n}\n\nconst COMPONENT_NAME = 'Flag';\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\nconst DEFAULT_PROPS: Partial<FlagProps> = {\n    theme: Theme.light,\n};\n\n/**\n * Flag component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { label, icon, color, className, theme, ...forwardedProps } = props;\n    const flagColor = color || (theme === Theme.light ? ColorPalette.dark : ColorPalette.light);\n\n    return (\n        <div\n            {...forwardedProps}\n            className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}\n            ref={ref}\n        >\n            {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}\n            <span className={`${CLASSNAME}__label`}>{label}</span>\n        </div>\n    );\n});\nFlag.displayName = COMPONENT_NAME;\nFlag.className = CLASSNAME;\nFlag.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","theme","Theme","light","Flag","forwardRef","props","ref","label","icon","color","className","forwardedProps","flagColor","ColorPalette","dark","classNames","handleBasicClasses","prefix","Size","xxs","displayName","defaultProps"],"mappings":";;;;;;AAiBA,IAAMA,cAAc,GAAG,MAAvB;AACA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AACA,IAAMG,aAAiC,GAAG;AACtCC,EAAAA,KAAK,EAAEC,KAAK,CAACC;AADyB,CAA1C;AAIA;;;;;;;;IAOaC,IAAqC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACpEC,KADoE,GACRF,KADQ,CACpEE,KADoE;AAAA,MAC7DC,IAD6D,GACRH,KADQ,CAC7DG,IAD6D;AAAA,MACvDC,KADuD,GACRJ,KADQ,CACvDI,KADuD;AAAA,MAChDC,SADgD,GACRL,KADQ,CAChDK,SADgD;AAAA,MACrCV,KADqC,GACRK,KADQ,CACrCL,KADqC;AAAA,MAC3BW,cAD2B,4BACRN,KADQ;;AAE5E,MAAMO,SAAS,GAAGH,KAAK,KAAKT,KAAK,KAAKC,KAAK,CAACC,KAAhB,GAAwBW,YAAY,CAACC,IAArC,GAA4CD,YAAY,CAACX,KAA9D,CAAvB;AAEA,SACI,wCACQS,cADR;AAEI,IAAA,SAAS,EAAEI,UAAU,CAACL,SAAD,EAAYM,kBAAkB,CAAC;AAAEC,MAAAA,MAAM,EAAEpB,SAAV;AAAqBY,MAAAA,KAAK,EAAEG;AAA5B,KAAD,CAA9B,CAFzB;AAGI,IAAA,GAAG,EAAEN;AAHT,MAKKE,IAAI,IAAI,oBAAC,IAAD;AAAM,IAAA,IAAI,EAAEA,IAAZ;AAAkB,IAAA,IAAI,EAAEU,IAAI,CAACC,GAA7B;AAAkC,IAAA,SAAS,YAAKtB,SAAL;AAA3C,IALb,EAMI;AAAM,IAAA,SAAS,YAAKA,SAAL;AAAf,KAAyCU,KAAzC,CANJ,CADJ;AAUH,CAd8D;AAe/DJ,IAAI,CAACiB,WAAL,GAAmBxB,cAAnB;AACAO,IAAI,CAACO,SAAL,GAAiBb,SAAjB;AACAM,IAAI,CAACkB,YAAL,GAAoBtB,aAApB;;;;"}

package/esm/_internal/Icon2.js

@@ -36,11 +36,19 @@ var Icon = forwardRef(function (props, ref) {
       forwardedProps = _objectWithoutProperties(props, ["className", "color", "colorVariant", "hasShape", "icon", "size", "theme"]);
 
   var iconColor;
+  var iconColorVariant;
 
   if (color) {
     iconColor = color;
+    iconColorVariant = colorVariant;
   } else if (theme) {
     iconColor = theme === Theme.light ? ColorPalette.dark : ColorPalette.light;
+
+    if (colorVariant) {
+      iconColorVariant = colorVariant;
+    } else {
+      iconColorVariant = Theme.light ? 'L1' : 'N';
+    }
   } else if (hasShape) {
     iconColor = ColorPalette.dark;
   }
@@ -68,7 +76,7 @@ var Icon = forwardRef(function (props, ref) {
   }, forwardedProps, {
     className: classnames(className, handleBasicClasses({
       color: iconColor,
-      colorVariant: colorVariant,
+      colorVariant: iconColorVariant,
       hasShape: hasShape,
       prefix: CLASSNAME,
       size: iconSize

package/esm/_internal/Icon2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon2.js","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Color, ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\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 {\n    /** Color variant. */\n    color?: Color;\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 {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths}\n     */\n    icon: string;\n    /** Size variant. */\n    size?: IconSizes;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\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: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {\n    const { className, color, colorVariant, hasShape, icon, size, theme, ...forwardedProps } = props;\n    let iconColor;\n    if (color) {\n        iconColor = color;\n    } else if (theme) {\n        iconColor = theme === Theme.light ? ColorPalette.dark : ColorPalette.light;\n    } else if (hasShape) {\n        iconColor = ColorPalette.dark;\n    }\n\n    let iconSize;\n    if (size) {\n        if (hasShape) {\n            if (size === Size.xxs || size === Size.xs) {\n                iconSize = Size.s;\n            } else if (size === Size.xxl) {\n                iconSize = Size.xl;\n            } else {\n                iconSize = size;\n            }\n        } else {\n            iconSize = size;\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,\n                    hasShape,\n                    prefix: CLASSNAME,\n                    size: iconSize,\n                }),\n                !hasShape && `${CLASSNAME}--no-shape`,\n                `${CLASSNAME}--path`,\n            )}\n        >\n            <svg\n                aria-hidden=\"true\"\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","className","color","colorVariant","hasShape","icon","size","theme","forwardedProps","iconColor","Theme","light","ColorPalette","dark","iconSize","Size","xxs","xs","s","xxl","xl","m","classNames","handleBasicClasses","prefix","verticalAlign","displayName","defaultProps"],"mappings":";;;;;AA8BA;;;AAGA,IAAMA,cAAc,GAAG,MAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,aAAiC,GAAG,EAA1C;AAEA;;;;;;;;IAOaC,IAAkC,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MACjEC,SADiE,GACkBF,KADlB,CACjEE,SADiE;AAAA,MACtDC,KADsD,GACkBH,KADlB,CACtDG,KADsD;AAAA,MAC/CC,YAD+C,GACkBJ,KADlB,CAC/CI,YAD+C;AAAA,MACjCC,QADiC,GACkBL,KADlB,CACjCK,QADiC;AAAA,MACvBC,IADuB,GACkBN,KADlB,CACvBM,IADuB;AAAA,MACjBC,IADiB,GACkBP,KADlB,CACjBO,IADiB;AAAA,MACXC,KADW,GACkBR,KADlB,CACXQ,KADW;AAAA,MACDC,cADC,4BACkBT,KADlB;;AAEzE,MAAIU,SAAJ;;AACA,MAAIP,KAAJ,EAAW;AACPO,IAAAA,SAAS,GAAGP,KAAZ;AACH,GAFD,MAEO,IAAIK,KAAJ,EAAW;AACdE,IAAAA,SAAS,GAAGF,KAAK,KAAKG,KAAK,CAACC,KAAhB,GAAwBC,YAAY,CAACC,IAArC,GAA4CD,YAAY,CAACD,KAArE;AACH,GAFM,MAEA,IAAIP,QAAJ,EAAc;AACjBK,IAAAA,SAAS,GAAGG,YAAY,CAACC,IAAzB;AACH;;AAED,MAAIC,QAAJ;;AACA,MAAIR,IAAJ,EAAU;AACN,QAAIF,QAAJ,EAAc;AACV,UAAIE,IAAI,KAAKS,IAAI,CAACC,GAAd,IAAqBV,IAAI,KAAKS,IAAI,CAACE,EAAvC,EAA2C;AACvCH,QAAAA,QAAQ,GAAGC,IAAI,CAACG,CAAhB;AACH,OAFD,MAEO,IAAIZ,IAAI,KAAKS,IAAI,CAACI,GAAlB,EAAuB;AAC1BL,QAAAA,QAAQ,GAAGC,IAAI,CAACK,EAAhB;AACH,OAFM,MAEA;AACHN,QAAAA,QAAQ,GAAGR,IAAX;AACH;AACJ,KARD,MAQO;AACHQ,MAAAA,QAAQ,GAAGR,IAAX;AACH;AACJ,GAZD,MAYO,IAAIF,QAAJ,EAAc;AACjBU,IAAAA,QAAQ,GAAGC,IAAI,CAACM,CAAhB;AACH;;AAED,SACI;AACI,IAAA,GAAG,EAAErB;AADT,KAEQQ,cAFR;AAGI,IAAA,SAAS,EAAEc,UAAU,CACjBrB,SADiB,EAEjBsB,kBAAkB,CAAC;AACfrB,MAAAA,KAAK,EAAEO,SADQ;AAEfN,MAAAA,YAAY,EAAZA,YAFe;AAGfC,MAAAA,QAAQ,EAARA,QAHe;AAIfoB,MAAAA,MAAM,EAAE9B,SAJO;AAKfY,MAAAA,IAAI,EAAEQ;AALS,KAAD,CAFD,EASjB,CAACV,QAAD,cAAgBV,SAAhB,eATiB,YAUdA,SAVc;AAHzB,MAgBI;AACI,mBAAY,MADhB;AAEI,IAAA,MAAM,EAAC,KAFX;AAGI,IAAA,mBAAmB,EAAC,eAHxB;AAII,IAAA,KAAK,EAAE;AAAE+B,MAAAA,aAAa,EAAE;AAAjB,KAJX;AAKI,IAAA,OAAO,EAAC,WALZ;AAMI,IAAA,KAAK,EAAC;AANV,KAQI;AAAM,IAAA,CAAC,EAAEpB,IAAT;AAAe,IAAA,IAAI,EAAC;AAApB,IARJ,CAhBJ,CADJ;AA6BH,CAzD2D;AA0D5DR,IAAI,CAAC6B,WAAL,GAAmBjC,cAAnB;AACAI,IAAI,CAACI,SAAL,GAAiBP,SAAjB;AACAG,IAAI,CAAC8B,YAAL,GAAoB/B,aAApB;;;;"}
+{"version":3,"file":"Icon2.js","sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Color, ColorPalette, ColorVariant, Size, Theme } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\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 {\n    /** Color variant. */\n    color?: Color;\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 {@link https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths}\n     */\n    icon: string;\n    /** Size variant. */\n    size?: IconSizes;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\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: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {\n    const { className, color, colorVariant, hasShape, icon, size, theme, ...forwardedProps } = props;\n\n    let iconColor;\n    let iconColorVariant;\n    if (color) {\n        iconColor = color;\n        iconColorVariant = colorVariant;\n    } else if (theme) {\n        iconColor = theme === Theme.light ? ColorPalette.dark : ColorPalette.light;\n\n        if (colorVariant) {\n            iconColorVariant = colorVariant;\n        } else {\n            iconColorVariant = Theme.light ? 'L1' : 'N';\n        }\n    } else if (hasShape) {\n        iconColor = ColorPalette.dark;\n    }\n\n    let iconSize;\n    if (size) {\n        if (hasShape) {\n            if (size === Size.xxs || size === Size.xs) {\n                iconSize = Size.s;\n            } else if (size === Size.xxl) {\n                iconSize = Size.xl;\n            } else {\n                iconSize = size;\n            }\n        } else {\n            iconSize = size;\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                    size: iconSize,\n                }),\n                !hasShape && `${CLASSNAME}--no-shape`,\n                `${CLASSNAME}--path`,\n            )}\n        >\n            <svg\n                aria-hidden=\"true\"\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","className","color","colorVariant","hasShape","icon","size","theme","forwardedProps","iconColor","iconColorVariant","Theme","light","ColorPalette","dark","iconSize","Size","xxs","xs","s","xxl","xl","m","classNames","handleBasicClasses","prefix","verticalAlign","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/Message2.js

@@ -64,11 +64,11 @@ var Message = forwardRef(function (props, ref) {
       prefix: CLASSNAME
     }))
   }, forwardedProps), (customIcon || icon) && React.createElement(Icon, {
-    className: "lumx-message__icon",
+    className: "".concat(CLASSNAME, "__icon"),
     icon: customIcon || icon,
     size: Size.xs
   }), React.createElement("div", {
-    className: "lumx-message__text"
+    className: "".concat(CLASSNAME, "__text")
   }, children));
 });
 Message.displayName = COMPONENT_NAME;

package/esm/_internal/Message2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Message2.js","sources":["../../../src/components/message/Message.tsx"],"sourcesContent":["import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';\nimport { ColorPalette, Icon, Kind, Size } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport classNames from 'classnames';\nimport React, { forwardRef, ReactNode } from 'react';\n\n/**\n * Defines the props of the component.\n */\nexport interface MessageProps extends GenericProps {\n    /** Content. */\n    children?: ReactNode;\n    /** Whether the message has a background or not. */\n    hasBackground?: boolean;\n    /** Message variant. */\n    kind?: Kind;\n    /** Message custom icon SVG path. */\n    icon?: string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Message';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Associative map from message kind to color and icon.\n */\nconst CONFIG = {\n    [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },\n    [Kind.info]: { color: ColorPalette.dark, icon: mdiInformation },\n    [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },\n    [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },\n};\n\n/**\n * Message component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { children, className, hasBackground, kind, icon: customIcon, ...forwardedProps } = props;\n    const { color, icon } = CONFIG[kind as Kind] || {};\n\n    return (\n        <div\n            ref={ref}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    color,\n                    hasBackground,\n                    prefix: CLASSNAME,\n                }),\n            )}\n            {...forwardedProps}\n        >\n            {(customIcon || icon) && <Icon className=\"lumx-message__icon\" icon={customIcon || icon} size={Size.xs} />}\n            <div className=\"lumx-message__text\">{children}</div>\n        </div>\n    );\n});\nMessage.displayName = COMPONENT_NAME;\nMessage.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","CONFIG","Kind","error","color","ColorPalette","red","icon","mdiAlert","info","dark","mdiInformation","success","green","mdiCheckCircle","warning","yellow","mdiAlertCircle","Message","forwardRef","props","ref","children","className","hasBackground","kind","customIcon","forwardedProps","classNames","handleBasicClasses","prefix","Size","xs","displayName"],"mappings":";;;;;;;;AAMA;;;;AAcA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,MAAM,2CACPC,IAAI,CAACC,KADE,EACM;AAAEC,EAAAA,KAAK,EAAEC,YAAY,CAACC,GAAtB;AAA2BC,EAAAA,IAAI,EAAEC;AAAjC,CADN,4BAEPN,IAAI,CAACO,IAFE,EAEK;AAAEL,EAAAA,KAAK,EAAEC,YAAY,CAACK,IAAtB;AAA4BH,EAAAA,IAAI,EAAEI;AAAlC,CAFL,4BAGPT,IAAI,CAACU,OAHE,EAGQ;AAAER,EAAAA,KAAK,EAAEC,YAAY,CAACQ,KAAtB;AAA6BN,EAAAA,IAAI,EAAEO;AAAnC,CAHR,4BAIPZ,IAAI,CAACa,OAJE,EAIQ;AAAEX,EAAAA,KAAK,EAAEC,YAAY,CAACW,MAAtB;AAA8BT,EAAAA,IAAI,EAAEU;AAApC,CAJR,WAAZ;AAOA;;;;;;;;IAOaC,OAA2C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAC1EC,QAD0E,GACQF,KADR,CAC1EE,QAD0E;AAAA,MAChEC,SADgE,GACQH,KADR,CAChEG,SADgE;AAAA,MACrDC,aADqD,GACQJ,KADR,CACrDI,aADqD;AAAA,MACtCC,IADsC,GACQL,KADR,CACtCK,IADsC;AAAA,MAC1BC,UAD0B,GACQN,KADR,CAChCb,IADgC;AAAA,MACXoB,cADW,4BACQP,KADR;;AAAA,aAE1DnB,MAAM,CAACwB,IAAD,CAAN,IAAwB,EAFkC;AAAA,MAE1ErB,KAF0E,QAE1EA,KAF0E;AAAA,MAEnEG,IAFmE,QAEnEA,IAFmE;;AAIlF,SACI;AACI,IAAA,GAAG,EAAEc,GADT;AAEI,IAAA,SAAS,EAAEO,UAAU,CACjBL,SADiB,EAEjBM,kBAAkB,CAAC;AACfzB,MAAAA,KAAK,EAALA,KADe;AAEfoB,MAAAA,aAAa,EAAbA,aAFe;AAGfM,MAAAA,MAAM,EAAE/B;AAHO,KAAD,CAFD;AAFzB,KAUQ4B,cAVR,GAYK,CAACD,UAAU,IAAInB,IAAf,KAAwB,oBAAC,IAAD;AAAM,IAAA,SAAS,EAAC,oBAAhB;AAAqC,IAAA,IAAI,EAAEmB,UAAU,IAAInB,IAAzD;AAA+D,IAAA,IAAI,EAAEwB,IAAI,CAACC;AAA1E,IAZ7B,EAaI;AAAK,IAAA,SAAS,EAAC;AAAf,KAAqCV,QAArC,CAbJ,CADJ;AAiBH,CArBoE;AAsBrEJ,OAAO,CAACe,WAAR,GAAsBnC,cAAtB;AACAoB,OAAO,CAACK,SAAR,GAAoBxB,SAApB;;;;"}
+{"version":3,"file":"Message2.js","sources":["../../../src/components/message/Message.tsx"],"sourcesContent":["import { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiInformation } from '@lumx/icons';\nimport { ColorPalette, Icon, Kind, Size } from '@lumx/react';\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport classNames from 'classnames';\nimport React, { forwardRef, ReactNode } from 'react';\n\n/**\n * Defines the props of the component.\n */\nexport interface MessageProps extends GenericProps {\n    /** Content. */\n    children?: ReactNode;\n    /** Whether the message has a background or not. */\n    hasBackground?: boolean;\n    /** Message variant. */\n    kind?: Kind;\n    /** Message custom icon SVG path. */\n    icon?: string;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'Message';\n\n/**\n * Component default class name and class prefix.\n */\nconst CLASSNAME = getRootClassName(COMPONENT_NAME);\n\n/**\n * Associative map from message kind to color and icon.\n */\nconst CONFIG = {\n    [Kind.error]: { color: ColorPalette.red, icon: mdiAlert },\n    [Kind.info]: { color: ColorPalette.dark, icon: mdiInformation },\n    [Kind.success]: { color: ColorPalette.green, icon: mdiCheckCircle },\n    [Kind.warning]: { color: ColorPalette.yellow, icon: mdiAlertCircle },\n};\n\n/**\n * Message component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const { children, className, hasBackground, kind, icon: customIcon, ...forwardedProps } = props;\n    const { color, icon } = CONFIG[kind as Kind] || {};\n\n    return (\n        <div\n            ref={ref}\n            className={classNames(\n                className,\n                handleBasicClasses({\n                    color,\n                    hasBackground,\n                    prefix: CLASSNAME,\n                }),\n            )}\n            {...forwardedProps}\n        >\n            {(customIcon || icon) && <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} />}\n            <div className={`${CLASSNAME}__text`}>{children}</div>\n        </div>\n    );\n});\nMessage.displayName = COMPONENT_NAME;\nMessage.className = CLASSNAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","CONFIG","Kind","error","color","ColorPalette","red","icon","mdiAlert","info","dark","mdiInformation","success","green","mdiCheckCircle","warning","yellow","mdiAlertCircle","Message","forwardRef","props","ref","children","className","hasBackground","kind","customIcon","forwardedProps","classNames","handleBasicClasses","prefix","Size","xs","displayName"],"mappings":";;;;;;;;AAMA;;;;AAcA;;;AAGA,IAAMA,cAAc,GAAG,SAAvB;AAEA;;;;AAGA,IAAMC,SAAS,GAAGC,gBAAgB,CAACF,cAAD,CAAlC;AAEA;;;;AAGA,IAAMG,MAAM,2CACPC,IAAI,CAACC,KADE,EACM;AAAEC,EAAAA,KAAK,EAAEC,YAAY,CAACC,GAAtB;AAA2BC,EAAAA,IAAI,EAAEC;AAAjC,CADN,4BAEPN,IAAI,CAACO,IAFE,EAEK;AAAEL,EAAAA,KAAK,EAAEC,YAAY,CAACK,IAAtB;AAA4BH,EAAAA,IAAI,EAAEI;AAAlC,CAFL,4BAGPT,IAAI,CAACU,OAHE,EAGQ;AAAER,EAAAA,KAAK,EAAEC,YAAY,CAACQ,KAAtB;AAA6BN,EAAAA,IAAI,EAAEO;AAAnC,CAHR,4BAIPZ,IAAI,CAACa,OAJE,EAIQ;AAAEX,EAAAA,KAAK,EAAEC,YAAY,CAACW,MAAtB;AAA8BT,EAAAA,IAAI,EAAEU;AAApC,CAJR,WAAZ;AAOA;;;;;;;;IAOaC,OAA2C,GAAGC,UAAU,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAAA,MAC1EC,QAD0E,GACQF,KADR,CAC1EE,QAD0E;AAAA,MAChEC,SADgE,GACQH,KADR,CAChEG,SADgE;AAAA,MACrDC,aADqD,GACQJ,KADR,CACrDI,aADqD;AAAA,MACtCC,IADsC,GACQL,KADR,CACtCK,IADsC;AAAA,MAC1BC,UAD0B,GACQN,KADR,CAChCb,IADgC;AAAA,MACXoB,cADW,4BACQP,KADR;;AAAA,aAE1DnB,MAAM,CAACwB,IAAD,CAAN,IAAwB,EAFkC;AAAA,MAE1ErB,KAF0E,QAE1EA,KAF0E;AAAA,MAEnEG,IAFmE,QAEnEA,IAFmE;;AAIlF,SACI;AACI,IAAA,GAAG,EAAEc,GADT;AAEI,IAAA,SAAS,EAAEO,UAAU,CACjBL,SADiB,EAEjBM,kBAAkB,CAAC;AACfzB,MAAAA,KAAK,EAALA,KADe;AAEfoB,MAAAA,aAAa,EAAbA,aAFe;AAGfM,MAAAA,MAAM,EAAE/B;AAHO,KAAD,CAFD;AAFzB,KAUQ4B,cAVR,GAYK,CAACD,UAAU,IAAInB,IAAf,KAAwB,oBAAC,IAAD;AAAM,IAAA,SAAS,YAAKR,SAAL,WAAf;AAAuC,IAAA,IAAI,EAAE2B,UAAU,IAAInB,IAA3D;AAAiE,IAAA,IAAI,EAAEwB,IAAI,CAACC;AAA5E,IAZ7B,EAaI;AAAK,IAAA,SAAS,YAAKjC,SAAL;AAAd,KAAuCuB,QAAvC,CAbJ,CADJ;AAiBH,CArBoE;AAsBrEJ,OAAO,CAACe,WAAR,GAAsBnC,cAAtB;AACAoB,OAAO,CAACK,SAAR,GAAoBxB,SAApB;;;;"}

package/esm/_internal/UserBlock.js

@@ -1,10 +1,8 @@
-import { b as _objectWithoutProperties, _ as _objectSpread2, c as _extends } from './_rollupPluginBabelHelpers.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
 import { Size, Orientation, Theme } from './components.js';
 import React, { forwardRef } from 'react';
 import { g as getRootClassName, c as classnames, h as handleBasicClasses } from './getRootClassName.js';
 import { A as Avatar } from './Avatar2.js';
-import { r as renderLink } from './renderLink.js';
-import { isEmpty } from 'lodash';
 
 /**
  * Component display name.
@@ -45,9 +43,7 @@ var UserBlock = forwardRef(function (props, ref) {
       simpleAction = props.simpleAction,
       size = props.size,
       theme = props.theme,
-      linkProps = props.linkProps,
-      linkAs = props.linkAs,
-      forwardedProps = _objectWithoutProperties(props, ["avatarProps", "className", "fields", "multipleActions", "name", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme", "linkProps", "linkAs"]);
+      forwardedProps = _objectWithoutProperties(props, ["avatarProps", "className", "fields", "multipleActions", "name", "onClick", "onMouseEnter", "onMouseLeave", "orientation", "simpleAction", "size", "theme"]);
 
   var componentSize = size; // Special case - When using vertical orientation force the size to be Sizes.l.
 
@@ -56,37 +52,12 @@ var UserBlock = forwardRef(function (props, ref) {
   }
 
   var shouldDisplayActions = orientation === Orientation.vertical;
-  var isLink = Boolean((linkProps === null || linkProps === void 0 ? void 0 : linkProps.href) || linkAs);
-  var isClickable = !!onClick || isLink;
-  var nameBlock = React.useMemo(function () {
-    if (isEmpty(name)) {
-      return null;
-    }
-
-    var nameClassName = classnames(handleBasicClasses({
-      prefix: "".concat(CLASSNAME, "__name"),
-      isClickable: isClickable
-    }), isLink && (linkProps === null || linkProps === void 0 ? void 0 : linkProps.className));
-
-    if (isLink) {
-      return renderLink(_objectSpread2({}, linkProps, {
-        linkAs: linkAs,
-        className: nameClassName
-      }), name);
-    }
-
-    if (onClick) {
-      return React.createElement("button", {
-        onClick: onClick,
-        type: "button",
-        className: nameClassName
-      }, name);
-    }
-
-    return React.createElement("span", {
-      className: nameClassName
-    }, name);
-  }, [isClickable, isLink, linkAs, linkProps, name, onClick]);
+  var nameBlock = name && // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-tabindex,jsx-a11y/no-static-element-interactions
+  React.createElement("span", {
+    className: "".concat(CLASSNAME, "__name"),
+    onClick: onClick,
+    tabIndex: onClick ? 0 : -1
+  }, name);
   var fieldsBlock = fields && componentSize !== Size.s && React.createElement("div", {
     className: "".concat(CLASSNAME, "__fields")
   }, fields.map(function (aField, idx) {
@@ -102,20 +73,18 @@ var UserBlock = forwardRef(function (props, ref) {
       prefix: CLASSNAME,
       orientation: orientation,
       size: componentSize,
-      theme: theme,
-      isClickable: isClickable
+      theme: theme
     })),
     onMouseLeave: onMouseLeave,
     onMouseEnter: onMouseEnter
-  }), avatarProps && React.createElement(Avatar, _extends({
-    linkAs: linkAs,
-    linkProps: linkProps
-  }, avatarProps, {
-    className: classnames("".concat(CLASSNAME, "__avatar"), avatarProps.className),
+  }), avatarProps && React.createElement("div", {
+    className: "".concat(CLASSNAME, "__avatar")
+  }, React.createElement(Avatar, _extends({}, avatarProps, {
     size: componentSize,
     onClick: onClick,
+    tabIndex: onClick ? 0 : -1,
     theme: theme
-  })), (fields || name) && React.createElement("div", {
+  }))), (fields || name) && React.createElement("div", {
     className: "".concat(CLASSNAME, "__wrapper")
   }, nameBlock, fieldsBlock), shouldDisplayActions && simpleAction && React.createElement("div", {
     className: "".concat(CLASSNAME, "__action")

package/esm/_internal/UserBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserBlock.js","sources":["../../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Avatar, Orientation, Size, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { isEmpty } from 'lodash';\nimport { renderLink } from '@lumx/react/utils/renderLink';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps {\n    /** Props to pass to the avatar. */\n    avatarProps?: AvatarProps;\n    /** Props to pass to the link wrapping the avatar thumbnail. */\n    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;\n    /** Custom react component for the link (can be used to inject react router Link). */\n    linkAs?: 'a' | any;\n    /** Simple action toolbar content. */\n    simpleAction?: ReactNode;\n    /** Multiple action toolbar content. */\n    multipleActions?: ReactNode;\n    /** Additional fields used to describe the user. */\n    fields?: string[];\n    /** User name. */\n    name?: string;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Size variant. */\n    size?: UserBlockSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** On click callback. */\n    onClick?(): void;\n    /** On mouse enter callback. */\n    onMouseEnter?(): void;\n    /** On mouse leave callback. */\n    onMouseLeave?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\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<UserBlockProps> = {\n    orientation: Orientation.horizontal,\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * UserBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        avatarProps,\n        className,\n        fields,\n        multipleActions,\n        name,\n        onClick,\n        onMouseEnter,\n        onMouseLeave,\n        orientation,\n        simpleAction,\n        size,\n        theme,\n        linkProps,\n        linkAs,\n        ...forwardedProps\n    } = props;\n    let componentSize = size;\n\n    // Special case - When using vertical orientation force the size to be Sizes.l.\n    if (orientation === Orientation.vertical) {\n        componentSize = Size.l;\n    }\n\n    const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n    const isLink = Boolean(linkProps?.href || linkAs);\n    const isClickable = !!onClick || isLink;\n\n    const nameBlock: ReactNode = React.useMemo(() => {\n        if (isEmpty(name)) {\n            return null;\n        }\n        const nameClassName = classNames(\n            handleBasicClasses({ prefix: `${CLASSNAME}__name`, isClickable }),\n            isLink && linkProps?.className,\n        );\n        if (isLink) {\n            return renderLink({ ...linkProps, linkAs, className: nameClassName }, name);\n        }\n        if (onClick) {\n            return (\n                <button onClick={onClick} type=\"button\" className={nameClassName}>\n                    {name}\n                </button>\n            );\n        }\n        return <span className={nameClassName}>{name}</span>;\n    }, [isClickable, isLink, linkAs, linkProps, name, onClick]);\n\n    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (\n        <div className={`${CLASSNAME}__fields`}>\n            {fields.map((aField: string, idx: number) => (\n                <span key={idx} className={`${CLASSNAME}__field`}>\n                    {aField}\n                </span>\n            ))}\n        </div>\n    );\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme, isClickable }),\n            )}\n            onMouseLeave={onMouseLeave}\n            onMouseEnter={onMouseEnter}\n        >\n            {avatarProps && (\n                <Avatar\n                    linkAs={linkAs}\n                    linkProps={linkProps}\n                    {...avatarProps}\n                    className={classNames(`${CLASSNAME}__avatar`, avatarProps.className)}\n                    size={componentSize}\n                    onClick={onClick}\n                    theme={theme}\n                />\n            )}\n            {(fields || name) && (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {nameBlock}\n                    {fieldsBlock}\n                </div>\n            )}\n            {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n            {shouldDisplayActions && multipleActions && (\n                <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n            )}\n        </div>\n    );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","theme","Theme","light","UserBlock","forwardRef","props","ref","avatarProps","className","fields","multipleActions","name","onClick","onMouseEnter","onMouseLeave","simpleAction","linkProps","linkAs","forwardedProps","componentSize","vertical","l","shouldDisplayActions","isLink","Boolean","href","isClickable","nameBlock","React","useMemo","isEmpty","nameClassName","classNames","handleBasicClasses","prefix","renderLink","fieldsBlock","s","map","aField","idx","displayName","defaultProps"],"mappings":"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"}
+{"version":3,"file":"UserBlock.js","sources":["../../../src/components/user-block/UserBlock.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode } from 'react';\n\nimport classNames from 'classnames';\n\nimport { Avatar, Orientation, Size, Theme } from '@lumx/react';\n\nimport { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';\nimport { AvatarProps } from '../avatar/Avatar';\n\n/**\n * User block sizes.\n */\nexport type UserBlockSize = Extract<Size, 's' | 'm' | 'l'>;\n\n/**\n * Defines the props of the component.\n */\nexport interface UserBlockProps extends GenericProps {\n    /** Props to pass to the avatar. */\n    avatarProps?: AvatarProps;\n    /** Simple action toolbar content. */\n    simpleAction?: ReactNode;\n    /** Multiple action toolbar content. */\n    multipleActions?: ReactNode;\n    /** Additional fields used to describe the user. */\n    fields?: string[];\n    /** User name. */\n    name?: string;\n    /** Orientation. */\n    orientation?: Orientation;\n    /** Size variant. */\n    size?: UserBlockSize;\n    /** Theme adapting the component to light or dark background. */\n    theme?: Theme;\n    /** On click callback. */\n    onClick?(): void;\n    /** On mouse enter callback. */\n    onMouseEnter?(): void;\n    /** On mouse leave callback. */\n    onMouseLeave?(): void;\n}\n\n/**\n * Component display name.\n */\nconst COMPONENT_NAME = 'UserBlock';\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<UserBlockProps> = {\n    orientation: Orientation.horizontal,\n    size: Size.m,\n    theme: Theme.light,\n};\n\n/**\n * UserBlock component.\n *\n * @param  props Component props.\n * @param  ref   Component ref.\n * @return React element.\n */\nexport const UserBlock: Comp<UserBlockProps, HTMLDivElement> = forwardRef((props, ref) => {\n    const {\n        avatarProps,\n        className,\n        fields,\n        multipleActions,\n        name,\n        onClick,\n        onMouseEnter,\n        onMouseLeave,\n        orientation,\n        simpleAction,\n        size,\n        theme,\n        ...forwardedProps\n    } = props;\n    let componentSize = size;\n\n    // Special case - When using vertical orientation force the size to be Sizes.l.\n    if (orientation === Orientation.vertical) {\n        componentSize = Size.l;\n    }\n\n    const shouldDisplayActions: boolean = orientation === Orientation.vertical;\n\n    const nameBlock: ReactNode = name && (\n        // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-noninteractive-tabindex,jsx-a11y/no-static-element-interactions\n        <span className={`${CLASSNAME}__name`} onClick={onClick} tabIndex={onClick ? 0 : -1}>\n            {name}\n        </span>\n    );\n\n    const fieldsBlock: ReactNode = fields && componentSize !== Size.s && (\n        <div className={`${CLASSNAME}__fields`}>\n            {fields.map((aField: string, idx: number) => (\n                <span key={idx} className={`${CLASSNAME}__field`}>\n                    {aField}\n                </span>\n            ))}\n        </div>\n    );\n\n    return (\n        <div\n            ref={ref}\n            {...forwardedProps}\n            className={classNames(\n                className,\n                handleBasicClasses({ prefix: CLASSNAME, orientation, size: componentSize, theme }),\n            )}\n            onMouseLeave={onMouseLeave}\n            onMouseEnter={onMouseEnter}\n        >\n            {avatarProps && (\n                <div className={`${CLASSNAME}__avatar`}>\n                    <Avatar\n                        {...avatarProps}\n                        size={componentSize}\n                        onClick={onClick}\n                        tabIndex={onClick ? 0 : -1}\n                        theme={theme}\n                    />\n                </div>\n            )}\n            {(fields || name) && (\n                <div className={`${CLASSNAME}__wrapper`}>\n                    {nameBlock}\n                    {fieldsBlock}\n                </div>\n            )}\n            {shouldDisplayActions && simpleAction && <div className={`${CLASSNAME}__action`}>{simpleAction}</div>}\n            {shouldDisplayActions && multipleActions && (\n                <div className={`${CLASSNAME}__actions`}>{multipleActions}</div>\n            )}\n        </div>\n    );\n});\nUserBlock.displayName = COMPONENT_NAME;\nUserBlock.className = CLASSNAME;\nUserBlock.defaultProps = DEFAULT_PROPS;\n"],"names":["COMPONENT_NAME","CLASSNAME","getRootClassName","DEFAULT_PROPS","orientation","Orientation","horizontal","size","Size","m","theme","Theme","light","UserBlock","forwardRef","props","ref","avatarProps","className","fields","multipleActions","name","onClick","onMouseEnter","onMouseLeave","simpleAction","forwardedProps","componentSize","vertical","l","shouldDisplayActions","nameBlock","fieldsBlock","s","map","aField","idx","classNames","handleBasicClasses","prefix","displayName","defaultProps"],"mappings":"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"}

package/esm/_internal/user-block.js

@@ -9,9 +9,7 @@ import 'lodash/kebabCase';
 import 'lodash/noop';
 import './mergeRefs.js';
 import './Avatar2.js';
-import './renderLink.js';
 import './Icon2.js';
 import './Thumbnail2.js';
-import 'lodash';
 export { U as UserBlock } from './UserBlock.js';
 //# sourceMappingURL=user-block.js.map

package/esm/_internal/user-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;"}
+{"version":3,"file":"user-block.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;"}

package/esm/index.js

@@ -86,6 +86,5 @@ export { T as Toolbar } from './_internal/Toolbar2.js';
 export { T as Tooltip } from './_internal/Tooltip2.js';
 import 'lodash/debounce';
 export { a as Uploader, U as UploaderVariant } from './_internal/Uploader2.js';
-import 'lodash';
 export { U as UserBlock } from './_internal/UserBlock.js';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -7,8 +7,8 @@
     },
     "dependencies": {
         "@juggle/resize-observer": "^3.2.0",
-        "@lumx/core": "^2.1.9-alpha-thumbnail3",
-        "@lumx/icons": "^2.1.9-alpha-thumbnail3",
+        "@lumx/core": "^2.1.9-alpha-thumbnail4",
+        "@lumx/icons": "^2.1.9-alpha-thumbnail4",
         "@popperjs/core": "^2.5.4",
         "body-scroll-lock": "^3.1.5",
         "classnames": "^2.2.6",
@@ -120,6 +120,6 @@
         "build:storybook": "cd storybook && ./build"
     },
     "sideEffects": false,
-    "version": "2.1.9-alpha-thumbnail3",
-    "gitHead": "e57c222583d0f3fff98a3934a16a754302c88e3d"
+    "version": "2.1.9-alpha-thumbnail4",
+    "gitHead": "fa5191f099b3ac41f36405aeb23d0f6d254d4d39"
 }

package/src/components/avatar/Avatar.tsx

@@ -36,10 +36,6 @@ export interface AvatarProps extends GenericProps {
         ThumbnailProps,
         'image' | 'alt' | 'size' | 'theme' | 'align' | 'fillHeight' | 'variant' | 'aspectRatio'
     >;
-    /** Props to pass to the link wrapping the thumbnail. */
-    linkProps?: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>;
-    /** Custom react component for the link (can be used to inject react router Link). */
-    linkAs?: 'a' | any;
 }
 
 /**
@@ -79,8 +75,6 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
         size,
         theme,
         thumbnailProps,
-        linkProps,
-        linkAs,
         ...forwardedProps
     } = props;
 
@@ -91,8 +85,6 @@ export const Avatar: Comp<AvatarProps, HTMLDivElement> = forwardRef((props, ref)
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, size, theme }))}
         >
             <Thumbnail
-                linkProps={linkProps}
-                linkAs={linkAs}
                 className={`${CLASSNAME}__thumbnail`}
                 onClick={onClick}
                 onKeyPress={onKeyPress}

package/src/components/drag-handle/DragHandle.tsx

@@ -40,7 +40,11 @@ export const DragHandle: Comp<DragHandleProps, HTMLDivElement> = forwardRef((pro
             {...forwardedProps}
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, theme }))}
         >
-            <Icon icon={mdiDragVertical} color={theme === Theme.dark ? ColorPalette.light : undefined} size={Size.xs} />
+            <Icon
+                icon={mdiDragVertical}
+                color={theme === Theme.dark ? ColorPalette.light : ColorPalette.dark}
+                size={Size.xs}
+            />
         </div>
     );
 });

package/src/components/flag/Flag.test.tsx

@@ -69,9 +69,8 @@ describe(`<${Flag.displayName} />`, () => {
 
         it('should use the color', () => {
             const color = ColorPalette.green;
-            const { wrapper, iconEl } = setup({ icon: mdiAbTesting, color });
+            const { wrapper } = setup({ icon: mdiAbTesting, color });
 
-            expect(iconEl.prop('color')).toEqual(color);
             expect(wrapper).toHaveClassName(
                 getBasicClass({
                     prefix: CLASSNAME,

package/src/components/flag/Flag.tsx

@@ -1,7 +1,7 @@
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 
-import { ColorPalette, ColorVariant, Icon, Size, Theme } from '@lumx/react';
+import { ColorPalette, Icon, Size, Theme } from '@lumx/react';
 import { Comp, GenericProps, getRootClassName, handleBasicClasses } from '@lumx/react/utils';
 
 export interface FlagProps extends GenericProps {
@@ -38,15 +38,7 @@ export const Flag: Comp<FlagProps, HTMLDivElement> = forwardRef((props, ref) =>
             className={classNames(className, handleBasicClasses({ prefix: CLASSNAME, color: flagColor }))}
             ref={ref}
         >
-            {icon && (
-                <Icon
-                    icon={icon}
-                    color={color}
-                    colorVariant={ColorVariant.D2}
-                    size={Size.xxs}
-                    className={`${CLASSNAME}__icon`}
-                />
-            )}
+            {icon && <Icon icon={icon} size={Size.xxs} className={`${CLASSNAME}__icon`} />}
             <span className={`${CLASSNAME}__label`}>{label}</span>
         </div>
     );

package/src/components/flag/__snapshots__/Flag.test.tsx.snap

@@ -19,8 +19,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="blue"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -35,8 +33,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="dark"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -51,8 +47,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="green"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -67,8 +61,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="primary"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -83,8 +75,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="red"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -99,8 +89,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="secondary"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -115,8 +103,6 @@ Array [
   >
     <Icon
       className="lumx-flag__icon"
-      color="yellow"
-      colorVariant="D2"
       icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
       size="xxs"
     />
@@ -135,7 +121,6 @@ exports[`<Flag /> Snapshots and structure should render story 'withIcon' 1`] = `
 >
   <Icon
     className="lumx-flag__icon"
-    colorVariant="D2"
     icon="M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z"
     size="xxs"
   />

package/src/components/icon/Icon.tsx

@@ -52,11 +52,20 @@ const DEFAULT_PROPS: Partial<IconProps> = {};
  */
 export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
     const { className, color, colorVariant, hasShape, icon, size, theme, ...forwardedProps } = props;
+
     let iconColor;
+    let iconColorVariant;
     if (color) {
         iconColor = color;
+        iconColorVariant = colorVariant;
     } else if (theme) {
         iconColor = theme === Theme.light ? ColorPalette.dark : ColorPalette.light;
+
+        if (colorVariant) {
+            iconColorVariant = colorVariant;
+        } else {
+            iconColorVariant = Theme.light ? 'L1' : 'N';
+        }
     } else if (hasShape) {
         iconColor = ColorPalette.dark;
     }
@@ -86,7 +95,7 @@ export const Icon: Comp<IconProps, HTMLElement> = forwardRef((props, ref) => {
                 className,
                 handleBasicClasses({
                     color: iconColor,
-                    colorVariant,
+                    colorVariant: iconColorVariant,
                     hasShape,
                     prefix: CLASSNAME,
                     size: iconSize,

package/src/components/message/Message.tsx

@@ -62,8 +62,8 @@ export const Message: Comp<MessageProps, HTMLDivElement> = forwardRef((props, re
             )}
             {...forwardedProps}
         >
-            {(customIcon || icon) && <Icon className="lumx-message__icon" icon={customIcon || icon} size={Size.xs} />}
-            <div className="lumx-message__text">{children}</div>
+            {(customIcon || icon) && <Icon className={`${CLASSNAME}__icon`} icon={customIcon || icon} size={Size.xs} />}
+            <div className={`${CLASSNAME}__text`}>{children}</div>
         </div>
     );
 });