@capillarytech/blaze-ui 5.23.3-beta.1 → 5.23.3-beta.10

package/CapCollapsibleNavbar/styles.css

@@ -0,0 +1,296 @@
+@charset "UTF-8";
+.cap-collapsible-nav {
+  position: fixed;
+  left: 0;
+  z-index: 10;
+  background: white;
+  border-left: 60px solid rgb(244, 245, 247);
+  box-shadow: 2px 0 5px -2px rgba(9, 30, 66, 0.25);
+  height: 100vh;
+  width: 288px;
+}
+.cap-collapsible-nav.expanded {
+  transition: width 200ms ease;
+}
+.cap-collapsible-nav.expanded .cap-row-v2.controls .cap-column-v2.icon-column .switcher {
+  transition: margin 200ms ease;
+}
+.cap-collapsible-nav.expanded .cap-row-v2 .cap-column-v2.icon-column .icon-container {
+  width: calc(60px - 2px);
+}
+.cap-collapsible-nav.collapsed {
+  width: 60px;
+}
+.cap-collapsible-nav.collapsed .cap-row-v2.controls .cap-column-v2.icon-column .switcher {
+  margin-left: calc(288px - 255px);
+  padding: 0 1px;
+}
+.cap-collapsible-nav.collapsed .cap-row-v2.controls .cap-column-v2.icon-column .switcher img {
+  transform: rotate(180deg);
+}
+.cap-collapsible-nav .leaf-item {
+  height: 40px;
+  padding: 10px 16px;
+  cursor: pointer;
+}
+.cap-collapsible-nav .leaf-item .text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 96%;
+  display: inline-block;
+}
+.cap-collapsible-nav .leaf-item:hover {
+  background: rgb(235, 236, 240);
+}
+.cap-collapsible-nav .leaf-item.popover-trigger {
+  position: relative;
+}
+.cap-collapsible-nav .leaf-item.popover-trigger img {
+  color: inherit;
+  font-style: normal;
+  line-height: 0;
+  text-align: center;
+  text-transform: none;
+  vertical-align: -0.125em;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  position: absolute;
+  top: 50%;
+  left: initial;
+  right: 12px;
+  display: inline-block;
+  font-size: 12px;
+  transform: translateY(-50%);
+}
+.cap-collapsible-nav .leaf-item.expanded {
+  background: rgb(235, 236, 240);
+}
+.cap-collapsible-nav .leaf-item.state-selected {
+  background: rgb(233, 240, 254) !important;
+  color: rgb(36, 102, 234) !important;
+}
+.cap-collapsible-nav .leaf-item.state-selected.first-level {
+  border-left: 2px solid rgb(9, 30, 66);
+}
+.cap-collapsible-nav div.ant-collapse.data-level-0 .ant-collapse-item .ant-collapse-header {
+  padding-left: calc(0 * 14px + 14px);
+}
+.cap-collapsible-nav div.leaf-item.data-level-0 {
+  padding-left: calc(0 * 14px + 14px);
+}
+.cap-collapsible-nav div.ant-collapse.data-level-1 .ant-collapse-item .ant-collapse-header {
+  padding-left: calc(1 * 14px + 14px);
+}
+.cap-collapsible-nav div.leaf-item.data-level-1 {
+  padding-left: calc(1 * 14px + 14px);
+}
+.cap-collapsible-nav div.ant-collapse.data-level-2 .ant-collapse-item .ant-collapse-header {
+  padding-left: calc(2 * 14px + 14px);
+}
+.cap-collapsible-nav div.leaf-item.data-level-2 {
+  padding-left: calc(2 * 14px + 14px);
+}
+.cap-collapsible-nav div.ant-collapse.data-level-3 .ant-collapse-item .ant-collapse-header {
+  padding-left: calc(3 * 14px + 14px);
+}
+.cap-collapsible-nav div.leaf-item.data-level-3 {
+  padding-left: calc(3 * 14px + 14px);
+}
+.cap-collapsible-nav div.ant-collapse.data-level-4 .ant-collapse-item .ant-collapse-header {
+  padding-left: calc(4 * 14px + 14px);
+}
+.cap-collapsible-nav div.leaf-item.data-level-4 {
+  padding-left: calc(4 * 14px + 14px);
+}
+.cap-collapsible-nav div.ant-collapse.data-level-5 .ant-collapse-item .ant-collapse-header {
+  padding-left: calc(5 * 14px + 14px);
+}
+.cap-collapsible-nav div.leaf-item.data-level-5 {
+  padding-left: calc(5 * 14px + 14px);
+}
+.cap-collapsible-nav .ant-collapse .ant-collapse-item {
+  border-bottom: none;
+}
+.cap-collapsible-nav .ant-collapse .ant-collapse-item .ant-collapse-header {
+  height: 40px;
+  padding: 8px 16px;
+}
+.cap-collapsible-nav .ant-collapse .ant-collapse-item .ant-collapse-header .ant-collapse-arrow {
+  right: 12px;
+}
+.cap-collapsible-nav .ant-collapse .ant-collapse-item .ant-collapse-content {
+  border-radius: 0;
+}
+.cap-collapsible-nav .ant-collapse .ant-collapse-item .ant-collapse-content .ant-collapse-content-box .leaf-item,
+.cap-collapsible-nav .ant-collapse .ant-collapse-item .ant-collapse-content .ant-collapse-content-box .ant-collapse {
+  margin-top: 3px;
+}
+.cap-collapsible-nav .ant-collapse .ant-collapse-item:hover .ant-collapse .ant-collapse-header, .cap-collapsible-nav .ant-collapse .ant-collapse-item.ant-collapse-item-active .ant-collapse .ant-collapse-header {
+  border-left: none;
+}
+.cap-collapsible-nav .ant-collapse .ant-collapse-item:hover .ant-collapse.state-selected .ant-collapse-header, .cap-collapsible-nav .ant-collapse .ant-collapse-item.ant-collapse-item-active .ant-collapse.state-selected .ant-collapse-header {
+  border-left: none !important;
+}
+.cap-collapsible-nav .ant-collapse .ant-collapse-item .ant-collapse-content.ant-collapse-content-active .ant-collapse-content-box {
+  padding: 0;
+}
+.cap-collapsible-nav .cap-row-v2 {
+  display: flex;
+  margin-left: calc(-60px);
+}
+.cap-collapsible-nav .cap-row-v2 .cap-column-v2 {
+  min-width: 0;
+  display: flex;
+}
+.cap-collapsible-nav .cap-row-v2 .cap-column-v2.menu-item {
+  flex: 228px;
+  flex-direction: column;
+}
+.cap-collapsible-nav .cap-row-v2 .cap-column-v2.menu-item.expanded {
+  opacity: 1;
+  transition: opacity 1.2s ease;
+}
+.cap-collapsible-nav .cap-row-v2 .cap-column-v2.menu-item.collapsed {
+  opacity: 0;
+  pointer-events: none;
+}
+.cap-collapsible-nav .cap-row-v2 .cap-column-v2.menu-item.collapsed > * {
+  display: none;
+}
+.cap-collapsible-nav .cap-row-v2 .cap-column-v2.icon-column {
+  flex: 60px;
+  flex-direction: column;
+  background: rgb(244, 245, 247);
+  color: rgb(250, 251, 252);
+  min-height: 48px;
+}
+.cap-collapsible-nav .cap-row-v2 .cap-column-v2.icon-column .icon-container {
+  width: calc(60px - 1px);
+  padding: 8px 19px;
+  margin: 2px;
+  cursor: pointer;
+  height: 37px;
+}
+.cap-collapsible-nav .cap-row-v2 .cap-column-v2.icon-column .icon-container.state-selected {
+  border-right: 2px solid rgb(9, 30, 66) !important;
+}
+.cap-collapsible-nav .cap-row-v2.controls {
+  height: 28px;
+}
+.cap-collapsible-nav .cap-row-v2.controls .cap-column-v2.icon-column {
+  padding: 10px 0 10px 14px;
+}
+.cap-collapsible-nav .cap-row-v2.controls .cap-column-v2.icon-column .switcher {
+  box-shadow: 2px 1px 5px 0 rgba(9, 30, 66, 0.25);
+  border: 1px solid rgb(235, 236, 240);
+  border-radius: 50%;
+  cursor: pointer;
+  height: 24px;
+  width: 24px;
+  background: rgb(250, 251, 252);
+  padding: 0 1px;
+  margin-left: calc(288px - 28px);
+  z-index: 100003;
+}
+.cap-collapsible-nav .cap-row-v2.controls .cap-column-v2.icon-column .switcher img {
+  height: 22px;
+  width: 22px;
+  transform: rotate(180deg);
+}
+.cap-collapsible-nav .cap-row-v2.controls .cap-column-v2.icon-column .switcher:hover {
+  background: rgb(233, 240, 254);
+}
+.cap-collapsible-nav .cap-row-v2.create-new {
+  margin-top: 6px;
+  margin-bottom: 6px;
+}
+.cap-collapsible-nav .cap-row-v2.create-new .cap-column-v2.icon-column .icon-container {
+  padding: 7px 6px;
+}
+.cap-collapsible-nav .cap-row-v2.create-new .cap-column-v2.menu-item {
+  padding: 2px 16px 6px;
+}
+.cap-collapsible-nav .cap-row-v2.create-new .cap-column-v2.menu-item .cap-button-v2 {
+  box-shadow: 0 1px 1px 0 rgba(9, 30, 66, 0.25);
+  width: 100%;
+}
+.cap-collapsible-nav .cap-row-v2.create-new .cap-column-v2.menu-item .cap-button-v2 img {
+  margin-right: 6px;
+}
+.cap-collapsible-nav .cap-row-v2.divider .cap-column-v2.icon-column {
+  min-height: 16px;
+  height: 16px;
+}
+.cap-collapsible-nav .cap-row-v2.divider .cap-column-v2.menu-item {
+  padding: 0 6px;
+}
+.cap-collapsible-nav .cap-row-v2.divider .cap-column-v2.menu-item .cap-divider-v2 {
+  margin: 8px 0;
+}
+
+.cap-popover-v2.nav-popover {
+  padding-top: 0 !important;
+}
+.cap-popover-v2.nav-popover .ant-popover-arrow {
+  display: none;
+}
+.cap-popover-v2.nav-popover .ant-popover-inner-content {
+  padding: 0;
+}
+
+.cap-popover-v2.nav-popover.new-state-popup {
+  width: 196px;
+}
+.cap-popover-v2.nav-popover.new-state-popup .ant-popover-inner-content .cap-menu-v2.new-state .ant-menu-item.new-state-item {
+  margin: 0;
+}
+.cap-popover-v2.nav-popover.new-state-popup .ant-popover-inner-content .cap-menu-v2.new-state .ant-menu-item.new-state-item:hover {
+  color: rgb(9, 30, 66);
+  background-color: rgb(244, 245, 247) !important;
+}
+.cap-popover-v2.nav-popover.new-state-popup .ant-popover-inner-content .cap-menu-v2.new-state .ant-menu-item.new-state-item.ant-menu-item-selected {
+  color: rgb(9, 30, 66);
+  background-color: unset;
+}
+
+.cap-popover-v2.nav-popover.low-level-menu {
+  width: 196px;
+  padding: 0;
+  z-index: 10003;
+}
+.cap-popover-v2.nav-popover.low-level-menu .ant-popover-inner-content {
+  box-shadow: 0 ​2px 4px rgba(9, 30, 66, 0.25);
+}
+.cap-popover-v2.nav-popover.low-level-menu .ant-popover-inner-content .leaf-item {
+  height: 40px;
+  padding: 10px 16px;
+  cursor: pointer;
+}
+.cap-popover-v2.nav-popover.low-level-menu .ant-popover-inner-content .leaf-item:hover {
+  background: rgb(235, 236, 240);
+}
+
+.cap-collapsible-nav.expanded.clicked .switcher {
+  padding: 0 !important;
+  opacity: 0;
+  transition: all 0.3s ease;
+}
+.cap-collapsible-nav.expanded.clicked .switcher img {
+  transform: none !important;
+}
+.cap-collapsible-nav.expanded.clicked.menu-hovered .switcher {
+  opacity: 1;
+}
+.cap-collapsible-nav.expanded.clicked .controls:hover .switcher {
+  opacity: 1;
+}
+
+.line {
+  max-width: 100%;
+  height: 100%;
+  margin-left: 10px;
+  border-bottom: 1px solid #dfe2e7;
+  margin-bottom: 10px;
+}

package/CapCollapsibleNavbar/styles.scss

@@ -15,7 +15,7 @@ $state-selected-color: rgb(71, 175, 70);
 $blue-color: rgb(36, 102, 234);
 $blue-bg-color: rgb(233, 240, 254);
 
-.cap-collapsible-nav_ZoqXb {
+.cap-collapsible-nav {
   position: fixed;
   left: 0;
   z-index: 10;
@@ -24,28 +24,28 @@ $blue-bg-color: rgb(233, 240, 254);
   box-shadow: 2px 0 5px -2px $shadow-color;
   height: 100vh;
   width: $total-width;
-  &.expanded_6yluq {
+  &.expanded {
     transition: width 200ms ease;
-    .cap-row-v2_AvfkE {
-      &.controls_kVhph {
-        .cap-column-v2_QO099.icon-column_pXzM1 {
-          .switcher_IWZiv {
+    .cap-row-v2 {
+      &.controls {
+        .cap-column-v2.icon-column {
+          .switcher {
             transition: margin 200ms ease;
           }
         }
       }
-      .cap-column-v2_QO099.icon-column_pXzM1 {
-        .icon-container_68BQG {
+      .cap-column-v2.icon-column {
+        .icon-container {
           width: calc(#{$left-border-width} - 2px);
         }
       }
     }
   }
-  &.collapsed_A2DQY {
+  &.collapsed {
     width: $left-border-width;
-    .cap-row-v2_AvfkE.controls_kVhph {
-      .cap-column-v2_QO099.icon-column_pXzM1 {
-        .switcher_IWZiv {
+    .cap-row-v2.controls {
+      .cap-column-v2.icon-column {
+        .switcher {
           margin-left: calc(#{$total-width} - 255px);
           padding: 0 1px;
           img {
@@ -55,10 +55,10 @@ $blue-bg-color: rgb(233, 240, 254);
       }
     }
   }
-  .leaf-item_LpaIJ {
+  .leaf-item {
     height: 40px;
     padding: 10px 16px;
-    .text_OyprC {
+    .text {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -69,7 +69,7 @@ $blue-bg-color: rgb(233, 240, 254);
     &:hover {
       background: $pale-grey;
     }
-    &.popover-trigger_iVmsB {
+    &.popover-trigger {
       position: relative;
       img {
         color: inherit;
@@ -90,83 +90,83 @@ $blue-bg-color: rgb(233, 240, 254);
         transform: translateY(-50%);
       }
     }
-    &.expanded_6yluq {
+    &.expanded {
       background: $pale-grey;
     }
-    &.state-selected_lyYmz {
+    &.state-selected {
       background: $blue-bg-color !important;
       color: $blue-color !important;
     }
-    &.state-selected_lyYmz.first-level_Fa7oo {
+    &.state-selected.first-level {
       border-left: 2px solid $text-color;
     }
   }
   @for $i from 0 through $max-levels {
-    div.ant-collapse_lXayW.data-level-#{$i} {
-      .ant-collapse-item_TbTFz {
-        .ant-collapse-header_i2Yn3 {
+    div.ant-collapse.data-level-#{$i} {
+      .ant-collapse-item {
+        .ant-collapse-header {
           padding-left: calc(#{$i} * 14px + 14px);
         }
       }
     }
-    div.leaf-item_LpaIJ.data-level-#{$i} {
+    div.leaf-item.data-level-#{$i} {
       padding-left: calc(#{$i} * 14px + 14px);
     }
   }
-  .ant-collapse_lXayW {
-    .ant-collapse-item_TbTFz {
+  .ant-collapse {
+    .ant-collapse-item {
       border-bottom: none;
-      .ant-collapse-header_i2Yn3 {
+      .ant-collapse-header {
         height: 40px;
         padding: 8px 16px;
-        .ant-collapse-arrow_d873V {
+        .ant-collapse-arrow {
           right: 12px;
         }
       }
-      .ant-collapse-content_l0M1c {
+      .ant-collapse-content {
         border-radius: 0;
-        .ant-collapse-content-box_YwFqo {
-          .leaf-item_LpaIJ,
-          .ant-collapse_lXayW {
+        .ant-collapse-content-box {
+          .leaf-item,
+          .ant-collapse {
             margin-top: 3px;
           }
         }
       }
       &:hover,
-      &.ant-collapse-item-active_E9bmB {
-        .ant-collapse_lXayW {
-          .ant-collapse-header_i2Yn3 {
+      &.ant-collapse-item-active {
+        .ant-collapse {
+          .ant-collapse-header {
             border-left: none;
           }
-          &.state-selected_lyYmz {
-            .ant-collapse-header_i2Yn3 {
+          &.state-selected {
+            .ant-collapse-header {
               border-left: none !important;
             }
           }
         }
       }
-      .ant-collapse-content_l0M1c.ant-collapse-content-active_GIHF4 {
-        .ant-collapse-content-box_YwFqo {
+      .ant-collapse-content.ant-collapse-content-active {
+        .ant-collapse-content-box {
           padding: 0;
         }
       }
     }
   }
-  .cap-row-v2_AvfkE {
+  .cap-row-v2 {
     display: flex;
     margin-left: calc(-#{$left-border-width});
-    .cap-column-v2_QO099 {
+    .cap-column-v2 {
       min-width: 0;
       display: flex;
     }
-    .cap-column-v2_QO099.menu-item_hUqtc {
+    .cap-column-v2.menu-item {
       flex: $nav-content-width;
       flex-direction: column;
-      &.expanded_6yluq {
+      &.expanded {
         opacity: 1;
         transition: opacity 1.2s ease;
       }
-      &.collapsed_A2DQY {
+      &.collapsed {
         opacity: 0;
         pointer-events: none;
         > * {
@@ -174,29 +174,29 @@ $blue-bg-color: rgb(233, 240, 254);
         }
       }
     }
-    .cap-column-v2_QO099.icon-column_pXzM1 {
+    .cap-column-v2.icon-column {
       flex: $left-border-width;
       flex-direction: column;
       background: $light-grey;
       color: $white-background;
       min-height: 48px;
-      .icon-container_68BQG {
+      .icon-container {
         width: calc(#{$left-border-width} - 1px);
         padding: 8px 19px;
         margin: 2px;
         cursor: pointer;
         height: 37px;
-        &.state-selected_lyYmz {
+        &.state-selected {
           border-right: 2px solid $text-color !important;
         }
       }
     }
   }
-  .cap-row-v2_AvfkE.controls_kVhph {
+  .cap-row-v2.controls {
     height: 28px;
-    .cap-column-v2_QO099.icon-column_pXzM1 {
+    .cap-column-v2.icon-column {
       padding: 10px 0 10px 14px;
-      .switcher_IWZiv {
+      .switcher {
         box-shadow: 2px 1px 5px 0 $shadow-color;
         border: 1px solid $pale-grey;
         border-radius: 50%;
@@ -218,17 +218,17 @@ $blue-bg-color: rgb(233, 240, 254);
       }
     }
   }
-  .cap-row-v2_AvfkE.create-new_rsE73 {
+  .cap-row-v2.create-new {
     margin-top: 6px;
     margin-bottom: 6px;
-    .cap-column-v2_QO099.icon-column_pXzM1 {
-      .icon-container_68BQG {
+    .cap-column-v2.icon-column {
+      .icon-container {
         padding: 7px 6px;
       }
     }
-    .cap-column-v2_QO099.menu-item_hUqtc {
+    .cap-column-v2.menu-item {
       padding: 2px 16px 6px;
-      .cap-button-v2_HFnPF {
+      .cap-button-v2 {
         box-shadow: 0 1px 1px 0 $shadow-color;
         width: 100%;
         img {
@@ -237,40 +237,40 @@ $blue-bg-color: rgb(233, 240, 254);
       }
     }
   }
-  .cap-row-v2_AvfkE.divider_B0WuW {
-    .cap-column-v2_QO099.icon-column_pXzM1 {
+  .cap-row-v2.divider {
+    .cap-column-v2.icon-column {
       min-height: 16px;
       height: 16px;
     }
-    .cap-column-v2_QO099.menu-item_hUqtc {
+    .cap-column-v2.menu-item {
       padding: 0 6px;
-      .cap-divider-v2_mm1j2 {
+      .cap-divider-v2 {
         margin: 8px 0;
       }
     }
   }
 }
 
-.cap-popover-v2_WtmgH.nav-popover_UibW1 {
+.cap-popover-v2.nav-popover {
   padding-top: 0 !important;
-  .ant-popover-arrow_iEO1r {
+  .ant-popover-arrow {
     display: none;
   }
-  .ant-popover-inner-content_euVY8 {
+  .ant-popover-inner-content {
     padding: 0;
   }
 }
-.cap-popover-v2_WtmgH.nav-popover_UibW1.new-state-popup_6GIdc {
+.cap-popover-v2.nav-popover.new-state-popup {
   width: 196px;
-  .ant-popover-inner-content_euVY8 {
-    .cap-menu-v2_oM5iz.new-state_Aszn7 {
-      .ant-menu-item_NtI8x.new-state-item_k3QOM {
+  .ant-popover-inner-content {
+    .cap-menu-v2.new-state {
+      .ant-menu-item.new-state-item {
         margin: 0;
         &:hover {
           color: $text-color;
           background-color: $light-grey !important;
         }
-        &.ant-menu-item-selected_-j3eV {
+        &.ant-menu-item-selected {
           color: $text-color;
           background-color: unset;
         }
@@ -278,13 +278,13 @@ $blue-bg-color: rgb(233, 240, 254);
     }
   }
 }
-.cap-popover-v2_WtmgH.nav-popover_UibW1.low-level-menu_PuW3U {
+.cap-popover-v2.nav-popover.low-level-menu {
   width: 196px;
   padding: 0;
   z-index: 10003;
-  .ant-popover-inner-content_euVY8 {
+  .ant-popover-inner-content {
     box-shadow: 0 ​2px 4px $shadow-color;
-    .leaf-item_LpaIJ {
+    .leaf-item {
       height: 40px;
       padding: 10px 16px;
       cursor: pointer;
@@ -294,8 +294,8 @@ $blue-bg-color: rgb(233, 240, 254);
     }
   }
 }
-.cap-collapsible-nav_ZoqXb.expanded_6yluq.clicked_d9CUt {
-  .switcher_IWZiv {
+.cap-collapsible-nav.expanded.clicked {
+  .switcher {
     padding: 0 !important;
     opacity: 0;
     transition: all 0.3s ease;
@@ -303,18 +303,18 @@ $blue-bg-color: rgb(233, 240, 254);
       transform: none !important;
     }
   }
-  &.menu-hovered_TYmdP {
-    .switcher_IWZiv {
+  &.menu-hovered {
+    .switcher {
       opacity: 1;
     }
   }
-  .controls_kVhph:hover {
-    .switcher_IWZiv {
+  .controls:hover {
+    .switcher {
       opacity: 1;
     }
   }
 }
-.line_r1-vG {
+.line {
   max-width: 100%;
   height: 100%;
   margin-left:10px;

package/CapColorPicker/index.js

@@ -1,29 +1,27 @@
-/**
- *
- * CapColorPicker - component used to select color
- *
- */
-
-import classNames from 'classnames';
-import React from 'react';
-import { HexColorPicker } from 'react-colorful';
-import './styles.scss';
-const styles = {"cap-hexslider-v2":"cap-hexslider-v2_mFeMy","cap-slider-v2":"cap-slider-v2_-SNH9"};
-import { jsx as _jsx } from "react/jsx-runtime";
-var clsPrefix = 'cap-colorpicker-v2';
-var CapColorPicker = _ref => {
-  var {
-    className = '',
-    color = '#d42020',
-    setColor = () => {},
-    hexSelector = false
-  } = _ref;
-  return /*#__PURE__*/_jsx("div", {
-    className: classNames(styles[clsPrefix], className, hexSelector ? "cap-hexslider-v2_mFeMy" : "cap-slider-v2_-SNH9"),
-    children: /*#__PURE__*/_jsx(HexColorPicker, {
-      color: color,
-      onChange: setColor
-    })
-  });
+import { jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { HexColorPicker } from "react-colorful";
+import styles from "./styles.module.scss.js";
+const clsPrefix = "cap-colorpicker-v2";
+const CapColorPicker = ({
+  className = "",
+  color = "#d42020",
+  setColor = () => {
+  },
+  hexSelector = false
+}) => {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: classNames(
+        styles[clsPrefix],
+        className,
+        hexSelector ? styles["cap-hexslider-v2"] : styles["cap-slider-v2"]
+      ),
+      children: /* @__PURE__ */ jsx(HexColorPicker, { color, onChange: setColor })
+    }
+  );
+};
+export {
+  CapColorPicker as default
 };
-export default CapColorPicker;