@itcase/ui-web 1.9.77 → 1.9.81

package/dist/types/components/Group/stories/GroupWrap.stories.d.ts

@@ -0,0 +1,123 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").ForwardRefExoticComponent<{
+        align?: import("@itcase/types-ui").AlignProps;
+        alignDirection?: import("@itcase/types-ui").DirectionProps;
+        border?: import("@itcase/types-ui").BorderColorProps;
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderColorActive?: import("@itcase/types-ui").BorderColorActiveProps;
+        borderColorActiveHover?: import("@itcase/types-ui").BorderColorProps;
+        borderColorHover?: import("@itcase/types-ui").BorderColorProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        columns?: number;
+        direction?: import("@itcase/types-ui").DirectionProps;
+        elevation?: import("@itcase/types-ui").ElevationProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        fillActive?: import("@itcase/types-ui").FillActiveProps;
+        fillActiveHover?: import("@itcase/types-ui").FillActiveHoverProps;
+        fillDisabled?: import("@itcase/types-ui").FillProps;
+        fillHover?: import("@itcase/types-ui").FillHoverProps;
+        flexGrow?: string;
+        height?: import("@itcase/types-ui").HeightProps;
+        hoverFilter?: string;
+        iconFillHover?: import("../../Icon").IconProps["fillHover"];
+        justifyContent?: import("@itcase/types-ui").JustifyContentProps;
+        labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
+        shape?: import("@itcase/types-ui").ShapeProps;
+        shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
+        stacking?: import("@itcase/types-ui").StackingProps;
+        textColor?: import("src/components/Text").TextProps["textColor"];
+        textColorActive?: import("src/components/Text").TextProps["textColorActive"];
+        textColorHover?: import("src/components/Text").TextProps["textColorHover"];
+        width?: import("@itcase/types-ui").WidthProps;
+        wrap?: import("@itcase/types-ui").WrapProps;
+    } & import("@itcase/ui-core/hooks").StyleAttributes & {
+        id?: import("@itcase/types-core").GeneratedId;
+        appearance?: import("@itcase/types-ui").AppearanceKeysDefault;
+        children?: import("react").ReactNode;
+        className?: string;
+        dataId?: string;
+        dataTestId?: string;
+        dataTour?: string;
+        easing?: boolean;
+        htmlFor?: string;
+        isActive?: boolean;
+        isDisabled?: boolean;
+        name?: string;
+        onClick?: () => void;
+        onMouseDown?: () => void;
+        print?: boolean;
+        scroll?: boolean | import("@itcase/types-ui").DirectionProps;
+        set?: string;
+        style?: import("react").CSSProperties;
+        tag?: import("react").ElementType;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    args: {
+        width: "500px";
+        direction: "horizontal";
+        fill: "surfacePrimary";
+        borderColor: "surfaceBorderPrimary";
+        padding: "20";
+    };
+    render: ({ ...args }: {
+        align?: import("@itcase/types-ui").AlignProps;
+        alignDirection?: import("@itcase/types-ui").DirectionProps;
+        border?: import("@itcase/types-ui").BorderColorProps;
+        borderColor?: import("@itcase/types-ui").BorderColorProps;
+        borderColorActive?: import("@itcase/types-ui").BorderColorActiveProps;
+        borderColorActiveHover?: import("@itcase/types-ui").BorderColorProps;
+        borderColorHover?: import("@itcase/types-ui").BorderColorProps;
+        borderType?: import("@itcase/types-ui").BorderTypeProps;
+        borderWidth?: import("@itcase/types-ui").BorderWidthProps;
+        columns?: number;
+        direction?: import("@itcase/types-ui").DirectionProps;
+        elevation?: import("@itcase/types-ui").ElevationProps;
+        fill?: import("@itcase/types-ui").FillProps;
+        fillActive?: import("@itcase/types-ui").FillActiveProps;
+        fillActiveHover?: import("@itcase/types-ui").FillActiveHoverProps;
+        fillDisabled?: import("@itcase/types-ui").FillProps;
+        fillHover?: import("@itcase/types-ui").FillHoverProps;
+        flexGrow?: string;
+        height?: import("@itcase/types-ui").HeightProps;
+        hoverFilter?: string;
+        iconFillHover?: import("../../Icon").IconProps["fillHover"];
+        justifyContent?: import("@itcase/types-ui").JustifyContentProps;
+        labelTextColor?: import("../../Label").LabelProps["labelTextColor"];
+        shape?: import("@itcase/types-ui").ShapeProps;
+        shapeStrength?: import("@itcase/types-ui").ShapeStrengthProps;
+        stacking?: import("@itcase/types-ui").StackingProps;
+        textColor?: import("src/components/Text").TextProps["textColor"];
+        textColorActive?: import("src/components/Text").TextProps["textColorActive"];
+        textColorHover?: import("src/components/Text").TextProps["textColorHover"];
+        width?: import("@itcase/types-ui").WidthProps;
+        wrap?: import("@itcase/types-ui").WrapProps;
+    } & import("@itcase/ui-core/hooks").StyleAttributes & {
+        id?: import("@itcase/types-core").GeneratedId;
+        appearance?: import("@itcase/types-ui").AppearanceKeysDefault;
+        children?: import("react").ReactNode;
+        className?: string;
+        dataId?: string;
+        dataTestId?: string;
+        dataTour?: string;
+        easing?: boolean;
+        htmlFor?: string;
+        isActive?: boolean;
+        isDisabled?: boolean;
+        name?: string;
+        onClick?: () => void;
+        onMouseDown?: () => void;
+        print?: boolean;
+        scroll?: boolean | import("@itcase/types-ui").DirectionProps;
+        set?: string;
+        style?: import("react").CSSProperties;
+        tag?: import("react").ElementType;
+    } & import("react").RefAttributes<HTMLDivElement>) => import("react/jsx-runtime").JSX.Element;
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Nowrap: Story;
+export declare const Wrap: Story;
+export declare const WrapReverse: Story;

package/dist/types/components/Group/stories/GroupWrap.stories.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from 'src/components/Text';
+import { Group } from '..';
+const meta = {
+    title: 'Layout / Group / Wrap',
+    component: Group,
+    args: {
+        width: '500px',
+        direction: 'horizontal',
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderPrimary',
+        padding: '20',
+    },
+    render: ({ ...args }) => (_jsxs(Group, { width: args.width, height: args.height, direction: args.direction, fill: args.fill, borderColor: args.borderColor, padding: args.padding, wrap: args.wrap, children: [_jsx(Group, { width: "30%", height: "60px", fill: "accentPrimary", padding: "20", children: _jsx(Text, { size: "xl", textColor: "white", children: "1" }) }), _jsx(Group, { width: "30%", height: "60px", fill: "specialPrimary", padding: "20", children: _jsx(Text, { size: "xl", textColor: "white", children: "2" }) }), _jsx(Group, { width: "30%", height: "60px", fill: "extraPrimary", padding: "20", children: _jsx(Text, { size: "xl", textColor: "white", children: "3" }) }), _jsx(Group, { width: "30%", height: "60px", fill: "infoPrimary", padding: "20", children: _jsx(Text, { size: "xl", textColor: "white", children: "4" }) })] })),
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        return _jsx(Group, { ...args });
+    },
+};
+export const Nowrap = {
+    args: {
+        wrap: 'nowrap',
+    },
+};
+export const Wrap = {
+    args: {
+        wrap: 'wrap',
+    },
+};
+export const WrapReverse = {
+    args: {
+        wrap: 'wrap-reverse',
+    },
+};

package/dist/types/components/HTMLContent/HTMLContent.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/types/components/HTMLContent/HTMLContent.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useDevicePropsGenerator, useStyles } from '@itcase/ui-core/hooks';
+function HTMLContent(props) {
+    const { className, dataTestId, dataTour, content, style, onClick, children } = props;
+    const propsGenerator = useDevicePropsGenerator(props);
+    const { directionClass, flexGrowClass, justifyContentClass, alignClass, alignDirectionClass, fillClass, fillHoverClass, borderColorClass, borderTypeClass, borderWidthClass, textColorClass, textWeightClass, columnsClass, elevationClass, heightClass, shapeClass, widthClass, wrapClass, } = propsGenerator;
+    const { styles: htmlContentStyles } = useStyles(props);
+    return (_jsx("div", { className: clsx(className, 'html-content', alignClass && `align_${alignClass}`, alignDirectionClass && `align_${alignDirectionClass}`, borderColorClass && `border-color_${borderColorClass}`, borderTypeClass && `border_type_${borderTypeClass}`, borderWidthClass && `border-width_${borderWidthClass}`, columnsClass && `html-content_columns_${columnsClass}`, directionClass && `html-content_direction_${directionClass}`, elevationClass && `elevation_${elevationClass}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, flexGrowClass && `flex-grow_${flexGrowClass}`, heightClass && `height_${heightClass}`, justifyContentClass && `justify-content_${justifyContentClass}`, shapeClass && `html-content_shape_${shapeClass}`, textColorClass && `text-color_${textColorClass}`, textWeightClass && `text-weight_${textWeightClass}`, wrapClass && `html-content_wrap_${wrapClass}`, widthClass && `width_${widthClass}`), dangerouslySetInnerHTML: { __html: content }, "data-testid": dataTestId, "data-tour": dataTour, style: Object.assign({}, htmlContentStyles, style), onClick: onClick, children: children }));
+}
+export { HTMLContent };

package/dist/types/components/HTMLContent/index.js

@@ -0,0 +1 @@
+export { HTMLContent } from './HTMLContent';

package/dist/types/components/HTMLContent/stories/HTMLContent.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { HTMLContent } from '..';
+declare const meta: {
+    title: string;
+    component: typeof HTMLContent;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Demo: Story;

package/dist/types/components/HTMLContent/stories/HTMLContent.stories.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HTMLContent } from '..';
+const meta = {
+    title: 'Wrappers / HTMLContent',
+    component: HTMLContent,
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Demo = {
+    args: {
+        content: '',
+    },
+    render: (args) => (_jsx(HTMLContent, { ...args, content: "\n          <h1>Heading level 1</h1>\n          <h2>Heading level 2</h2>\n          <h3>Heading level 3</h3>\n          <h4>Heading level 4</h4>\n          <h5>Heading level 5</h5>\n          <h6>Heading level 6</h6>\n          <p>Geckos are a group of usually small, usually nocturnal lizards. They are found on every continent except Antarctica.</p>\n          <p>Some species live in houses where they hunt insects attracted by artificial light. </p>\n          <ol>\n            <li>Mix flour, baking powder, sugar, and salt.</li>\n            <li>In another bowl, mix eggs, milk, and oil.</li>\n            <li>Stir both mixtures together.</li>\n            <li>Fill muffin tray 3/4 full.</li>\n            <li>Bake for 20 minutes.</li>\n          </ol>          \n          <ul>\n            <li>Milk</li>\n            <li>\n              Cheese\n              <ul>\n                <li>Blue cheese</li>\n                <li>Feta</li>\n              </ul>\n            </li>\n          </ul>\n          <table>\n            <thead>\n              <tr>\n                <th>Person</th>\n                <th>Most interest in</th>\n                <th>Age</th>\n              </tr>\n            </thead>\n            <tbody>\n              <tr>\n                <th>Chris</th>\n                <td>HTML tables</td>\n                <td>22</td>\n              </tr>\n              <tr>\n                <th>Dennis</th>\n                <td>Web accessibility</td>\n                <td>45</td>\n              </tr>\n              <tr>\n                <th>Sarah</th>\n                <td>JavaScript frameworks</td>\n                <td>29</td>\n              </tr>\n              <tr>\n                <th>Karen</th>\n                <td>Web performance</td>\n                <td>36</td>\n              </tr>\n            </tbody>\n            <tfoot>\n              <tr>\n                <th>Average age</th>\n                <th>JavaScript</th>\n                <td>33</td>\n              </tr>\n            </tfoot>\n          </table>          \n          " })),
+};

package/dist/types/components/HeroTitle/HeroTitle.appearance.js

@@ -0,0 +1,5 @@
+import { heroTitleAppearanceSize } from './appearance/heroTitleSize';
+const heroTitleAppearance = {
+    ...heroTitleAppearanceSize,
+};
+export { heroTitleAppearance };

package/dist/types/components/HeroTitle/HeroTitle.interface.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, ElementType, ReactNode } from 'react';
-import { AppearanceHeadingSizeKey, DirectionProps, FillProps, SvgFillProps, TextAlignProps, TextWeightProps } from '@itcase/types-ui';
+import { AppearanceConfig, AppearanceHeadingSizeKey, DirectionProps, FillProps, SvgFillProps, TextAlignProps, TextWeightProps } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { IconProps } from 'src/components/Icon/Icon.interface';
 import { TextProps } from 'src/components/Text/Text.interface';
@@ -52,7 +52,7 @@ type HeroTitleAppearanceProps = {
 type HeroTitleProps = HeroTitleAppearanceProps & StyleAttributes & {
     after?: ReactNode;
     afterWrapper?: ReactNode;
-    appearance?: AppearanceKeys;
+    appearance?: AppearanceHeadingSizeKey;
     before?: ReactNode;
     beforeWrapper?: ReactNode;
     children: ReactNode;
@@ -66,12 +66,6 @@ type HeroTitleProps = HeroTitleAppearanceProps & StyleAttributes & {
     tag?: ElementType;
     text?: string;
 };
-type AppearanceKeys = AppearanceHeadingSizeKey & {};
-type HeroTitleAppearance = {
-    [key in AppearanceKeys]: HeroTitleAppearanceProps;
-};
-type HeroTitleConfig = {
-    appearance: HeroTitleAppearance;
-    setAppearance: (newComponent: HeroTitleAppearance) => void;
-};
+type HeroTitleConfig = AppearanceConfig<AppearanceHeadingSizeKey, HeroTitleAppearanceProps>;
+type HeroTitleAppearance = HeroTitleConfig['appearance'];
 export type { HeroTitleAppearance, HeroTitleConfig, HeroTitleProps };

package/dist/types/components/HeroTitle/HeroTitle.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/types/components/HeroTitle/HeroTitle.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import clsx from 'clsx';
+import { useAppearanceConfig, useDevicePropsGenerator, useStyles, } from '@itcase/ui-core/hooks';
+import { Icon } from 'src/components/Icon';
+import { heroTitleAppearance } from './HeroTitle.appearance';
+const heroTitleConfig = {
+    appearance: heroTitleAppearance,
+    setAppearance: (appearanceConfig) => {
+        heroTitleConfig.appearance = appearanceConfig;
+    },
+};
+function HeroTitle(props) {
+    const { appearance, className, dataTestId, dataTour, text, afterWrapper, beforeWrapper, tag = 'span', before, after, isDisabled, isSkeleton, onClick, children, } = props;
+    const appearanceConfig = useAppearanceConfig(appearance, heroTitleConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { directionClass, size, fillClass, textAlignClass, textColorActiveClass, textColorClass, textColorGradientClass, textColorHoverClass, textFontClass, textStyleClass, textTruncateClass, textWeightClass, textWrap, heightClass, iconAfter, iconAfterFill, iconAfterFillIcon, iconAfterFillSize, iconAfterShape, iconAfterSize, iconAfterSrc, iconBadgeAppearance, iconBadgeShape, iconBadgeSize, iconBadgeTextColor, iconBadgeTextSize, iconBadgeValue, iconBefore, iconBeforeFill, iconBeforeFillIcon, iconBeforeFillSize, iconBeforeShape, iconBeforeSize, iconBeforeSrc, svgFillClass, svgFillHoverClass, typeClass, widthClass, wrapperDirectionClass, } = propsGenerator;
+    const { styles: heroTitleStyles, wrapper: heroTitleWrapperStyles } = useStyles(props);
+    const Tag = useMemo(() => {
+        if (tag) {
+            return tag;
+        }
+        return size ? size : 'span';
+    }, [size, tag]);
+    return (_jsxs(Tag, { className: clsx(className, 'heroTitle', fillClass && `fill_${fillClass}`, svgFillClass && `svg_fill_${svgFillClass}`, svgFillHoverClass && `svg_fill_hover_${svgFillHoverClass}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, size && `hero-title_size_${size}`, directionClass && `hero-title_direction_${directionClass}`, 'text', textColorClass && `text-color_${textColorClass}`, textColorActiveClass && `text-color_active_${textColorActiveClass}`, textColorHoverClass && `text-color_hover_${textColorHoverClass}`, typeClass && `hero-title_type_${typeClass}`, textColorGradientClass && `text-gradient_${textColorGradientClass}`, textFontClass && `text-font_${textFontClass}`, textStyleClass && `text-style_${textStyleClass}`, textWeightClass && `text-weight_${textWeightClass}`, textWrap && `word-wrap_${textWrap}`, isSkeleton && 'skeleton'), "data-testid": dataTestId, "data-tour": dataTour, style: heroTitleStyles, onClick: onClick, children: [before, _jsxs("span", { className: clsx(textAlignClass && `text-align_${textAlignClass}`, wrapperDirectionClass &&
+                    `hero-title-direction_${wrapperDirectionClass}`, 'hero-title__wrapper', textTruncateClass && `text-truncate_${textTruncateClass}`), style: heroTitleWrapperStyles, children: [(iconBefore || iconBeforeSrc) && (_jsx(Icon, { className: clsx('title__icon_before', iconBadgeValue && 'title__icon_before-badge'), fill: iconBeforeFill, fillSize: iconBeforeFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_before_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconBeforeFillIcon, iconSize: iconBeforeSize, imageSrc: iconBeforeSrc, shape: iconBeforeShape, SvgImage: iconBefore })), beforeWrapper, children || text, afterWrapper, (iconAfter || iconAfterSrc) && (_jsx(Icon, { className: clsx('title__icon_after', iconBadgeValue && 'title__icon_after-badge'), fill: iconAfterFill, fillSize: iconAfterFillSize, badgeAppearance: iconBadgeAppearance, badgeClass: 'title__icon_after_badge', badgeShape: iconBadgeShape, badgeSize: iconBadgeSize, badgeTextColor: iconBadgeTextColor, badgeTextSize: iconBadgeTextSize, badgeValue: iconBadgeValue, iconFill: iconAfterFillIcon, iconSize: iconAfterSize, imageSrc: iconAfterSrc, shape: iconAfterShape, SvgImage: iconAfter }))] }), after] }));
+}
+export { HeroTitle, heroTitleConfig };

package/dist/types/components/HeroTitle/appearance/heroTitleSize.js

@@ -0,0 +1,21 @@
+const heroTitleAppearanceSize = {
+    sizeH1: {
+        size: 'h1',
+    },
+    sizeH2: {
+        size: 'h2',
+    },
+    sizeH3: {
+        size: 'h3',
+    },
+    sizeH4: {
+        size: 'h4',
+    },
+    sizeH5: {
+        size: 'h5',
+    },
+    sizeH6: {
+        size: 'h6',
+    },
+};
+export { heroTitleAppearanceSize };

package/dist/types/components/HeroTitle/index.js

@@ -0,0 +1,2 @@
+export { HeroTitle, heroTitleConfig } from './HeroTitle';
+export { heroTitleAppearance } from './HeroTitle.appearance';

package/dist/types/components/HeroTitle/stories/HeroTitle.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { HeroTitle } from '../HeroTitle';
+declare const meta: {
+    title: string;
+    component: typeof HeroTitle;
+    args: {
+        appearance: "sizeH3";
+        textColor: "surfaceTextPrimary";
+        children: string;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Skeleton: Story;

package/dist/types/components/HeroTitle/stories/HeroTitle.stories.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HeroTitle } from '../HeroTitle';
+const meta = {
+    title: 'Typography / Hero Title',
+    component: HeroTitle,
+    args: {
+        appearance: 'sizeH3',
+        textColor: 'surfaceTextPrimary',
+        children: 'Hero Title',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const Default = {
+    render: (args) => {
+        return _jsx(HeroTitle, { ...args });
+    },
+};
+export const Skeleton = {
+    args: {
+        isSkeleton: true,
+    },
+    render: (args) => {
+        return _jsx(HeroTitle, { ...args });
+    },
+};

package/dist/types/components/HeroTitle/stories/HeroTitleSize.stories.d.ts

@@ -0,0 +1,21 @@
+import type { StoryObj } from '@storybook/react-vite';
+import { HeroTitle } from '../HeroTitle';
+declare const meta: {
+    title: string;
+    component: typeof HeroTitle;
+    args: {
+        textColor: "surfaceTextPrimary";
+        children: string;
+    };
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const SizeH1: Story;
+export declare const SizeH2: Story;
+export declare const SizeH3: Story;
+export declare const SizeH4: Story;
+export declare const SizeH5: Story;
+export declare const SizeH6: Story;

package/dist/types/components/HeroTitle/stories/HeroTitleSize.stories.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { HeroTitle } from '../HeroTitle';
+const meta = {
+    title: 'Typography / Hero Title / Size',
+    component: HeroTitle,
+    args: {
+        textColor: 'surfaceTextPrimary',
+        children: 'Hero Title',
+    },
+    parameters: {
+        layout: 'centered',
+    },
+};
+export default meta;
+export const SizeH1 = {
+    args: {
+        appearance: 'sizeH1',
+    },
+    render: (args) => {
+        return _jsx(HeroTitle, { ...args });
+    },
+};
+export const SizeH2 = {
+    args: {
+        appearance: 'sizeH2',
+    },
+    render: (args) => {
+        return _jsx(HeroTitle, { ...args });
+    },
+};
+export const SizeH3 = {
+    args: {
+        appearance: 'sizeH3',
+    },
+    render: (args) => {
+        return _jsx(HeroTitle, { ...args });
+    },
+};
+export const SizeH4 = {
+    args: {
+        appearance: 'sizeH4',
+    },
+    render: (args) => {
+        return _jsx(HeroTitle, { ...args });
+    },
+};
+export const SizeH5 = {
+    args: {
+        appearance: 'sizeH5',
+    },
+    render: (args) => {
+        return _jsx(HeroTitle, { ...args });
+    },
+};
+export const SizeH6 = {
+    args: {
+        appearance: 'sizeH6',
+    },
+    render: (args) => {
+        return _jsx(HeroTitle, { ...args });
+    },
+};

package/dist/types/components/Icon/Icon.appearance.js

@@ -0,0 +1,29 @@
+import { iconAppearanceAccent } from './appearance/iconAccent';
+import { iconAppearanceDanger } from './appearance/iconDanger';
+import { iconAppearanceDisabled } from './appearance/iconDisabled';
+import { iconAppearanceError } from './appearance/iconError';
+import { iconAppearanceExtra } from './appearance/iconExtra';
+import { iconAppearanceInfo } from './appearance/iconInfo';
+import { iconAppearanceShape } from './appearance/iconShape';
+import { iconAppearanceSize } from './appearance/iconSize';
+import { iconAppearanceSpecial } from './appearance/iconSpecial';
+import { iconAppearanceStyle } from './appearance/iconStyle';
+import { iconAppearanceSuccess } from './appearance/iconSuccess';
+import { iconAppearanceSurface } from './appearance/iconSurface';
+import { iconAppearanceWarning } from './appearance/iconWarning';
+const iconAppearance = {
+    ...iconAppearanceDisabled,
+    ...iconAppearanceSize,
+    ...iconAppearanceStyle,
+    ...iconAppearanceAccent,
+    ...iconAppearanceShape,
+    ...iconAppearanceDanger,
+    ...iconAppearanceError,
+    ...iconAppearanceInfo,
+    ...iconAppearanceSpecial,
+    ...iconAppearanceExtra,
+    ...iconAppearanceSuccess,
+    ...iconAppearanceSurface,
+    ...iconAppearanceWarning,
+};
+export { iconAppearance };

package/dist/types/components/Icon/Icon.interface.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties, FunctionComponent, MouseEvent, ReactNode, SVGAttributes, SVGProps } from 'react';
-import { AlignmentProps, AlignProps, AppearanceIconSizeKey, AppearanceKeysDefault, AppearanceShapeKey, AppearanceSizeKey, AppearanceStyleKey, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CenteringProps, CompositeAppearanceIconKeys, DirectionProps, FillActiveHoverProps, FillActiveProps, FillDisabledProps, FillHoverProps, FillProps, FillSizeProps, IconFillSizeProps, IconSizeProps, ItemFillProps, ShapeProps, ShapeStrengthProps, SizePXProps, TextColorProps, TextSizeProps } from '@itcase/types-ui';
+import { AlignmentProps, AlignProps, AppearanceConfig, AppearanceKeysIcon, AppearanceSizeKey, BorderColorHoverProps, BorderColorProps, BorderTypeProps, BorderWidthProps, CenteringProps, CompositeAppearanceIconKeys, DirectionProps, FillActiveHoverProps, FillActiveProps, FillDisabledProps, FillHoverProps, FillProps, FillSizeProps, IconFillSizeProps, IconSizeProps, ItemFillProps, ShapeProps, ShapeStrengthProps, SizePXProps, TextColorProps, TextSizeProps } from '@itcase/types-ui';
 import { StyleAttributes } from '@itcase/ui-core/hooks';
 import { BadgeProps } from '../Badge/Badge.interface';
 import { LinkWrapperProps } from '../Link/Link.interface';
@@ -81,12 +81,6 @@ type IconProps = IconAppearanceProps & StyleAttributes & {
     tooltipTitle?: string;
     type?: string;
 };
-type IconAppearanceKey = AppearanceIconSizeKey | AppearanceKeysDefault | AppearanceShapeKey | AppearanceStyleKey;
-type IconAppearance = {
-    [key in IconAppearanceKey]?: IconAppearanceProps;
-};
-type IconConfig = {
-    appearance: IconAppearance;
-    setAppearance: (appearanceConfig: IconAppearance) => void;
-};
+type IconConfig = AppearanceConfig<AppearanceKeysIcon, IconAppearanceProps>;
+type IconAppearance = IconConfig['appearance'];
 export type { IconAppearance, IconAppearanceProps, IconConfig, IconProps };

package/dist/types/components/Icon/Icon.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/types/components/Icon/Icon.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
+import SVG from 'react-inlinesvg';
+import { urlWithAssetPrefix } from '@itcase/ui-core/hoc';
+import { useAppearanceConfig, useDevicePropsGenerator, useStyles, } from '@itcase/ui-core/hooks';
+import { mergeAppearanceKeys } from '@itcase/ui-core/utils';
+import { Badge } from 'src/components/Badge';
+import { LinkWrapper } from 'src/components/Link';
+import { Tooltip } from 'src/components/Tooltip';
+import { iconAppearance } from './Icon.appearance';
+const iconConfig = {
+    appearance: iconAppearance,
+    setAppearance: (appearanceConfig) => {
+        iconConfig.appearance = appearanceConfig;
+    },
+};
+const Icon = urlWithAssetPrefix(React.forwardRef(function Icon(props, ref) {
+    const { id, appearance, className, dataTestId, dataTour, width, height, badgeClass, href, imageSrc, link, linkRel, linkTarget, notification, saveFillStroke, showTooltip, SvgImage, svgImageStyles, before, after, isActive, isDisabled, isSkeleton, onClick, onMouseEnter, onMouseLeave, } = props;
+    const ImageComponent = useMemo(() => {
+        if (SvgImage) {
+            const SvgComponent = SvgImage;
+            const sizes = {};
+            if (width) {
+                sizes.width = width;
+            }
+            if (height) {
+                sizes.height = height;
+            }
+            return _jsx(SvgComponent, { ...sizes, ...svgImageStyles });
+        }
+        if (imageSrc) {
+            if (imageSrc.endsWith('.svg')) {
+                if (saveFillStroke) {
+                    return _jsx(SVG, { src: imageSrc });
+                }
+                return _jsx(SVG, { src: imageSrc, preProcessor: removeFillStroke });
+            }
+            return _jsx("img", { src: imageSrc });
+        }
+        return null;
+    }, [SvgImage, imageSrc, width, height, svgImageStyles, saveFillStroke]);
+    const appearanceConfig = useAppearanceConfig(appearance, iconConfig, isDisabled);
+    const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
+    const { alignmentClass, fillActiveClass, fillActiveHoverClass, fillClass, fillDisabledClass, fillHoverClass, fillSizeClass, borderColorClass, borderColorHoverClass, borderTypeClass, borderWidthClass, badgeAppearance, badgeAppearanceSize, badgeShape, badgeSize, badgeTextColor, badgeTextSize, badgeValue, centeringClass, iconFillActiveClass, iconFillActiveHoverClass, iconFillClass, iconFillDisabledClass, iconFillHoverClass, iconSizeClass, shapeClass, shapeStrengthClass, tooltipAppearance, tooltipText, tooltipTextSize, tooltipTitle, tooltipTitleSize, } = propsGenerator;
+    const { styles: iconStyles } = useStyles(props);
+    return (_jsxs("div", { id: id, className: clsx(className, 'icon', !isActive
+            ? fillClass && `fill_${fillClass}`
+            : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
+            ? fillHoverClass && `fill_hover_${fillHoverClass}`
+            : fillActiveHoverClass &&
+                `fill_active_hover_${fillActiveHoverClass}`, fillSizeClass && `icon_fill_size_${fillSizeClass}`, fillDisabledClass && `fill_disabled_${fillDisabledClass}`, !isActive
+            ? iconFillClass && `icon_fill_${iconFillClass}`
+            : iconFillActiveClass && `icon_fill_active_${iconFillActiveClass}`, !isActive
+            ? iconFillHoverClass && `icon_fill_hover_${iconFillHoverClass}`
+            : iconFillActiveHoverClass &&
+                `icon_fill_active_hover_${iconFillActiveHoverClass}`, isDisabled &&
+            iconFillDisabledClass &&
+            `icon_fill_disabled_${iconFillDisabledClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass &&
+            `border-color_hover_${borderColorHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderTypeClass && `border_type_${borderTypeClass}`, badgeValue && 'icon_with-badge', centeringClass && `centering_${centeringClass}`, onClick && 'cursor_type_pointer', isSkeleton && `skeleton`), ref: ref, "data-testid": dataTestId, "data-tour": dataTour, style: iconStyles, onClick: onClick, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: [before, _jsxs(LinkWrapper, { className: clsx((link || href || onClick) && 'cursor_type_pointer', link || href ? 'icon__link' : 'icon__item', iconSizeClass && `icon_size_${iconSizeClass}`), href: link || href, LinkComponent: "div", rel: linkRel, target: linkTarget, children: [ImageComponent, (badgeValue || notification) && (_jsx(Badge, { appearance: mergeAppearanceKeys(badgeAppearance, badgeAppearanceSize), className: clsx(badgeClass, 'icon__badge'), size: badgeSize, textColor: badgeTextColor, textSize: badgeTextSize, shape: badgeShape, value: badgeValue })), showTooltip && (_jsx(Tooltip, { appearance: tooltipAppearance, className: clsx(className, 'icon__tooltip', alignmentClass && `alignment_${alignmentClass}`), title: tooltipTitle, titleSize: tooltipTitleSize, text: tooltipText, textSize: tooltipTextSize }))] }), after] }));
+}));
+const removeFillStroke = (code) => {
+    return code
+        .replace(/fill=".*?"/g, 'fill=""')
+        .replace(/stroke=".*?"/g, 'stroke=""');
+};
+export { Icon, iconConfig };

package/dist/types/components/Icon/appearance/iconAccent.js

@@ -0,0 +1,16 @@
+const iconAppearanceAccent = {
+    accentPrimary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        borderColor: 'accentBorderPrimary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'accentItemPrimary',
+    },
+    accentSecondary: {
+        fill: 'accentPrimary',
+        fillHover: 'accentHoverPrimary',
+        borderColor: 'accentBorderPrimary',
+        iconFill: 'accentItemPrimary',
+    },
+};
+export { iconAppearanceAccent };

package/dist/types/components/Icon/appearance/iconDanger.js

@@ -0,0 +1,10 @@
+const iconAppearanceDanger = {
+    dangerPrimary: {
+        fill: 'dangerPrimary',
+        fillHover: 'dangerHoverPrimary',
+        borderColor: 'dangerBorderSecondary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'dangerItemPrimary',
+    },
+};
+export { iconAppearanceDanger };

package/dist/types/components/Icon/appearance/iconDisabled.js

@@ -0,0 +1,9 @@
+const iconAppearanceDisabled = {
+    disabledPrimary: {
+        fill: 'surfacePrimary',
+        borderColor: 'surfaceBorderPrimary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'surfaceItemQuaternary',
+    },
+};
+export { iconAppearanceDisabled };

package/dist/types/components/Icon/appearance/iconError.js

@@ -0,0 +1,10 @@
+const iconAppearanceError = {
+    errorPrimary: {
+        fill: 'errorPrimary',
+        fillHover: 'errorHoverPrimary',
+        borderColor: 'errorBorderPrimary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'errorItemPrimary',
+    },
+};
+export { iconAppearanceError };

package/dist/types/components/Icon/appearance/iconExtra.js

@@ -0,0 +1,10 @@
+const iconAppearanceExtra = {
+    extraPrimary: {
+        fill: 'extraPrimary',
+        fillHover: 'extraHoverPrimary',
+        borderColor: 'extraBorderQuaternary',
+        badgeAppearance: 'surfacePrimary',
+        iconFill: 'extraItemPrimary',
+    },
+};
+export { iconAppearanceExtra };