@zohodesk/dot 1.0.0-temp-232.1 → 1.0.0-temp-233.2

package/es/setup/header/Search/Search.js

@@ -3,6 +3,7 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
 import TextBox from '@zohodesk/components/es/TextBox/TextBox';
+import { cn } from "@dot-system/css-utility";
 import style from "./Search.module.css";
 export default class Search extends React.Component {
   constructor(props) {
@@ -52,7 +53,7 @@ export default class Search extends React.Component {
       isFocus
     } = this.state;
     return /*#__PURE__*/React.createElement("div", {
-      className: `${style.container} ${isFocus ? style.active : ''} ${customClass}`,
+      className: cn(`${style.container} ${isFocus ? style.active : ''} ${customClass}`),
       "data-id": `${dataId}_search`,
       "data-test-id": `${dataId}_search`
     }, /*#__PURE__*/React.createElement(TextBox, {
@@ -66,7 +67,7 @@ export default class Search extends React.Component {
       needAppearance: false,
       onBlur: this.onBlur
     }), value != '' && value ? /*#__PURE__*/React.createElement("span", {
-      className: style.icon,
+      className: cn(style.icon),
       onClick: this.onBlur,
       "data-id": `${dataId}_clear`,
       "data-test-id": `${dataId}_clear`

package/es/setup/header/Search/__tests__/__snapshots__/Search.spec.js.snap

@@ -3,12 +3,12 @@
 exports[`Search rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  "
+    class="container"
     data-id="search_search"
     data-test-id="search_search"
   >
     <input
-      class="  basic borderColor_default  input"
+      class="basic borderColor_default input"
       data-id="textBox"
       data-selector-id="textBox"
       data-test-id="textBox"

package/es/setup/header/Views/Views.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./Views.module.css";
 import { Icon } from '@zohodesk/icons';
 export default class Views extends React.Component {
@@ -18,16 +19,16 @@ export default class Views extends React.Component {
       onGridClick
     } = this.props;
     return /*#__PURE__*/React.createElement("span", {
-      className: style.container
+      className: cn(style.container)
     }, /*#__PURE__*/React.createElement("span", {
-      className: `${style.icon} ${style.first} ${isList ? style.active : ''}`,
+      className: cn(`${style.icon} ${style.first} ${isList ? style.active : ''}`),
       "data-title": !isList ? listTitle : null,
       onClick: onListClick
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-list22",
       size: "10"
     })), /*#__PURE__*/React.createElement("span", {
-      className: `${style.icon} ${style.last}  ${isGrid ? style.active : ''}`,
+      className: cn(`${style.icon} ${style.last}  ${isGrid ? style.active : ''}`),
       "data-title": !isGrid ? gridTitle : null,
       onClick: onGridClick
     }, /*#__PURE__*/React.createElement(Icon, {

package/es/setup/header/Views/__tests__/__snapshots__/Views.spec.js.snap

@@ -10,7 +10,7 @@ exports[`Views rendering the defult props 1`] = `
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-list22    "
+        class="zd_font_icons basic icon-list22"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"
@@ -18,12 +18,12 @@ exports[`Views rendering the defult props 1`] = `
       />
     </span>
     <span
-      class="icon last  "
+      class="icon last"
       data-title="Grid View"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-grid    "
+        class="zd_font_icons basic icon-grid"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/es/setup/helptips/Description/Description.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./HelpTipsDescription.module.css";
 export default class Description extends React.Component {
   constructor(props) {
@@ -11,7 +12,7 @@ export default class Description extends React.Component {
       text
     } = this.props;
     return /*#__PURE__*/React.createElement("p", {
-      className: style.text
+      className: cn(style.text)
     }, text);
   }
 

package/es/setup/helptips/Link/Link.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./HelpTipsLink.module.css";
 import ExternalLink from "../../../ExternalLink/ExternalLink";
 export default class Link extends React.Component {
@@ -17,7 +18,7 @@ export default class Link extends React.Component {
 
     if (isDangerous) {
       return /*#__PURE__*/React.createElement("div", {
-        className: style.container,
+        className: cn(style.container),
         onClick: onClick,
         dangerouslySetInnerHTML: {
           __html: text

package/es/setup/helptips/ListGroup/ListGroup.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./ListGroup.module.css";
 export default class ListGroup extends React.Component {
   constructor(props) {
@@ -14,18 +15,18 @@ export default class ListGroup extends React.Component {
 
     if (isOrder) {
       return /*#__PURE__*/React.createElement("ol", {
-        className: style.container,
+        className: cn(style.container),
         type: "1"
       }, data.map((text, index) => /*#__PURE__*/React.createElement("li", {
-        className: style.orderData,
+        className: cn(style.orderData),
         key: index
       }, text)));
     }
 
     return /*#__PURE__*/React.createElement("ul", {
-      className: style.container
+      className: cn(style.container)
     }, data.map((text, index) => /*#__PURE__*/React.createElement("li", {
-      className: style.unOrderData,
+      className: cn(style.unOrderData),
       key: index
     }, text)));
   }

package/es/setup/helptips/Title/Title.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./HelpTipsTitle.module.css";
 export default class Title extends React.Component {
   constructor(props) {
@@ -11,7 +12,7 @@ export default class Title extends React.Component {
       text
     } = this.props;
     return /*#__PURE__*/React.createElement("div", {
-      className: style.title
+      className: cn(style.title)
     }, text);
   }
 

package/es/setup/table/Table/__tests__/__snapshots__/Table.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Table rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="flex cover coldir"
+    class="flex fullSize column"
     data-id="table"
     data-selector-id="container"
     data-test-id="table"

package/es/setup/table/TableBody/__tests__/__snapshots__/TableBody.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`TableBody rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="grow basis shrinkOff scrolly"
+    class="flexible basis_zero noShrink scroll_vertical"
     data-id="boxComponent"
     data-selector-id="box"
     data-test-id="boxComponent"

package/es/setup/table/TableData/TableData.js

@@ -24,7 +24,7 @@ export default class TableData extends React.Component {
       flexible: flexible,
       shrink: shrink,
       eleRef: eleRef,
-      className: `${customClass} ${style.container} ${type ? style[type] : ''} ${align ? style[align] ? style[align] : '' : ''}`
+      className: `${style.container} ${type ? style[type] : ''} ${align ? style[align] ? style[align] : '' : ''} ${customClass} `
     }, children);
   }
 

package/es/setup/table/TableData/__tests__/__snapshots__/TableData.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`TableData rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container   shrinkOff"
+    class="noShrink container"
     data-id="tableData"
     data-selector-id="box"
     data-test-id="tableData"

package/es/setup/table/TableHead/TableHead.js

@@ -17,7 +17,7 @@ export default class TableHead extends React.Component {
       dataId
     } = this.props;
     return /*#__PURE__*/React.createElement(Box, {
-      className: `${style.container} ${className} `,
+      className: `${style.container} ${className}`,
       dataId: dataId,
       onMouseEnter: onMouseEnter,
       onMouseLeave: onMouseLeave

package/es/setup/table/TableHead/__tests__/__snapshots__/TableHead.spec.js.snap

@@ -3,13 +3,13 @@
 exports[`TableHead rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container   shrinkOff"
+    class="noShrink container"
     data-id="tableHead"
     data-selector-id="box"
     data-test-id="tableHead"
   >
     <div
-      class="subContainer flex cover rowdir vCenter"
+      class="flex fullSize row alignItems_center subContainer"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"

package/es/setup/table/TableRow/__tests__/__snapshots__/TableRow.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`TableRow rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="container  flex rowdir vCenter"
+    class="flex row alignItems_center container"
     data-id="tableRow"
     data-selector-id="container"
     data-test-id="tableRow"

package/es/setup/table/Text/Text.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Link from "../../../Link/Link";
+import { cn } from "@dot-system/css-utility";
 import style from "./TableText.module.css";
 export default class Text extends React.Component {
   render() {
@@ -19,7 +20,7 @@ export default class Text extends React.Component {
     } = this.props;
     title = title || text;
     let textComponent;
-    let classNameCheck = `${type ? style[type] : ''}  ${style[`${palette}Color`]} ${style[size]} ${className} ${onClick ? style.isClickable : ''}`;
+    let classNameCheck = `${type ? style[type] : ''}  ${style[`${palette}Color`]} ${style[size]} ${onClick ? style.isClickable : ''} ${className}`;
 
     if (url) {
       textComponent = /*#__PURE__*/React.createElement(Link, {
@@ -35,7 +36,7 @@ export default class Text extends React.Component {
         "data-title": title,
         "data-id": dataId,
         "data-test-id": dataId,
-        className: classNameCheck,
+        className: cn(classNameCheck),
         onClick: onClick
       }, text);
     }

package/es/setup/table/Text/__tests__/__snapshots__/Text.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`Text Should render size  - bold 1`] = `
 <DocumentFragment>
   <div
-    class="bold  defaultColor small  "
+    class="bold defaultColor small"
     data-id="text"
     data-test-id="text"
   />
@@ -13,7 +13,7 @@ exports[`Text Should render size  - bold 1`] = `
 exports[`Text Should render size  - heading 1`] = `
 <DocumentFragment>
   <div
-    class="heading  defaultColor small  "
+    class="heading defaultColor small"
     data-id="text"
     data-test-id="text"
   />
@@ -23,7 +23,7 @@ exports[`Text Should render size  - heading 1`] = `
 exports[`Text Should render size  - semiBold 1`] = `
 <DocumentFragment>
   <div
-    class="semiBold  defaultColor small  "
+    class="semiBold defaultColor small"
     data-id="text"
     data-test-id="text"
   />
@@ -33,7 +33,7 @@ exports[`Text Should render size  - semiBold 1`] = `
 exports[`Text rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="  defaultColor small  "
+    class="defaultColor small"
     data-id="text"
     data-test-id="text"
   />
@@ -43,7 +43,7 @@ exports[`Text rendering the defult props 1`] = `
 exports[`Text rendering the url 1`] = `
 <DocumentFragment>
   <a
-    class="container    defaultColor small  "
+    class="container defaultColor small"
     data-id="text"
     data-test-id="text"
     href="www.google.com"

package/es/svg/__tests__/__snapshots__/PlusIcon.spec.js.snap

@@ -4,7 +4,7 @@ exports[`PlusIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="  default svgCenter "
+    class="default svgCenter"
   >
     <svg
       data-id="SVG"

package/es/svg/__tests__/__snapshots__/SnippetIcon.spec.js.snap

@@ -4,7 +4,7 @@ exports[`SnippetIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="  default svgCenter "
+    class="default svgCenter"
   >
     <svg
       data-id="SVG"

package/es/svg/__tests__/__snapshots__/TemplateIcon.spec.js.snap

@@ -4,7 +4,7 @@ exports[`TemplateIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="  default svgCenter "
+    class="default svgCenter"
   >
     <svg
       data-id="SVG"

package/es/version2/AlertClose/__tests__/__snapshots__/AlertClose.spec.js.snap

@@ -3,21 +3,21 @@
 exports[`AlertClose rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class="close   inflex rowdir both"
+    class="inlineFlex row alignItems_center justifyContent_center close"
     data-id="containerComponent"
     data-selector-id="container"
     data-test-id="containerComponent"
     tabindex="0"
   >
     <div
-      class="shrinkOff"
+      class="noShrink"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <i
         aria-hidden="true"
-        class="zd_font_icons basic icon-Cross fbold closeIcon  "
+        class="zd_font_icons basic icon-Cross fbold closeIcon"
         data-id="fontIcon"
         data-selector-id="fontIcon"
         data-test-id="fontIcon"

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -6,6 +6,7 @@ import { propTypes, UI_propTypes, new_propTypes } from "./props/propTypes";
 import AutoClose from "../../actions/AutoClose";
 import AlertIcons from "../alertIcons/AlertIcons";
 import AlertClose from "../AlertClose/AlertClose";
+import { cn } from "@dot-system/css-utility";
 import style from "./GlobalNotification.module.css";
 import { Container, Box } from '@zohodesk/components/es/Layout';
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
@@ -162,10 +163,10 @@ export function GlobalNotificationUI(props) {
   } = customProps;
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: eleRef,
-    className: ` ${style.message} 
+    className: cn(` ${style.message} 
         ${needShadow && shadowCount >= 2 ? shadowCount > 2 ? `${style.stackShadowTwo} ${style.stackShadowOne}` : style.stackShadowOne : ''}
         ${type ? style[type] : ''}
-      `,
+      `),
     "data-id": `show_${type}_message`,
     "data-test-id": `show_${type}_message`,
     tabIndex: 0,
@@ -184,7 +185,7 @@ export function GlobalNotificationUI(props) {
   })), /*#__PURE__*/React.createElement(Box, {
     flexible: true
   }, /*#__PURE__*/React.createElement("div", {
-    className: style.text,
+    className: cn(style.text),
     onClick: onClick,
     "data-id": "infoMessage",
     "data-test-id": "infoMessage",

package/es/version2/GlobalNotification/__tests__/__snapshots__/GlobalNotification.spec.js.snap

@@ -3,23 +3,20 @@
 exports[`GlobalNotification rendering the defult props 1`] = `
 <DocumentFragment>
   <div
-    class=" message 
-        
-        
-      "
+    class="message"
     data-id="show__message"
     data-selector-id="globalNotification"
     data-test-id="show__message"
     tabindex="0"
   >
     <div
-      class="container inflex rowdir vCenter"
+      class="inlineFlex row alignItems_center container"
       data-id="containerComponent"
       data-selector-id="container"
       data-test-id="containerComponent"
     >
       <div
-        class="icon shrinkOff"
+        class="noShrink icon"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -96,7 +93,7 @@ exports[`GlobalNotification rendering the defult props 1`] = `
         </div>
       </div>
       <div
-        class="grow basis shrinkOff"
+        class="flexible basis_zero noShrink"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -108,13 +105,13 @@ exports[`GlobalNotification rendering the defult props 1`] = `
         />
       </div>
       <div
-        class="close shrinkOff"
+        class="noShrink close"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
       >
         <div
-          class="close   inflex rowdir both"
+          class="inlineFlex row alignItems_center justifyContent_center close"
           data-id="close__message"
           data-selector-id="container"
           data-test-id="close__message"
@@ -122,14 +119,14 @@ exports[`GlobalNotification rendering the defult props 1`] = `
           tabindex="0"
         >
           <div
-            class="shrinkOff"
+            class="noShrink"
             data-id="boxComponent"
             data-selector-id="box"
             data-test-id="boxComponent"
           >
             <i
               aria-hidden="true"
-              class="zd_font_icons basic icon-Cross fbold closeIcon  "
+              class="zd_font_icons basic icon-Cross fbold closeIcon"
               data-id="fontIcon"
               data-selector-id="fontIcon"
               data-test-id="fontIcon"

package/es/version2/alertIcons/AlarmAlertIcon.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { AlarmAlertIcon_defaultProps } from "./props/defaultProps";
 import { AlarmAlertIcon_propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./AlertIcons.module.css";
 export default class AlarmAlertIcon extends Component {
   render() {
@@ -11,54 +12,54 @@ export default class AlarmAlertIcon extends Component {
     return /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 100 100",
-      className: type ? `${style[type]}` : ''
+      className: cn(type ? `${style[type]}` : '')
     }, /*#__PURE__*/React.createElement("path", {
-      className: `${style[`info_${variant}`]}`,
+      className: cn(`${style[`info_${variant}`]}`),
       d: "M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
     }), /*#__PURE__*/React.createElement("polygon", {
-      className: style.outer_cls2,
+      className: cn(style.outer_cls2),
       points: "95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
     }), /*#__PURE__*/React.createElement("rect", {
-      className: style.outer_cls2,
+      className: cn(style.outer_cls2),
       x: "10",
       y: "21.46",
       width: "1.16",
       height: "2.18"
     }), /*#__PURE__*/React.createElement("rect", {
-      className: style.outer_cls2,
+      className: cn(style.outer_cls2),
       x: "11.8",
       y: "24.27",
       width: "2.21",
       height: "1.15"
     }), /*#__PURE__*/React.createElement("rect", {
-      className: style.outer_cls2,
+      className: cn(style.outer_cls2),
       x: "10",
       y: "26.05",
       width: "1.16",
       height: "2.18"
     }), /*#__PURE__*/React.createElement("rect", {
-      className: style.outer_cls2,
+      className: cn(style.outer_cls2),
       x: "7.15",
       y: "24.27",
       width: "2.21",
       height: "1.15"
     }), /*#__PURE__*/React.createElement("path", {
-      className: style.outer_cls3,
+      className: cn(style.outer_cls3),
       d: "M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
     }), /*#__PURE__*/React.createElement("ellipse", {
-      className: style.outer_cls4,
+      className: cn(style.outer_cls4),
       cx: "50.21",
       cy: "11.21",
       rx: "1.22",
       ry: "1.21"
     }), /*#__PURE__*/React.createElement("polygon", {
-      className: style.outer_cls4,
+      className: cn(style.outer_cls4),
       points: "59.77 90 61.8 87.28 63.69 90 59.77 90"
     }), /*#__PURE__*/React.createElement("path", {
-      className: style.outer_cls5,
+      className: cn(style.outer_cls5),
       d: "M25.63,50.18s5.71-18.8,14.18-21.65S70.1,42.91,60.19,67.13s-35,10.55-38.08,7S12.21,62.29,25.63,50.18Z"
     }), /*#__PURE__*/React.createElement("path", {
-      className: style.outer_cls6,
+      className: cn(style.outer_cls6),
       d: "M60.2,57.89H49.52a1,1,0,0,1-1-1V48.23a1,1,0,0,1,2,0v7.66H60.2a1,1,0,0,1,0,2ZM50.52,44.08v-.29a1,1,0,0,0-2,0v.29a1,1,0,0,0,2,0Zm23.73.86a1,1,0,0,0,.14-1.4l-5.13-6.36a1,1,0,0,0-1.56,1.25l5.14,6.36a1,1,0,0,0,.78.37A1,1,0,0,0,74.25,44.94ZM51,79.68a22.84,22.84,0,0,0-.47-45.61l0-2.68a1,1,0,0,0-1-1h-5a1.38,1.38,0,0,1,0-2.76H54A1.4,1.4,0,0,1,55.35,29,1.35,1.35,0,0,1,55,30a1.31,1.31,0,0,1-.95.4h-.54a1,1,0,0,0,0,2H54A3.31,3.31,0,0,0,57.34,29,3.38,3.38,0,0,0,54,25.64H44.43a3.38,3.38,0,0,0,0,6.76h4.06l0,2.66a1,1,0,0,0,1,1A20.84,20.84,0,1,1,28.68,56.89a20.94,20.94,0,0,1,15-20A1,1,0,1,0,43.13,35a22.84,22.84,0,0,0-9.25,38.57,22.61,22.61,0,0,0,15.62,6.2C50,79.73,50.48,79.71,51,79.68Z"
     }));
   }

package/es/version2/alertIcons/AlertIcons.js

@@ -7,6 +7,7 @@ import WarningAlertIcon from "./WarningAlertIcon";
 import InfoAlertIcon from "./InfoAlertIcon";
 import NotificationAlertIcon from "./NotificationAlertIcon";
 import AlarmAlertIcon from "./AlarmAlertIcon";
+import { cn } from "@dot-system/css-utility";
 import style from "./AlertIcons.module.css";
 let alertIconsObject = {
   success: {
@@ -45,7 +46,7 @@ export default class AlertIcons extends Component {
       AlertIcon = DangerAlertIcon
     } = alertIconsObject[type] || {};
     return /*#__PURE__*/React.createElement("div", {
-      className: style.iconContainer,
+      className: cn(style.iconContainer),
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(AlertIcon, {
       variant: variant,

package/es/version2/alertIcons/DangerAlertIcon.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { DangerAlertIcon_defaultProps } from "./props/defaultProps";
 import { DangerAlertIcon_propTypes } from "./props/propTypes";
+import { cn } from "@dot-system/css-utility";
 import style from "./AlertIcons.module.css";
 export default class DangerAlertIcon extends Component {
   render() {
@@ -11,54 +12,54 @@ export default class DangerAlertIcon extends Component {
     return /*#__PURE__*/React.createElement("svg", {
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 100 100",
-      className: type ? `${style[type]}` : ''
+      className: cn(type ? `${style[type]}` : '')
     }, /*#__PURE__*/React.createElement("path", {
-      className: `${style[`danger_${variant}`]}`,
+      className: cn(`${style[`danger_${variant}`]}`),
       d: "M34.89,23.86s27.19-17.79,41-12.44S99,61.81,60.74,82,5.16,58.27,5,50.48C4.87,42.94,5,25,34.89,23.86Z"
     }), /*#__PURE__*/React.createElement("polygon", {
-      className: style.outer_cls2,
+      className: cn(style.outer_cls2),
       points: "95 49.42 94.18 48.61 92.98 49.79 91.79 48.61 90.97 49.42 92.16 50.6 90.97 51.78 91.79 52.59 92.98 51.41 94.18 52.59 95 51.78 93.81 50.6 95 49.42"
     }), /*#__PURE__*/React.createElement("rect", {
-      className: style.outer_cls2,
+      className: cn(style.outer_cls2),
       x: "10",
       y: "21.46",
       width: "1.16",
       height: "2.18"
     }), /*#__PURE__*/React.createElement("rect", {
-      className: style.outer_cls2,
+      className: cn(style.outer_cls2),
       x: "11.8",
       y: "24.27",
       width: "2.21",
       height: "1.15"
     }), /*#__PURE__*/React.createElement("rect", {
-      className: style.outer_cls2,
+      className: cn(style.outer_cls2),
       x: "10",
       y: "26.05",
       width: "1.16",
       height: "2.18"
     }), /*#__PURE__*/React.createElement("rect", {
-      className: style.outer_cls2,
+      className: cn(style.outer_cls2),
       x: "7.15",
       y: "24.27",
       width: "2.21",
       height: "1.15"
     }), /*#__PURE__*/React.createElement("path", {
-      className: style.outer_cls3,
+      className: cn(style.outer_cls3),
       d: "M11.8,82.6a2.76,2.76,0,1,1,2.8-2.76A2.78,2.78,0,0,1,11.8,82.6Zm0-4.37a1.61,1.61,0,1,0,1.63,1.61A1.62,1.62,0,0,0,11.8,78.23Z"
     }), /*#__PURE__*/React.createElement("ellipse", {
-      className: style.outer_cls4,
+      className: cn(style.outer_cls4),
       cx: "50.21",
       cy: "11.21",
       rx: "1.22",
       ry: "1.21"
     }), /*#__PURE__*/React.createElement("polygon", {
-      className: style.outer_cls4,
+      className: cn(style.outer_cls4),
       points: "59.77 90 61.8 87.28 63.69 90 59.77 90"
     }), /*#__PURE__*/React.createElement("path", {
-      className: style.outer_cls5,
+      className: cn(style.outer_cls5),
       d: "M52.28,43.16s-13.79-9-20.78-6.31S19.75,62.42,39.17,72.67s28.2-12.05,28.28-16S67.45,43.72,52.28,43.16Z"
     }), /*#__PURE__*/React.createElement("path", {
-      className: style.outer_cls6,
+      className: cn(style.outer_cls6),
       d: "M61.28,46.39a1.15,1.15,0,1,1-1.15-1.13A1.13,1.13,0,0,1,61.28,46.39ZM71.63,69.28a5.37,5.37,0,0,0,0-5.4L63,48.91a1,1,0,0,0-1.74,1l8.65,15A3.39,3.39,0,0,1,67,70H30.05a3.39,3.39,0,0,1-2.94-5.09l18.46-32a3.39,3.39,0,0,1,5.87,0l4.74,8.2H48a2.54,2.54,0,0,0-1.85.8,2.57,2.57,0,0,0-.69,1.91l.92,12.67a2.54,2.54,0,0,0,5.08,0l.76-9.85a1,1,0,0,0-.92-1.08,1,1,0,0,0-1.07.92l-.76,9.87a.55.55,0,0,1-1.1,0L47.46,43.7a.51.51,0,0,1,.14-.41.58.58,0,0,1,.4-.17h9.91a1,1,0,0,0,.86-1.5l-5.6-9.7a5.39,5.39,0,0,0-9.33,0l-18.46,32A5.39,5.39,0,0,0,30.05,72H67A5.35,5.35,0,0,0,71.63,69.28ZM49,61.34a2.61,2.61,0,1,0,2.6,2.6A2.6,2.6,0,0,0,49,61.34Z"
     }));
   }