@zohodesk/svg 1.0.0-beta.35

package/src/svg/deprecated/Themes/DarkEmptyStates.module.css

@@ -0,0 +1,37 @@
+[data-theme='dark'] {
+  /* default palette */
+  --zdt_svg_default_primary_fill: var(--zdt_cta_primary_fill);
+  --zdt_svg_default_primary_stroke: var(--zdt_cta_primary_stroke);
+  --zdt_svg_default_secondary_fill: var(--zdt_cta_secondary_fill);
+  --zdt_svg_default_secondary_plainfill: var(--zdt_cta_secondary_plainfill);
+  --zdt_svg_default_plus: #479dff;
+  --zdt_svg_default_cross: #5cc1a5;
+  --zdt_svg_default_medium_circle: #ff6b6b;
+  --zdt_svg_default_tiny_circle: #4ac064;
+  --zdt_svg_default_small_circle: #ff6b6b;
+  --zdt_svg_default_circle_fill: #fff;
+
+  /* dark palette */
+  --zdt_svg_dark_primary_fill: var(--zdt_cta_primary_dark_fill);
+  --zdt_svg_dark_primary_stroke: var(--zdt_cta_primary_dark_stroke);
+  --zdt_svg_dark_secondary_fill: var(--zdt_cta_secondary_dark_fill);
+  --zdt_svg_dark_secondary_plainfill: var(--zdt_cta_secondary_dark_plainfill);
+  --zdt_svg_dark_plus: #479dff;
+  --zdt_svg_dark_cross: #5cc1a5;
+  --zdt_svg_dark_medium_circle: #ff6b6b;
+  --zdt_svg_dark_tiny_circle: #4ac064;
+  --zdt_svg_dark_small_circle: #ff6b6b;
+  --zdt_svg_dark_circle_fill: #fff;
+
+  /* danger palette */
+  --zdt_svg_danger_primary_fill: #ff6f00;
+  --zdt_svg_danger_primary_stroke: #479dff;
+  --zdt_svg_danger_secondary_fill: #334b68;
+  --zdt_svg_danger_secondary_plainfill: #334b68;
+  --zdt_svg_danger_plus: #479dff;
+  --zdt_svg_danger_cross: #5cc1a5;
+  --zdt_svg_danger_medium_circle: #ff6b6b;
+  --zdt_svg_danger_tiny_circle: #4ac064;
+  --zdt_svg_danger_small_circle: #ff6b6b;
+  --zdt_svg_danger_circle_fill: #fff;
+}

package/src/svg/deprecated/Themes/DefaultEmptyStates.module.css

@@ -0,0 +1,37 @@
+[data-theme='default'] {
+  /* default palette */
+  --zdt_svg_default_primary_fill: var(--zdt_cta_primary_fill);
+  --zdt_svg_default_primary_stroke: var(--zdt_cta_primary_stroke);
+  --zdt_svg_default_secondary_fill: var(--zdt_cta_secondary_fill);
+  --zdt_svg_default_secondary_plainfill: var(--zdt_cta_secondary_plainfill);
+  --zdt_svg_default_plus: #3f70b7;
+  --zdt_svg_default_cross: #5cc1a5;
+  --zdt_svg_default_medium_circle: #e56471;
+  --zdt_svg_default_tiny_circle: #5cc1a5;
+  --zdt_svg_default_small_circle: #010101;
+  --zdt_svg_default_circle_fill: #fff;
+
+  /* dark palette */
+  --zdt_svg_dark_primary_fill: var(--zdt_cta_primary_dark_fill);
+  --zdt_svg_dark_primary_stroke: var(--zdt_cta_primary_dark_stroke);
+  --zdt_svg_dark_secondary_fill: var(--zdt_cta_secondary_dark_fill);
+  --zdt_svg_dark_secondary_plainfill: var(--zdt_cta_secondary_dark_plainfill);
+  --zdt_svg_dark_plus: #479dff;
+  --zdt_svg_dark_cross: #5cc1a5;
+  --zdt_svg_dark_medium_circle: #e56471;
+  --zdt_svg_dark_tiny_circle: #5cc1a5;
+  --zdt_svg_dark_small_circle: #010101;
+  --zdt_svg_dark_circle_fill: #fff;
+
+  /* danger palette */
+  --zdt_svg_danger_primary_fill: #ff6f00;
+  --zdt_svg_danger_primary_stroke: #010101;
+  --zdt_svg_danger_secondary_fill: rgba(63, 112, 183, 0.25);
+  --zdt_svg_danger_secondary_plainfill: #3f70b7;
+  --zdt_svg_danger_plus: #3f70b7;
+  --zdt_svg_danger_cross: #5cc1a5;
+  --zdt_svg_danger_medium_circle: #e56471;
+  --zdt_svg_danger_tiny_circle: #5cc1a5;
+  --zdt_svg_danger_small_circle: #010101;
+  --zdt_svg_danger_circle_fill: #fff;
+}

package/src/svg/deprecated/Themes/palette/darkCTAPalette.module.css

@@ -0,0 +1,51 @@
+/* svg package - multiple palette core variables */
+[data-theme='dark'][data-palette='blue'] {
+    --zdt_cta_primary_fill: #828994;
+    --zdt_cta_primary_stroke: #479dff;
+    --zdt_cta_secondary_fill: #334b68;
+    --zdt_cta_secondary_plainfill: #334b68;
+    --zdt_cta_primary_dark_fill: #828994;
+    --zdt_cta_primary_dark_stroke: #479dff;
+    --zdt_cta_secondary_dark_fill: #334b68;
+    --zdt_cta_secondary_dark_plainfill: #334b68;
+}
+[data-theme='dark'][data-palette='green'] {
+    --zdt_cta_primary_fill: #45a159;
+    --zdt_cta_primary_stroke: #0e7c1c;
+    --zdt_cta_secondary_fill: rgba(69, 161, 89, 0.25);
+    --zdt_cta_secondary_plainfill: #45a159;
+    --zdt_cta_primary_dark_fill: #45a159;
+    --zdt_cta_primary_dark_stroke: #0e7526;
+    --zdt_cta_secondary_dark_fill: rgba(69, 161, 89, 0.25);
+    --zdt_cta_secondary_dark_plainfill: #45a159;
+}
+[data-theme='dark'][data-palette='red'] {
+    --zdt_cta_primary_fill: #e94f4f;
+    --zdt_cta_primary_stroke: #a81111;
+    --zdt_cta_secondary_fill: rgba(233, 79, 79, 0.25);
+    --zdt_cta_secondary_plainfill: #e94f4f;
+    --zdt_cta_primary_dark_fill: #e94f4f;
+    --zdt_cta_primary_dark_stroke: #a81111;
+    --zdt_cta_secondary_dark_fill: rgba(233, 79, 79, 0.25);
+    --zdt_cta_secondary_dark_plainfill: #e94f4f;
+}
+[data-theme='dark'][data-palette='orange'] {
+    --zdt_cta_primary_fill: #ff801f;
+    --zdt_cta_primary_stroke: #a85100;
+    --zdt_cta_secondary_fill: rgba(255, 128, 31, 0.25);
+    --zdt_cta_secondary_plainfill: #ff801f;
+    --zdt_cta_primary_dark_fill: #ff801f;
+    --zdt_cta_primary_dark_stroke: #a85100;
+    --zdt_cta_secondary_dark_fill: rgba(255, 128, 31, 0.25);
+    --zdt_cta_secondary_dark_plainfill: #ff801f;
+}
+[data-theme='dark'][data-palette='yellow'] {
+    --zdt_cta_primary_fill: #d79835;
+    --zdt_cta_primary_stroke: #9b6808;
+    --zdt_cta_secondary_fill: rgba(215, 152, 53, 0.25);
+    --zdt_cta_secondary_plainfill: #d79835;
+    --zdt_cta_primary_dark_fill: #d79835;
+    --zdt_cta_primary_dark_stroke: #9b6808;
+    --zdt_cta_secondary_dark_fill: rgba(215, 152, 53, 0.25);
+    --zdt_cta_secondary_dark_plainfill: #d79835;
+}

package/src/svg/deprecated/Themes/palette/defaultCTAPalette.module.css

@@ -0,0 +1,51 @@
+/* svg package - multiple palette core variables */
+[data-theme='default'][data-palette='blue'] {
+    --zdt_cta_primary_fill: #3f70b7;
+    --zdt_cta_primary_stroke: #010101;
+    --zdt_cta_secondary_fill: rgba(63, 112, 183, 0.25);
+    --zdt_cta_secondary_plainfill: #3f70b7;
+    --zdt_cta_primary_dark_fill: #a6add7;
+    --zdt_cta_primary_dark_stroke: #fff;
+    --zdt_cta_secondary_dark_fill: #3f70b7;
+    --zdt_cta_secondary_dark_plainfill: #3f70b7;
+}
+[data-theme='default'][data-palette='green'] {
+    --zdt_cta_primary_fill: #26a942;
+    --zdt_cta_primary_stroke: #010101;
+    --zdt_cta_secondary_fill: rgba(38, 169, 66, 0.25);
+    --zdt_cta_secondary_plainfill: #26a942;
+    --zdt_cta_primary_dark_fill: #26a942;
+    --zdt_cta_primary_dark_stroke: #fff;
+    --zdt_cta_secondary_dark_fill: rgba(38, 169, 66, 0.25);
+    --zdt_cta_secondary_dark_plainfill: #26a942;
+}
+[data-theme='default'][data-palette='red'] {
+    --zdt_cta_primary_fill: #de3535;
+    --zdt_cta_primary_stroke: #010101;
+    --zdt_cta_secondary_fill: rgba(222, 53, 53, 0.25);
+    --zdt_cta_secondary_plainfill: #de3535;
+    --zdt_cta_primary_dark_fill: #de3535;
+    --zdt_cta_primary_dark_stroke: #fff;
+    --zdt_cta_secondary_dark_fill: rgba(222, 53, 53, 0.25);
+    --zdt_cta_secondary_dark_plainfill: #de3535;
+}
+[data-theme='default'][data-palette='orange'] {
+    --zdt_cta_primary_fill: #e57717;
+    --zdt_cta_primary_stroke: #010101;
+    --zdt_cta_secondary_fill: rgba(229, 119, 23, 0.25);
+    --zdt_cta_secondary_plainfill: #e57717;
+    --zdt_cta_primary_dark_fill: #e57717;
+    --zdt_cta_primary_dark_stroke: #fff;
+    --zdt_cta_secondary_dark_fill: rgba(229, 119, 23, 0.25);
+    --zdt_cta_secondary_dark_plainfill: #e57717;
+}
+[data-theme='default'][data-palette='yellow'] {
+    --zdt_cta_primary_fill: #e8b923;
+    --zdt_cta_primary_stroke: #010101;
+    --zdt_cta_secondary_fill: rgba(232, 185, 35, 0.25);
+    --zdt_cta_secondary_plainfill: #e8b923;
+    --zdt_cta_primary_dark_fill: #e8b923;
+    --zdt_cta_primary_dark_stroke: #fff;
+    --zdt_cta_secondary_dark_fill: rgba(232, 185, 35, 0.25);
+    --zdt_cta_secondary_dark_plainfill: #e8b923;
+}

package/src/svg/docs/SVG__common.docs.js

@@ -0,0 +1,47 @@
+import React from 'react';
+import Loader from '../Loader';
+
+export default class SVG__common extends React.Component {
+  render() {
+    let boxStyle = {
+      minWidth: '15%',
+      border: '1px solid #dcdcdc',
+      padding: '5px',
+      margin: '5px',
+      flex: '1',
+      maxWidth: '25%',
+      justifyContent: 'space-between'
+    };
+    let textStyle = {
+      textAlign: 'center',
+      padding: '10px 0',
+      background: ' #f9f9f9',
+      marginTop: '10px',
+      color: '#000'
+    };
+    return (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexWrap: 'wrap',
+          height: '100%'
+        }}
+      >
+        <div style={boxStyle}>
+          <div style={{ height: '40px', width: '40px', margin: 'auto' }}>
+            <Loader />
+          </div>
+          <div style={textStyle}>Loader</div>
+        </div>
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  SVG__common.docs = {
+    componentGroup: 'SVG'
+  };
+}

package/src/svg/docs/SVG__default.docs.js

@@ -0,0 +1,233 @@
+import React from 'react';
+import EmptyActivity from '../EmptyActivity';
+import EmptyAccounts from '../EmptyAccounts';
+import EmptyAgent from '../EmptyAgent';
+import EmptyArchived from '../EmptyArchived';
+import EmptyBusinessHoliday from '../EmptyBusinessHoliday';
+import EmptyBusinessHour from '../EmptyBusinessHour';
+import EmptyBlueprint from '../EmptyBlueprint';
+import EmptyFrame from '../EmptyFrame';
+import EmptyContact from '../EmptyContact';
+import EmptyDashboard from '../EmptyDashboard';
+import EmptyImportHistory from '../EmptyImportHistory';
+import EmptyInvoice from '../EmptyInvoice';
+import EmptyProducts from '../EmptyProducts';
+import EmptyRecycleBin from '../EmptyRecycleBin';
+import EmptyReports from '../EmptyReports';
+import EmptyRoles from '../EmptyRoles';
+import EmptySearch from '../EmptySearch';
+import EmptyTag from '../EmptyTag';
+import EmptyTask from '../EmptyTask';
+import EmptyTicket from '../EmptyTicket';
+import EmptyAttach from '../EmptyAttach';
+import EmptyNetwork from '../EmptyNetwork';
+import EmptyHappiness from '../EmptyHappiness';
+import EmptyConversation from '../EmptyConversation';
+import EmptyNotification from '../EmptyNotification';
+import EmptyTimeEntry from '../EmptyTimeEntry';
+import EmptyTeams from '../EmptyTeams';
+import EmptyTopic from '../EmptyTopic';
+import FailureLog from '../FailureLog';
+import EmptyActiveCalls from '../EmptyActiveCalls';
+import EmptyCallHistory from '../EmptyCallHistory';
+import EmptyHistory from '../EmptyHistory';
+import EmptyFromAddress from '../EmptyFromAddress';
+import EmptyWebhook from '../EmptyWebhook';
+import EmptyTemplate from '../EmptyTemplate';
+import EmptySkills from '../EmptySkills';
+import EmptySnippet from '../EmptySnippet';
+import EmptyCustomDomain from '../EmptyCustomDomain';
+import EmptyCrm from '../EmptyCrm';
+import EmptyFollowers from '../EmptyFollowers';
+import EmptyFeed from '../EmptyFeed';
+import NotImpossible from '../NotImpossible';
+import EmptySchedule from '../EmptySchedule';
+import EmptyColumn from '../EmptyColumn';
+import EmptyApproval from '../EmptyApproval';
+import EmptyCollision from '../EmptyCollision';
+import EmptyCrmNotes from '../EmptyCrmNotes';
+import EmptyCrmPotential from '../EmptyCrmPotential';
+import EmptyTimeline from '../EmptyTimeline';
+import EmptyReply from '../EmptyReply';
+import EmptyContract from '../EmptyContract';
+import EmptySla from '../EmptySla';
+import EmptyAgentQueue from '../EmptyAgentQueue';
+import EmptyDepartment from '../EmptyDepartment';
+import ZiaAnamoly from '../ZiaAnamoly';
+import Predictor from '../Predictor';
+import Extractor from '../Extractor';
+import EmptyError from '../EmptyError'
+import Import from '../Import';
+import './SVGdocstyle.module.css';
+
+export default class SVG__default extends React.Component {
+  render() {
+    let defaultPalette = {
+      minWidth: '45%',
+      border: '1px solid #dcdcdc',
+      padding: '5px',
+      margin: '5px',
+      flex: '1',
+      maxWidth: '25%',
+      justifyContent: 'space-between'
+    };
+    let textStyle = {
+      textAlign: 'center',
+      padding: '10px 0',
+      background: ' #f9f9f9',
+      marginTop: '10px',
+      color: '#000'
+    };
+    let darkPalette = {
+      backgroundColor: '#2c334d',
+      minWidth: '45%',
+      border: '1px solid #dcdcdc',
+      padding: '5px',
+      margin: '5px',
+      flex: '1',
+      maxWidth: '25%',
+      justifyContent: 'space-between'
+    };
+    let allSvg = {
+      EmptyAccountsDefaultPalette: <EmptyAccounts />,
+      EmptyAccountsDarkPalette: <EmptyAccounts palette='dark' />,
+      EmptyActiveCallsDefaultPalette: <EmptyActiveCalls />,
+      EmptyActiveCallsDarkPalette: <EmptyActiveCalls palette='dark' />,
+      EmptyActivityDefaultPalette: <EmptyActivity />,
+      EmptyActivityDarkPalette: <EmptyActivity palette='dark' />,
+      EmptyAgentDefaultPalette: <EmptyAgent />,
+      EmptyAgentDarkPalette: <EmptyAgent palette='dark' />,
+      EmptyApprovalDefaultPalette: <EmptyApproval />,
+      EmptyApprovalDarkPalette: <EmptyApproval palette='dark' />,
+      EmptyArchivedDefaultPalette: <EmptyArchived />,
+      EmptyArchivedDarkPalette: <EmptyArchived palette='dark' />,
+      EmptyAttachDefaultPalette: <EmptyAttach />,
+      EmptyAttachDarkPalette: <EmptyAttach palette='dark' />,
+      EmptyCallHistoryDefaultPalette: <EmptyCallHistory />,
+      EmptyCallHistoryDarkPalette: <EmptyCallHistory palette='dark' />,
+      EmptyCollisionDefaultPalette: <EmptyCollision />,
+      EmptyCollisionDarkPalette: <EmptyCollision palette='dark' />,
+      EmptyColumnDefaultPalette: <EmptyColumn />,
+      EmptyColumnDarkPalette: <EmptyColumn palette='dark' />,
+      EmptyContactDefaultPalette: <EmptyContact />,
+      EmptyContactDarkPalette: <EmptyContact palette='dark' />,
+      EmptyConversationDefaultPalette: <EmptyConversation />,
+      EmptyConversationDarkPalette: <EmptyConversation palette='dark' />,
+      EmptyCrmDefaultPalette: <EmptyCrm />,
+      EmptyCrmDarkPalette: <EmptyCrm palette='dark' />,
+      EmptyCrmNotesDefaultPalette: <EmptyCrmNotes />,
+      EmptyCrmNotesDarkPalette: <EmptyCrmNotes palette='dark' />,
+      EmptyCrmPotentialDefaultPalette: <EmptyCrmPotential />,
+      EmptyCrmPotentialDarkPalette: <EmptyCrmPotential palette='dark' />,
+      EmptyDashboardDefaultPalette: <EmptyDashboard />,
+      EmptyDashboardDarkPalette: <EmptyDashboard palette='dark' />,
+      EmptyInvoiceDefaultPalette: <EmptyInvoice />,
+      EmptyInvoiceDarkPalette: <EmptyInvoice palette='dark' />,
+      EmptyProductsDefaultPalette: <EmptyProducts />,
+      EmptyProductsDarkPalette: <EmptyProducts palette='dark' />,
+      EmptyReportsDefaultPalette: <EmptyReports />,
+      EmptyReportsDarkPalette: <EmptyReports palette='dark' />,
+      EmptySearchDefaultPalette: <EmptySearch />,
+      EmptySearchDarkPalette: <EmptySearch palette='dark' />,
+      EmptyTagDefaultPalette: <EmptyTag />,
+      EmptyTagDarkPalette: <EmptyTag palette='dark' />,
+      EmptyTaskDefaultPalette: <EmptyTask />,
+      EmptyTaskDarkPalette: <EmptyTask palette='dark' />,
+      EmptyTicketDefaultPalette: <EmptyTicket />,
+      EmptyTicketDarkPalette: <EmptyTicket palette='dark' />,
+      EmptyHappinessDefaultPalette: <EmptyHappiness />,
+      EmptyHappinessDarkPalette: <EmptyHappiness palette='dark' />,
+      EmptyNotificationDefaultPalette: <EmptyNotification />,
+      EmptyNotificationDarkPalette: <EmptyNotification palette='dark' />,
+      EmptyTimeEntryDefaultPalette: <EmptyTimeEntry />,
+      EmptyTimeEntryDarkPalette: <EmptyTimeEntry palette='dark' />,
+      EmptyTeamsDefaultPalette: <EmptyTeams />,
+      EmptyTeamsDarkPalette: <EmptyTeams palette='dark' />,
+      EmptyTopicDefaultPalette: <EmptyTopic />,
+      EmptyTopicDarkPalette: <EmptyTopic palette='dark' />,
+      EmptySnippetDefaultPalette: <EmptySnippet />,
+      EmptySnippetDarkPalette: <EmptySnippet palette='dark' />,
+      EmptyFollowersDefaultPalette: <EmptyFollowers />,
+      EmptyFollowersDarkPalette: <EmptyFollowers palette='dark' />,
+      EmptyFeedDefaultPalette: <EmptyFeed />,
+      EmptyFeedDarkPalette: <EmptyFeed palette='dark' />,
+      NotImpossibleDefaultPalette: <NotImpossible />,
+      NotImpossibleDarkPalette: <NotImpossible palette='dark' />,
+      EmptyScheduleDefaultPalette: <EmptySchedule />,
+      EmptyScheduleDarkPalette: <EmptySchedule palette='dark' />,
+      EmptyHistoryDefaultPalette: <EmptyHistory />,
+      EmptyHistoryDarkPalette: <EmptyHistory palette='dark' />,
+      EmptyTimelineDefaultPalette: <EmptyTimeline />,
+      EmptyTimelineDarkPalette: <EmptyTimeline palette='dark' />,
+      EmptyTemplateDefaultPalette: <EmptyTemplate />,
+      EmptyTemplateDarkPalette: <EmptyTemplate palette='dark' />,
+      EmptyBlueprintDefaultPalette: <EmptyBlueprint />,
+      EmptyBlueprintDarkPalette: <EmptyBlueprint palette='dark' />,
+      EmptyContractDefaultPalette: <EmptyContract />,
+      EmptyContractDarkPalette: <EmptyContract palette='dark' />,
+      EmptySlaDefaultPalette: <EmptySla />,
+      EmptySlaDarkPalette: <EmptySla palette='dark' />,
+      EmptyReplyDefaultPalette: <EmptyReply />,
+      EmptyReplyDarkPalette: <EmptyReply palette='dark' />,
+      EmptyAgentQueueDefaultPalette: <EmptyAgentQueue />,
+      EmptyAgentQueueDarkPalette: <EmptyAgentQueue palette='dark' />,
+      EmptySkillsDefaultPalette: <EmptySkills />,
+      EmptySkillsDarkPalette: <EmptySkills palette='dark' />,
+      EmptyDepartmentDefaultPalette: <EmptyDepartment />,
+      EmptyDepartmentDarkPalette: <EmptyDepartment palette='dark' />,
+      ZiaAnamolyDefaultPalette: <ZiaAnamoly />,
+      ZiaAnamolyDarkPalette: <ZiaAnamoly palette='dark' />,
+      PredictorDefaultPalette: <Predictor />,
+      PredictorDarkPalette: <Predictor palette='dark' />,
+      ExtractorDefaultPalette: <Extractor />,
+      ExtractorDarkPalette: <Extractor palette='dark' />,
+      ImportDefaultPalette: <Import />,
+      ImportDarkPalette: <Import palette='dark' />,
+      EmptyFrameDefaultPalette: <EmptyFrame />,
+      EmptyFrameDarkPalette: <EmptyFrame palette='dark' />,
+      EmptyFrameDangerPalette: <EmptyFrame palette="danger" />,
+      EmptyErrorDangerPalette: <EmptyError />,
+      EmptyErrorDarkPalette: <EmptyError palette='dark' />,
+      EmptyBusinessHoliday: <EmptyBusinessHoliday />,
+      EmptyBusinessHour: <EmptyBusinessHour />,
+      EmptyImportHistory: <EmptyImportHistory />,
+      EmptyRecycleBin: <EmptyRecycleBin />,
+      EmptyRoles: <EmptyRoles />,
+      EmptyNetwork: <EmptyNetwork />,
+      FailureLog: <FailureLog />,
+      EmptyFromAddress: <EmptyFromAddress />,
+      EmptyWebhook: <EmptyWebhook />,
+      EmptyCustomDomain: <EmptyCustomDomain />
+    };
+
+    return (
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          justifyContent: 'center',
+          flexWrap: 'wrap',
+          maxWidth: '600px',
+          margin: '0 auto'
+        }}
+      >
+        {Object.keys(allSvg).map(item => {
+          let filterDarkPalettes = item.endsWith("DarkPalette");
+          return (
+            <div style={filterDarkPalettes ? darkPalette : defaultPalette}
+            >
+              {allSvg[item]}
+              <div style={textStyle}>{item}</div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  SVG__default.docs = {
+    componentGroup: 'SVG'
+  };
+}

package/src/svg/docs/SVG__errorstate.docs.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import ErrorInconvenience from '../ErrorInconvenience';
+import ErrorOopsSomethingMiss from '../ErrorOopsSomethingMiss';
+import ErrorUnableToProcessRequest from '../ErrorUnableToProcessRequest';
+import ErrorUnauthorizedLogin from '../ErrorUnauthorizedLogin';
+import ErrorUrlNotFound from '../ErrorUrlNotFound';
+import ErrorWillBeRightBack from '../ErrorWillBeRightBack';
+import './SVGdocstyle.module.css';
+
+export default class SVG__errorstate extends React.Component {
+  render() {
+    let boxStyle = {
+      minWidth: '65%',
+      border: '1px solid #dcdcdc',
+      padding: '5px',
+      margin: '5px',
+      flex: '1',
+      maxWidth: '25%',
+      justifyContent: 'space-between'
+    };
+    let textStyle = {
+      textAlign: 'center',
+      padding: '10px 0',
+      background: ' #f9f9f9',
+      marginTop: '10px',
+      color: '#000'
+    };
+
+    return (
+      <div style={{paddingBottom: '50px'}}>
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexWrap: 'wrap',
+            maxWidth: '600px',
+            margin: '0 auto'
+          }}
+        >
+          <div style={boxStyle}>
+            <ErrorInconvenience />
+            <div style={textStyle}>Inconvenience</div>
+          </div>
+          <div style={boxStyle}>
+            <ErrorOopsSomethingMiss />
+            <div style={textStyle}>OopsSomethingMiss</div>
+          </div>
+          <div style={boxStyle}>
+            <ErrorUnableToProcessRequest />
+            <div style={textStyle}>UnableToProcessRequest</div>
+          </div>
+          <div style={boxStyle}>
+            <ErrorUnauthorizedLogin />
+            <div style={textStyle}>UnathorizedLogin</div>
+          </div>
+          <div style={boxStyle}>
+            <ErrorUrlNotFound />
+            <div style={textStyle}>UrlNotFound</div>
+          </div>
+          <div style={boxStyle}>
+            <ErrorWillBeRightBack />
+            <div style={textStyle}>WillBeRightBack</div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+if (__DOCS__) {
+  SVG__errorstate.docs = {
+    componentGroup: 'SVG'
+  };
+}

package/src/svg/docs/SVGdocstyle.module.css

@@ -0,0 +1,8 @@
+[data-mode='default'] {
+  background: #fff;
+  color: #000;
+}
+[data-mode='dark'] {
+  background: #232B38;
+  color: #E2E4E6;
+}

package/src/svg/images/EmptyBusinessHoliday.svg

@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 181.9 139.3" style="enable-background:new 0 0 181.9 139.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:3.000000e-02;fill:#1E2633;enable-background:new    ;}
+	.st1{fill:#EDE353;}
+	.st2{fill:#CED5DE;}
+	.st3{opacity:0.5;fill:#FFFFFF;enable-background:new    ;}
+	.st4{fill:#788190;}
+	.st5{fill:#F1F2F4;}
+</style>
+<title>business1</title>
+<g id="Layer_2_1_">
+	<g id="Layer_1-2">
+		<path class="st0" d="M181.9,68.8c0,38-30.8,68.8-68.8,68.8s-68.8-30.8-68.8-68.8S75.1,0,113.1,0c0,0,0,0,0,0
+			c37.9-0.1,68.7,30.6,68.8,68.5C181.9,68.6,181.9,68.7,181.9,68.8z"/>
+		<circle class="st0" cx="42.7" cy="56.4" r="42.7"/>
+		<path class="st0" d="M51.5,123.6c0,0.6,0,1.2-0.1,1.7c-1,8.6-8.7,14.7-17.3,13.8s-14.7-8.7-13.8-17.3s8.7-14.7,17.3-13.8
+			C45.6,109,51.6,115.7,51.5,123.6z"/>
+		<path class="st1" d="M29.5,64.8c-0.1-0.1-0.2-0.3-0.3-0.5L29.5,64.8z"/>
+		<path class="st2" d="M59,113c-0.3-0.3-0.7-0.5-1-0.8c-5.4-3.6-12.6-2.1-16.1,3.3c-1,1.5-1.7,3.3-1.9,5.1c-0.1,0.5-0.1,0.9-0.1,1.4
+			c0,2.8,1,5.4,2.8,7.5l0.2,0.2c4.5,4.6,11.8,4.7,16.5,0.3c4.6-4.5,4.7-11.8,0.3-16.5C59.4,113.4,59.2,113.2,59,113z M49,33.7
+			c-1.2,0.7-43.2,25.2-35.1,63c0,0,12.7-7.1,22.4-3.3C36.4,93.4,26.7,53.7,49,33.7z M49,33.7c35.4-7.9,62.8,24,62.8,24
+			c11-12.8,16.5-12.5,16.5-12.5C100,13.9,49.1,33.7,49,33.7L49,33.7z M123.3,77.2c0-0.3,0.1-0.6,0.1-1c0-0.2-0.1-0.4-0.2-0.6
+			c-0.1-0.1-0.2-0.1-0.4-0.1H100c-0.3,0-0.6,0.3-0.6,0.6c0,0,0,0,0,0c0.1,3.2,1.1,17.6,7.5,27.4c0.2,0.3,0.4,0.6,0.6,0.9
+			c3.5,4.9,8.5,8.5,15.6,8.6c0.5,0,1,0,1.5,0c0.2,0,0.4,0,0.6-0.1c2.5-0.4,4.7-2.9,6.4-4.8c0.7-1,1-2.2,0.9-3.3
+			C132.5,104.8,121.9,89.9,123.3,77.2z M90.6,70.6c0,0-6.7,0.7-17.6,6.3l-0.9,0.5c-4.3,2.3-8.4,4.9-12.4,7.8
+			c0,0-18.1-28.2-10.7-51.4C49.1,33.7,73.4,39,90.6,70.6z"/>
+		<path class="st3" d="M60.7,119.8c0,6.4-5.2,11.6-11.6,11.6c0,0,0,0,0,0c-2.3,0-4.5-0.7-6.4-1.9c-4.2-4.9-3.5-12.3,1.4-16.4
+			c3.9-3.3,9.6-3.7,13.9-0.8C59.7,114.4,60.7,117,60.7,119.8z"/>
+		<path class="st4" d="M49.1,33.7c0,0,32-10.1,62.8,24c0,0-8.4,1-21.3,12.9C90.6,70.6,75.8,42.1,49.1,33.7z M36.4,93.4
+			c8.8-8.7,23.4-8.3,23.4-8.3C43.3,54.9,49.1,33.7,49.1,33.7C24.5,53.3,36.4,93.4,36.4,93.4z M124.6,113.1h22.8
+			c4.4-0.7,7.9-3.9,9-8.2h-23.9C131.1,110.2,123.9,113.3,124.6,113.1z M57.9,112.3c-1.9-1.2-4.1-1.9-6.4-1.9c-0.5,0-1,0-1.5,0.1
+			c-1.5,2.1-2.3,4.6-2.5,7.2c3.2-2.8,7.2-4.5,11.4-4.7C58.7,112.7,58.3,112.5,57.9,112.3z M39.9,120.6L39.9,120.6
+			c0,0.5-0.1,0.9-0.1,1.4c0,2.8,1,5.4,2.8,7.5c0,0.1,0.1,0.1,0.2,0.2c0.1-4.3,1.7-8.5,4.6-11.7C44.7,118.1,42.2,119.1,39.9,120.6
+			L39.9,120.6z M47.6,118c-0.5,6.1,2.5,11.9,7.7,15c3.5-1.2,6.3-4,7.4-7.5C61,123.3,55.8,117.3,47.6,118z"/>
+		<path class="st5" d="M158.7,120.3c-26.1,23.2-65.4,23.1-91.4-0.2C97.2,111.9,128.8,112,158.7,120.3z"/>
+		<path class="st4" d="M95,118.3c-0.1,0-0.2,0.1-0.2,0.1c-0.2,0-0.4-0.1-0.4-0.3L72.1,77.3l0.9-0.5l22.2,40.8
+			C95.3,117.9,95.2,118.2,95,118.3z"/>
+		<path class="st4" d="M113.4,95.5L113.4,95.5l-13.1-19.6c-0.1-0.2-0.4-0.3-0.7-0.2c0,0,0,0,0,0c-0.2,0.2-0.3,0.5-0.1,0.7l12.9,19.3
+			l-18,25.7c-0.2,0.2-0.1,0.5,0.1,0.7c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.3-0.1,0.4-0.2L113,96.6l10.6,15.8l-6.5,9
+			c-0.2,0.2-0.1,0.5,0.1,0.7c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.3-0.1,0.4-0.2l6.3-8.7l6.1,9.1c0.1,0.1,0.2,0.2,0.4,0.2
+			c0.1,0,0.2,0,0.3-0.1c0.2-0.2,0.3-0.5,0.1-0.7L113.4,95.5z"/>
+		<path class="st4" d="M153.5,121.4l-29.9-45.5c-0.1-0.2-0.5-0.3-0.7-0.2c-0.2,0.2-0.3,0.5-0.1,0.7l12.6,19.3l-4.2,5.4
+			c-0.2,0.2-0.1,0.5,0.1,0.7c0.1,0.1,0.2,0.1,0.3,0.1c0.2,0,0.3-0.1,0.4-0.2l4-5.1l16.6,25.4c0.1,0.1,0.3,0.2,0.4,0.2
+			c0.1,0,0.2,0,0.3-0.1C153.5,122,153.6,121.7,153.5,121.4C153.5,121.4,153.5,121.4,153.5,121.4z"/>
+	</g>
+</g>
+</svg>

package/src/svg/images/EmptyBusinessHour.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 181.9 139.3" style="enable-background:new 0 0 181.9 139.3;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:3.000000e-02;fill:#1E2633;enable-background:new    ;}
+	.st1{fill:#F1F2F4;}
+	.st2{fill:#788190;}
+	.st3{fill:#CED5DE;}
+	.st4{fill:#FFFFFF;}
+</style>
+<title>businessHourNew</title>
+<g id="Layer_2_1_">
+	<g id="Layer_1-2">
+		<circle class="st0" cx="113.1" cy="68.8" r="68.8"/>
+		<circle class="st0" cx="42.7" cy="56.4" r="42.7"/>
+		<circle class="st0" cx="35.9" cy="123.6" r="15.6"/>
+		<path class="st1" d="M168,87c0-3.3,1.5-6.4,4.2-8.4c0.6-0.5,0.8-1.3,0.4-2l-2.3-4l-2.4-4.1c-0.4-0.7-1.2-0.9-1.9-0.6
+			c-5.4,2.3-11.6-0.3-13.8-5.7c-0.4-0.9-0.6-1.8-0.7-2.7c-0.1-0.8-0.7-1.4-1.5-1.4h-9.3c-0.8,0-1.4,0.6-1.5,1.4
+			c-0.7,5.3-5.2,9.2-10.5,9.2c-1.4,0-2.8-0.3-4.1-0.8c-0.7-0.3-1.5,0-1.9,0.6l-4.7,8.1c-0.4,0.7-0.2,1.5,0.4,2
+			c4.7,3.5,5.6,10.2,2.1,14.8c-0.6,0.8-1.3,1.5-2.1,2.1c-0.6,0.5-0.8,1.3-0.4,2l2.1,3.6l0,0l0.3,0.6l0,0l0.4,0.6l0,0l0,0l1.9,3.2
+			c0.4,0.7,1.2,0.9,1.9,0.6c1.3-0.5,2.7-0.8,4.1-0.8c5.3,0,9.8,4,10.5,9.2c0.1,0.8,0.7,1.4,1.5,1.4h9.2c0.8,0,1.4-0.6,1.5-1.4
+			c0.7-5.3,5.2-9.3,10.5-9.2c1.4,0,2.8,0.3,4.1,0.8c0.7,0.3,1.5,0,1.9-0.6l4.7-8.1c0.4-0.7,0.2-1.5-0.4-2
+			C169.5,93.4,168,90.3,168,87z"/>
+		<path class="st2" d="M102.7,48.9c-9.4-12.2-26.8-14.4-39-5.1s-14.4,26.8-5.1,39s26.8,14.4,39,5.1c6.8-5.2,10.8-13.4,10.8-22
+			C108.5,59.7,106.5,53.8,102.7,48.9z M80.7,89c-9.8,0-18.5-6.2-21.8-15.4c-0.9-2.5-1.3-5.1-1.3-7.8c0-12.8,10.4-23.2,23.1-23.2
+			c12.8,0,23.2,10.4,23.2,23.2S93.5,89,80.7,89C80.7,89,80.7,89,80.7,89z"/>
+		<path class="st3" d="M116.1,65.8c0-5.2,2.4-10,6.5-13.1c1-0.7,1.3-2.1,0.7-3.1l-3.6-6.2L116,37c-0.6-1.1-1.9-1.5-3-1
+			c-2,0.8-4.1,1.3-6.3,1.3c-8.3,0-15.3-6.2-16.4-14.4c-0.1-1.2-1.1-2.1-2.3-2.1H73.5c-1.2,0-2.2,0.9-2.4,2.1
+			c-1.2,9-9.5,15.4-18.5,14.3c-1.5-0.2-2.9-0.6-4.2-1.1c-1.1-0.5-2.4-0.1-3,1l-7.2,12.6c-0.6,1.1-0.3,2.4,0.7,3.1
+			c7.3,5.5,8.7,15.9,3.2,23.1c-0.9,1.2-2,2.3-3.2,3.2c-1,0.7-1.3,2.1-0.7,3.1l3.2,5.6l0,0l0.5,0.9l0,0l0.6,1l0,0l0,0l2.9,5.1
+			c0.6,1,1.9,1.5,3,1c2-0.8,4.2-1.2,6.3-1.2c8.3,0,15.3,6.2,16.4,14.4c0.2,1.2,1.2,2.1,2.4,2.1h14.4c1.2,0,2.2-0.9,2.4-2.1
+			c1.2-9.1,9.5-15.4,18.6-14.2c1.4,0.2,2.8,0.6,4.1,1.1c1.1,0.5,2.4,0.1,3-1l7.3-12.6c0.6-1.1,0.3-2.4-0.7-3.1
+			C118.5,75.9,116.1,71,116.1,65.8z M102.1,87.7C82.3,102.5,61,94.1,53.8,78l0,0c0,0,0-0.1,0-0.1l0,0l0,0c-0.1-0.2-0.2-0.4-0.3-0.7
+			c-0.2-0.6-0.5-1.3-0.6-1.5c-3.2-9.2-2.1-20.4,6.1-31.2c0.1-0.2,0.3-0.4,0.5-0.5c17.3-13,35.8-8,45,4.3c7.4,10,8.7,24.9-1.9,39
+			C102.5,87.5,102.3,87.6,102.1,87.7L102.1,87.7z"/>
+		<circle class="st4" cx="145.3" cy="87" r="10.2"/>
+		<path class="st2" d="M97.4,65.7H83.8c-0.3-0.6-0.9-1-1.6-1.1l-3.5-10C78.6,54,78,53.8,77.5,54s-0.8,0.8-0.6,1.3l0,0l3.5,10
+			c-0.4,0.4-0.6,0.9-0.6,1.4c0,1.2,1,2.1,2.1,2.1c0.8,0,1.5-0.4,1.9-1.1h13.6c0.6,0,1-0.4,1-1S98,65.7,97.4,65.7z"/>
+	</g>
+</g>
+</svg>