@mailstep/design-system 0.8.26 → 0.8.27

package/ui/Elements/DropdownMenu/components/DefaultItem.js

@@ -0,0 +1,58 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n      border-top: slim;\n      border-color: lightGray2;\n    "
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  padding: 8px 10px;\n  font-size: 14px;\n  color: typoPrimary;\n  font-weight: normal;\n  display: flex;\n\n  :hover {\n    background-color: bgLightGray1;\n    cursor: pointer;\n  }\n\n  ",
+        ";\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  margin-right: 10px;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled, { css } from "@xstyled/styled-components";
+var StyledListItem = styled.li(_templateObject1(), function(props) {
+    return props.hasSeparator && css(_templateObject());
+});
+var IconWrap = styled.span(_templateObject2());
+var MenuItem = function MenuItem(param) {
+    var icon = param.icon, title = param.title, hasSeparator = param.hasSeparator;
+    return /* @__PURE__ */ jsxs(StyledListItem, {
+        hasSeparator: hasSeparator,
+        children: [
+            icon && /* @__PURE__ */ jsx(IconWrap, {
+                children: icon
+            }),
+            title
+        ]
+    });
+};
+var DefaultItem_default = MenuItem;
+export { DefaultItem_default as default };

package/ui/Elements/DropdownMenu/components/MenuItem.d.ts

@@ -1,5 +1,4 @@
-import { ReactElement } from 'react';
-import { Item, MenuItemProps } from '../types';
-
+import { type ReactElement } from 'react';
+import { type Item, type MenuItemProps } from '../types';
 declare const MenuItem: <ItemType extends Item>({ item, ItemComponent, onClose }: MenuItemProps<ItemType>) => ReactElement;
 export default MenuItem;

package/ui/Elements/DropdownMenu/components/MenuItem.js

@@ -0,0 +1,106 @@
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n    background-color: red1;\n    color: white;\n    border-radius: 6px;\n    :hover {\n      & svg {\n        stroke: typoPrimary;\n      }\n    }\n    & svg {\n      stroke: white;\n    }\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  display: block;\n  border-top: ",
+        ";\n  padding-top: ",
+        ";\n  color: typoPrimary;\n  text-decoration: none;\n\n  :hover > * {\n    color: typoPrimary;\n    background-color: bgLightGray1;\n    border-radius: 6px;\n  }\n  ",
+        "\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { useLocation } from "react-router";
+import Link from "../../Link/Link";
+import styled, { css } from "@xstyled/styled-components";
+var StyledLink = styled(Link)(_templateObject1(), function(param) {
+    var $hasSeparator = param.$hasSeparator;
+    return $hasSeparator ? "1px solid #D2D8DF" : "none";
+}, function(param) {
+    var $hasSeparator = param.$hasSeparator;
+    return $hasSeparator ? "4px" : "0";
+}, function(param) {
+    var $isActive = param.$isActive;
+    return $isActive && css(_templateObject());
+});
+var MenuItem = function MenuItem(param) {
+    var item = param.item, ItemComponent = param.ItemComponent, onClose = param.onClose;
+    var onClick = item.onClick, link = item.link, hasSeparator = item.hasSeparator, name = item.name, autoClose = item.autoClose;
+    var location = useLocation();
+    var isActive = link === location.pathname;
+    var onClickCallback = useCallback(function(e) {
+        if (onClick) {
+            e.preventDefault();
+            onClick();
+        }
+        if (autoClose && onClose) {
+            setTimeout(function() {
+                onClose();
+            }, 200);
+        }
+    }, [
+        autoClose,
+        onClick,
+        onClose
+    ]);
+    return /* @__PURE__ */ jsx(StyledLink, {
+        to: link,
+        $isActive: isActive,
+        onClick: onClickCallback,
+        $hasSeparator: !!hasSeparator,
+        "data-cy": name,
+        size: "inherit",
+        children: /* @__PURE__ */ jsx(ItemComponent, _object_spread({}, item))
+    });
+};
+var MenuItem_default = MenuItem;
+export { MenuItem_default as default };

package/ui/Elements/DropdownMenu/components/MenuList.d.ts

@@ -1,5 +1,4 @@
-import { ReactElement } from 'react';
-import { Item, MenuItems } from '../types';
-
+import { type ReactElement } from 'react';
+import type { Item, MenuItems } from '../types';
 declare const MenuList: <ItemType extends Item>({ items, ItemComponent, onClose }: MenuItems<ItemType>) => ReactElement;
 export default MenuList;

package/ui/Elements/DropdownMenu/components/MenuList.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import MenuItem from "./MenuItem";
+var MenuList = function MenuList(param) {
+    var items = param.items, ItemComponent = param.ItemComponent, onClose = param.onClose;
+    return /* @__PURE__ */ jsx("ul", {
+        children: items === null || items === void 0 ? void 0 : items.map(function(item, i) {
+            return !item.hidden && /* @__PURE__ */ jsx(MenuItem, {
+                item: item,
+                ItemComponent: ItemComponent,
+                onClose: onClose
+            }, i);
+        })
+    });
+};
+var MenuList_default = MenuList;
+export { MenuList_default as default };

package/ui/Elements/DropdownMenu/index.js

@@ -0,0 +1,2 @@
+import { DropdownMenu } from "./DropdownMenu";
+export { DropdownMenu as default };

package/ui/Elements/DropdownMenu/types.d.ts

@@ -1,5 +1,4 @@
-import { Ref, ReactNode } from 'react';
-
+import type { Ref, ReactNode } from 'react';
 export type Pathname = {
     pathname: string;
 };

package/ui/Elements/DropdownSelect/DropdownSelect.d.ts

@@ -1,6 +1,5 @@
-import { default as React, ReactNode } from 'react';
-import { VariantValue, AppearanceValue } from '../Button/types';
-
+import React, { type ReactNode } from 'react';
+import { type VariantValue, type AppearanceValue } from '../Button/types';
 type Item = {
     label: string | ReactNode;
     value: string;
@@ -17,7 +16,7 @@ type DropdownSelectProps = {
     disabled?: boolean;
     ButtonComponent?: React.FC;
 };
-export declare const CustomSelectButton: import('styled-components').StyledComponent<"button", import('@xstyled/system').Theme, {}, never>;
+export declare const CustomSelectButton: import("styled-components").StyledComponent<"button", import("@xstyled/system").Theme, {}, never>;
 declare const DropdownSelect: React.FC<DropdownSelectProps>;
 export default DropdownSelect;
 export type { Item as DropdownSelectItem };

package/ui/Elements/DropdownSelect/DropdownSelect.js

@@ -0,0 +1,207 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  flex-shrink: 0;\n  margin-left: 2;\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  margin-right: 1;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  position: absolute;\n  top: 8px;\n  min-width: ",
+        ";\n  width: max-content;\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject3() {
+    var data = _tagged_template_literal([
+        "\n  display: flex;\n  align-items: center;\n"
+    ]);
+    _templateObject3 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject4() {
+    var data = _tagged_template_literal([
+        "\n  border-left: ",
+        ";\n"
+    ]);
+    _templateObject4 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject5() {
+    var data = _tagged_template_literal([
+        "\n  display: none;\n  min-width: 160px;\n  height: 38px;\n  padding: 0;\n  background-color: red1;\n  color: white;\n  font-size: 14px;\n  line-height: 14px;\n  font-weight: 600;\n  border: none;\n  border-radius: lg;\n  outline: none;\n  cursor: pointer;\n  :disabled {\n    border: slim;\n    background-color: bgLightGray;\n    border-color: lightGray5;\n    color: gray3;\n    opacity: 0.6;\n    cursor: auto;\n  }\n\n  @media (min-width: 1024px) {\n    display: block;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  ",
+        " {\n    justify-content: space-between;\n    padding-left: 14px;\n  }\n\n  ",
+        " {\n    margin-left: 20px;\n    padding: 12px 14px;\n  }\n"
+    ]);
+    _templateObject5 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useCallback, useRef } from "react";
+import Popover from "../../Blocks/Popover";
+import Button from "../Button/index";
+import DropdownMenu from "../DropdownMenu";
+import Icon from "../Icon/Icon";
+import styled from "@xstyled/styled-components";
+var ArrowIcon = styled(Icon)(_templateObject());
+var CustomIconWrap = styled.div(_templateObject1());
+var StyledDropdownMenu = styled(DropdownMenu)(_templateObject2(), function(param) {
+    var $fixedWidth = param.$fixedWidth;
+    return $fixedWidth ? "160px" : "max-content";
+});
+var ContentWrapper = styled.div(_templateObject3());
+var ChevronWrapper = styled.div(_templateObject4(), function(param) {
+    var $hasBorder = param.$hasBorder;
+    return $hasBorder ? "1px solid white" : "none";
+});
+var CustomSelectButton = styled.button(_templateObject5(), ContentWrapper, ChevronWrapper);
+var DropdownSelect = function DropdownSelect(param) {
+    var label = param.label, appearance = param.appearance, variant = param.variant, options = param.options, showChevron = param.showChevron, onSelect = param.onSelect, disabled = param.disabled, icon = param.icon, ButtonComponent = param.ButtonComponent;
+    var _React_useState = _sliced_to_array(React.useState(false), 2), showDropdownMenu = _React_useState[0], setShowDropdownMenu = _React_useState[1];
+    var onClose = useCallback(function() {
+        setShowDropdownMenu(false);
+    }, []);
+    var toggleDropdownMenu = React.useCallback(function() {
+        setShowDropdownMenu(function(prev) {
+            return !prev;
+        });
+    }, []);
+    var handleSelectItem = React.useCallback(function(item) {
+        setShowDropdownMenu(false);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(item.value);
+    }, [
+        onSelect
+    ]);
+    var ref = useRef(null);
+    var items = options.map(function(item) {
+        return {
+            title: item.label,
+            onClick: function onClick() {
+                handleSelectItem(item);
+            },
+            link: "#",
+            name: item.name
+        };
+    });
+    var ComponentOfButton = ButtonComponent || Button;
+    var isCustomBtn = !!ButtonComponent;
+    return /* @__PURE__ */ jsxs("div", {
+        ref: ref,
+        children: [
+            /* @__PURE__ */ jsx(ComponentOfButton, {
+                type: "button",
+                appearance: appearance || "secondary",
+                variant: variant || "default",
+                onClick: toggleDropdownMenu,
+                disabled: disabled,
+                "data-cy": "createProductDropdownMenuBtn",
+                children: /* @__PURE__ */ jsxs(ContentWrapper, {
+                    children: [
+                        icon && /* @__PURE__ */ jsx(CustomIconWrap, {
+                            children: icon
+                        }),
+                        /* @__PURE__ */ jsx("span", {
+                            children: label
+                        }),
+                        showChevron && /* @__PURE__ */ jsx(ChevronWrapper, {
+                            $hasBorder: isCustomBtn,
+                            children: /* @__PURE__ */ jsx(ArrowIcon, {
+                                icon: "chevronDown",
+                                size: isCustomBtn ? "100%" : "80%",
+                                fixedWidth: isCustomBtn
+                            })
+                        })
+                    ]
+                })
+            }),
+            showDropdownMenu && /* @__PURE__ */ jsx(Popover, {
+                parentRef: ref,
+                onClose: onClose,
+                placement: "bottom-start",
+                children: /* @__PURE__ */ jsx(StyledDropdownMenu, {
+                    showMenu: true,
+                    items: items,
+                    $fixedWidth: isCustomBtn
+                })
+            })
+        ]
+    });
+};
+var DropdownSelect_default = DropdownSelect;
+export { CustomSelectButton, DropdownSelect_default as default };

package/ui/Elements/DropdownSelect/index.d.ts

@@ -1,5 +1,4 @@
-import { default as DropdownSelect } from './DropdownSelect';
-
+import DropdownSelect from './DropdownSelect';
 export { CustomSelectButton } from './DropdownSelect';
 export type { DropdownSelectItem } from './DropdownSelect';
 export default DropdownSelect;

package/ui/Elements/DropdownSelect/index.js

@@ -0,0 +1,4 @@
+import DropdownSelect from "./DropdownSelect";
+import { CustomSelectButton } from "./DropdownSelect";
+var DropdownSelect_default = DropdownSelect;
+export { CustomSelectButton, DropdownSelect_default as default };

package/ui/Elements/ErrorMessage/ErrorMessage.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-import { Props } from './types';
-
+import React from 'react';
+import { type Props } from './types';
 declare const ErrorMessage: React.FC<Props>;
 export default ErrorMessage;

package/ui/Elements/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,58 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  span {\n    display: none;\n    position: absolute;\n    width: 120px;\n    background-color: red1;\n    color: white;\n    text-align: center;\n    border-radius: md;\n    padding: 1;\n    z-index: 1;\n    transition: opacity 0.3s;\n    top: 0;\n    margin-top: -4px;\n    left: 100%;\n    margin-left: 2;\n    box-shadow: tooltipBoxShadow;\n\n    :after {\n      content: '';\n      position: absolute;\n      top: 3px;\n      right: 100%;\n      border: mediumThick;\n      border-color: transparent ",
+        " transparent transparent;\n    }\n  }\n\n  :hover {\n    cursor: pointer;\n    span {\n      display: block;\n    }\n  }\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  color: red1;\n  font-size: 1;\n  display: flex;\n  align-items: flex-start;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject2() {
+    var data = _tagged_template_literal([
+        "\n  .inline {\n    margin-top: 1;\n  }\n  .tooltip {\n    ",
+        "\n  }\n"
+    ]);
+    _templateObject2 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx } from "react/jsx-runtime";
+import styled, { css, th } from "@xstyled/styled-components";
+var tooltip = css(_templateObject(), th.color("red1"));
+var ErrorWrap = styled.div(_templateObject1());
+var StyledWrapper = styled.div(_templateObject2(), tooltip);
+var ErrorMessage = function ErrorMessage(param) {
+    var children = param.children, appearance = param.appearance;
+    return /* @__PURE__ */ jsx(StyledWrapper, {
+        children: /* @__PURE__ */ jsx(ErrorWrap, {
+            className: appearance,
+            children: /* @__PURE__ */ jsx("span", {
+                "data-testid": "error-message",
+                children: children
+            })
+        })
+    });
+};
+var ErrorMessage_default = ErrorMessage;
+export { ErrorMessage_default as default };

package/ui/Elements/ErrorMessage/index.d.js

@@ -0,0 +1,3 @@
+import { Props as Props2 } from "./types";
+var index_d_default = ErrorMessage;
+export { Props2 as Props, index_d_default as default };

package/ui/Elements/ErrorMessage/index.d.ts

@@ -1,4 +1,3 @@
-import { default as ErrorMessage } from './ErrorMessage';
-
+import ErrorMessage from './ErrorMessage';
 export { ErrorMessage };
 export default ErrorMessage;

package/ui/Elements/ErrorMessage/index.js

@@ -0,0 +1,3 @@
+import ErrorMessage from "./ErrorMessage";
+var ErrorMessage_default = ErrorMessage;
+export { ErrorMessage, ErrorMessage_default as default };

package/ui/Elements/ErrorMessage/stories/ErrorMessage.stories.d.ts

@@ -1,8 +1,7 @@
-import { StoryObj } from '@storybook/react-webpack5';
-
+import type { StoryObj } from '@storybook/react-webpack5';
 declare const meta: {
     title: string;
-    component: import('react').FC<import('../types').Props>;
+    component: import("react").FC<import("../types").Props>;
     tags: string[];
     argTypes: {};
 };

package/ui/Elements/ErrorMessage/types.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-
 export type Props = {
     children: ReactNode;
     appearance?: 'inline' | 'tooltip';

package/ui/Elements/HighlightBox/HighlightBox.d.ts

@@ -1,5 +1,4 @@
-import { default as React } from 'react';
-
+import React from 'react';
 export type FlagAppearanceType = 'neutralBold' | 'neutralSubtle' | 'blueBold' | 'blueSubtle' | 'tealBold' | 'tealSubtle' | 'greenBold' | 'greenSubtle' | 'orangeBold' | 'orangeSubtle' | 'yellowBold' | 'yellowSubtle' | 'pinkBold' | 'pinkSubtle' | 'purpleBold' | 'purpleSubtle' | 'redBold' | 'redSubtle';
 export declare const flagAppearanceToColorMap: {
     neutralBold: string;

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -0,0 +1,103 @@
+function _tagged_template_literal(strings, raw) {
+    if (!raw) {
+        raw = strings.slice(0);
+    }
+    return Object.freeze(Object.defineProperties(strings, {
+        raw: {
+            value: Object.freeze(raw)
+        }
+    }));
+}
+function _templateObject() {
+    var data = _tagged_template_literal([
+        "\n  display: inline-flex;\n  align-items: center;\n  justify-content: flex-start;\n  border-radius: ml;\n  font-size: 12px;\n  text-align: center;\n  line-height: 19.2px;\n  min-width: 0;\n  font-weight: semiBold;\n  .default {\n    height: 24px;\n    padding: 2px 8px !important;\n  }\n  .small {\n    height: 18px;\n    padding: 1px 6px;\n  }\n  .wide {\n    height: 2.75em;\n    display: flex;\n    flex-flow: row wrap;\n    width: 11rem;\n    align-content: center;\n    line-height: 14px;\n    padding: 0.5px 12px;\n  }\n  .fitContent {\n    width: fit-content;\n    height: auto;\n    padding: 4px 5px;\n    font-size: 13px;\n    line-height: 15px;\n    font-weight: 400;\n  }\n  background-color: ",
+        ";\n  color: ",
+        ";\n"
+    ]);
+    _templateObject = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+function _templateObject1() {
+    var data = _tagged_template_literal([
+        "\n  text-overflow: ellipsis;\n  overflow: hidden;\n"
+    ]);
+    _templateObject1 = function _templateObject() {
+        return data;
+    };
+    return data;
+}
+import { jsx } from "react/jsx-runtime";
+import styled, { useTheme } from "@xstyled/styled-components";
+import { th } from "@xstyled/system";
+var StyledHighlightBox = styled.div(_templateObject(), function(param) {
+    var $bgcolor = param.$bgcolor;
+    return $bgcolor;
+}, function(param) {
+    var $fontColor = param.$fontColor;
+    return $fontColor;
+});
+var OverflowWrap = styled.span(_templateObject1());
+var flagAppearanceToColorMap = {
+    neutralBold: "neutral300",
+    neutralSubtle: "neutral20",
+    blueBold: "blue70",
+    blueSubtle: "blue20",
+    tealBold: "teal60",
+    tealSubtle: "teal20",
+    greenBold: "green60",
+    greenSubtle: "green20",
+    orangeBold: "orange60",
+    orangeSubtle: "orange20",
+    yellowBold: "yellow60",
+    yellowSubtle: "yellow20",
+    pinkBold: "magenta60",
+    pinkSubtle: "magenta20",
+    purpleBold: "purple60",
+    purpleSubtle: "purple20",
+    redBold: "red60",
+    redSubtle: "red20"
+};
+var flagAppearanceToFontColorMap = {
+    neutralBold: "white",
+    neutralSubtle: "typoPrimary",
+    blueBold: "white",
+    blueSubtle: "blue80",
+    tealBold: "white",
+    tealSubtle: "teal90",
+    greenBold: "white",
+    greenSubtle: "green80",
+    orangeBold: "white",
+    orangeSubtle: "orange80",
+    yellowBold: "typoPrimary",
+    yellowSubtle: "typoPrimary",
+    pinkBold: "white",
+    pinkSubtle: "magenta80",
+    purpleBold: "white",
+    purpleSubtle: "purple80",
+    redBold: "white",
+    redSubtle: "red80"
+};
+var HighlightBox = function HighlightBox(param) {
+    var children = param.children, appearance = param.appearance, _param_size = param.size, size = _param_size === void 0 ? "default" : _param_size, className = param.className, prefix = param.prefix;
+    var theme = useTheme();
+    var bgColor = th.color(appearance ? flagAppearanceToColorMap[appearance] : "transparent")({
+        theme: theme
+    });
+    var fontColor = th.color(appearance ? flagAppearanceToFontColorMap[appearance] : "typoPrimary")({
+        theme: theme
+    });
+    var name = prefix ? "".concat(prefix, "Label") : "label";
+    return /* @__PURE__ */ jsx(StyledHighlightBox, {
+        $bgcolor: bgColor,
+        $fontColor: fontColor,
+        "data-cy": name,
+        children: /* @__PURE__ */ jsx(OverflowWrap, {
+            className: size + " " + (className || ""),
+            children: children
+        })
+    });
+};
+var HighlightBox_default = HighlightBox;
+export { HighlightBox_default as default, flagAppearanceToColorMap, flagAppearanceToFontColorMap };