@oliasoft-open-source/react-ui-library 5.0.2-beta-2 → 5.0.2-beta-3

package/dist/global.css

@@ -1409,17 +1409,17 @@ html[data-theme='dark'] {
 ._actionComponentContainer_1t7vd_14._active_1t7vd_36 {
   color: var(--color-text-primary-active);
 }
-._wrapper_k08fp_1 {
+._wrapper_9g7i6_1 {
   display: inline-flex;
   max-width: 100%;
 }
-._layer_k08fp_5 ._wrapper_k08fp_1 {
+._layer_9g7i6_5 ._wrapper_9g7i6_1 {
   width: 100%;
 }
-._layerContainer_k08fp_8 {
+._layerContainer_9g7i6_8 {
   z-index: var(--zindex-dropdown);
 }
-._layer_k08fp_5 {
+._layer_9g7i6_5 {
   border: 1px solid var(--color-border);
   border-radius: var(--border-radius);
   overflow: hidden;
@@ -1432,94 +1432,101 @@ html[data-theme='dark'] {
   overflow-y: auto;
   max-height: 40vh;
 }
-._layer_k08fp_5._nested_k08fp_24 {
+._layer_9g7i6_5._nested_9g7i6_24 {
   margin: -1px 2px;
 }
-._layer_k08fp_5 ul {
+._layer_9g7i6_5 ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
 }
-._layer_k08fp_5 ul li {
+._layer_9g7i6_5 ul li {
   list-style: none;
   display: block;
 }
-._fileInput_k08fp_36 {
+._fileInput_9g7i6_36 {
   opacity: 0;
   position: absolute;
   inset: 0;
 }
-._trigger_k08fp_41 {
+._trigger_9g7i6_41 {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
   max-width: 100%;
 }
-._layer_k08fp_5 ._trigger_k08fp_41 {
+._layer_9g7i6_5 ._trigger_9g7i6_41 {
   width: 100%;
 }
-._middleAlignedInline_k08fp_50 {
+._middleAlignedInline_9g7i6_50 {
   display: flex;
   align-items: center;
   overflow: hidden;
   width: 100%;
 }
-._heading_k08fp_56 {
+._heading_9g7i6_56 {
   color: var(--color-text-muted);
   letter-spacing: var(--letter-spacing-wide);
   text-transform: uppercase;
   font-weight: bold;
-  display: flex;
 }
-._heading_k08fp_56 ._icon_k08fp_63 {
+._heading_9g7i6_56 ._headingIcon_9g7i6_62 {
+  float: right;
   color: inherit;
+  display: flex;
+  align-items: center;
+  height: var(--line-height);
 }
-._option_k08fp_66 {
+._heading_9g7i6_56 ._headingIcon_9g7i6_62._clickable_9g7i6_69:hover {
+  cursor: pointer;
+  color: var(--color-text-primary-hover);
+}
+._option_9g7i6_73 {
   color: inherit;
   display: block;
   position: relative;
 }
-._heading_k08fp_56,
-._option_k08fp_66,
-._layer_k08fp_5 ._trigger_k08fp_41 {
+._heading_9g7i6_56,
+._option_9g7i6_73,
+._layer_9g7i6_5 ._trigger_9g7i6_41 {
   padding: var(--padding-input);
   border: 1px solid transparent;
 }
-._option_k08fp_66,
-._layer_k08fp_5 ._trigger_k08fp_41 {
+._option_9g7i6_73,
+._layer_9g7i6_5 ._trigger_9g7i6_41 {
   line-height: var(--line-height);
   display: flex;
   align-items: flex-start;
 }
-._option_k08fp_66:hover,
-._layer_k08fp_5 ._trigger_k08fp_41:hover,
-._option_k08fp_66._active_k08fp_85,
-._layer_k08fp_5 ._trigger_k08fp_41._active_k08fp_85 {
+._option_9g7i6_73:hover,
+._layer_9g7i6_5 ._trigger_9g7i6_41:hover,
+._option_9g7i6_73._active_9g7i6_92,
+._layer_9g7i6_5 ._trigger_9g7i6_41._active_9g7i6_92 {
   background-color: var(--color-background-listitem-hover);
   cursor: pointer;
 }
-._option_k08fp_66._disabled_k08fp_90,
-._layer_k08fp_5 ._trigger_k08fp_41._disabled_k08fp_90 {
+._option_9g7i6_73._disabled_9g7i6_97,
+._layer_9g7i6_5 ._trigger_9g7i6_41._disabled_9g7i6_97 {
   opacity: 0.2;
 }
-._option_k08fp_66._selected_k08fp_94,
-._layer_k08fp_5 ._trigger_k08fp_41._selected_k08fp_94 {
+._option_9g7i6_73._selected_9g7i6_101,
+._layer_9g7i6_5 ._trigger_9g7i6_41._selected_9g7i6_101 {
   background-color: var(--color-background-listitem-active);
 }
-._layer_k08fp_5 ._trigger_k08fp_41 {
+._layer_9g7i6_5 ._trigger_9g7i6_41 {
   align-items: center;
 }
-._optionContent_k08fp_101 {
+._optionContent_9g7i6_108 {
   flex-wrap: wrap;
   margin-right: auto;
 }
-._inline_k08fp_105 ._optionContent_k08fp_101 {
+._inline_9g7i6_112 ._optionContent_9g7i6_108 {
   display: flex;
   justify-content: space-between;
   flex-grow: 1;
 }
-._icon_k08fp_63,
-._check_k08fp_111 {
+._icon_9g7i6_117,
+._check_9g7i6_118 {
   display: flex;
   flex-shrink: 1;
   width: var(--size-xs);
@@ -1527,82 +1534,82 @@ html[data-theme='dark'] {
   justify-content: center;
   align-items: center;
 }
-._icon_k08fp_63 {
+._icon_9g7i6_117 {
   margin-right: var(--padding-xs);
   color: var(--color-text-primary);
   font-size: var(--size-xs);
 }
-._icon_k08fp_63:empty {
+._icon_9g7i6_117:empty {
   display: none;
 }
-._icon_k08fp_63 img {
+._icon_9g7i6_117 img {
   max-height: 16px;
   max-width: 16px;
   width: auto;
   height: auto;
 }
-._check_k08fp_111 {
+._check_9g7i6_118 {
   margin-left: var(--padding-xs);
   color: var(--color-text-primary);
 }
-._text_k08fp_137 {
+._text_9g7i6_144 {
   display: inline-flex;
   align-items: center;
   cursor: pointer;
 }
-._label_k08fp_142 {
+._label_9g7i6_149 {
   margin-right: auto;
 }
-._label_k08fp_142,
-._heading_k08fp_56 {
+._label_9g7i6_149,
+._heading_9g7i6_56 {
   max-width: 100%;
-  display: flex;
+  display: block;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-._description_k08fp_153 {
+._description_9g7i6_160 {
   color: #999;
   display: block;
 }
-._arrow_k08fp_157 {
+._arrow_9g7i6_164 {
   margin-left: var(--padding-xxs);
   display: flex;
 }
-._divider_k08fp_161 {
+._divider_9g7i6_168 {
   border: 0;
   border-top: 1px solid var(--color-border);
 }
-._deprecatedSemanticIcon_k08fp_165 {
+._deprecatedSemanticIcon_9g7i6_172 {
   color: var(--color-text-primary) !important;
   margin: -5px 0 0 !important;
 }
-._disabled_k08fp_90 {
+._disabled_9g7i6_97 {
   pointer-events: none;
   cursor: not-allowed !important;
 }
-._buttonLabel_k08fp_173 {
+._buttonLabel_9g7i6_180 {
   overflow: hidden;
   text-overflow: ellipsis;
   display: block;
   margin-right: auto;
 }
-._buttonCaret_k08fp_179 {
+._buttonCaret_9g7i6_186 {
   display: flex;
   margin-left: var(--padding-xxs);
 }
-._component_k08fp_183 {
+._component_9g7i6_190 {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
 }
-._right_k08fp_189 {
+._right_9g7i6_196 {
   margin-left: auto;
   display: flex;
   align-items: center;
 }
-._actions_k08fp_194 {
+._actions_9g7i6_201 {
   margin-left: var(--padding-xs);
   display: flex;
   align-items: center;

package/dist/index.js

@@ -858,12 +858,12 @@ const DisabledContext = React__default.createContext(false);
 const wrapper$5 = "_wrapper_18jt2_1";
 const customSvg = "_customSvg_18jt2_8";
 const customPng = "_customPng_18jt2_11";
-const clickable$2 = "_clickable_18jt2_16";
+const clickable$3 = "_clickable_18jt2_16";
 const styles$U = {
   wrapper: wrapper$5,
   customSvg,
   customPng,
-  clickable: clickable$2
+  clickable: clickable$3
 };
 var DefaultContext = {
   color: void 0,
@@ -1566,7 +1566,7 @@ const Chevron = ({ expanded: expanded2 }) => {
 const accordion = "_accordion_15p8j_1";
 const accordionHeader = "_accordionHeader_15p8j_5";
 const heading$6 = "_heading_15p8j_9";
-const clickable$1 = "_clickable_15p8j_12";
+const clickable$2 = "_clickable_15p8j_12";
 const bordered$4 = "_bordered_15p8j_18";
 const accordionContent = "_accordionContent_15p8j_18";
 const expanded$1 = "_expanded_15p8j_36";
@@ -1576,7 +1576,7 @@ const styles$T = {
   accordion,
   accordionHeader,
   heading: heading$6,
-  clickable: clickable$1,
+  clickable: clickable$2,
   bordered: bordered$4,
   accordionContent,
   expanded: expanded$1,
@@ -3804,11 +3804,11 @@ const Tooltip = ({
 };
 const helpIcon = "_helpIcon_hd0z2_1";
 const active$8 = "_active_hd0z2_9";
-const clickable = "_clickable_hd0z2_12";
+const clickable$1 = "_clickable_hd0z2_12";
 const styles$Q = {
   helpIcon,
   active: active$8,
-  clickable
+  clickable: clickable$1
 };
 const HelpIconTooltip = ({
   children,
@@ -4165,31 +4165,33 @@ const styles$N = {
   actions: actions$2,
   childComponent
 };
-const wrapper$4 = "_wrapper_k08fp_1";
-const layer$1 = "_layer_k08fp_5";
-const layerContainer$1 = "_layerContainer_k08fp_8";
-const nested = "_nested_k08fp_24";
-const fileInput$1 = "_fileInput_k08fp_36";
-const trigger$2 = "_trigger_k08fp_41";
-const middleAlignedInline = "_middleAlignedInline_k08fp_50";
-const heading$5 = "_heading_k08fp_56";
-const icon$4 = "_icon_k08fp_63";
-const option$1 = "_option_k08fp_66";
-const active$6 = "_active_k08fp_85";
-const disabled$8 = "_disabled_k08fp_90";
-const selected$1 = "_selected_k08fp_94";
-const optionContent$1 = "_optionContent_k08fp_101";
-const inline$4 = "_inline_k08fp_105";
-const check$1 = "_check_k08fp_111";
-const label$9 = "_label_k08fp_142";
-const description = "_description_k08fp_153";
-const arrow$1 = "_arrow_k08fp_157";
-const divider$1 = "_divider_k08fp_161";
-const buttonLabel = "_buttonLabel_k08fp_173";
-const buttonCaret = "_buttonCaret_k08fp_179";
-const component = "_component_k08fp_183";
-const right$7 = "_right_k08fp_189";
-const actions$1 = "_actions_k08fp_194";
+const wrapper$4 = "_wrapper_9g7i6_1";
+const layer$1 = "_layer_9g7i6_5";
+const layerContainer$1 = "_layerContainer_9g7i6_8";
+const nested = "_nested_9g7i6_24";
+const fileInput$1 = "_fileInput_9g7i6_36";
+const trigger$2 = "_trigger_9g7i6_41";
+const middleAlignedInline = "_middleAlignedInline_9g7i6_50";
+const heading$5 = "_heading_9g7i6_56";
+const headingIcon = "_headingIcon_9g7i6_62";
+const clickable = "_clickable_9g7i6_69";
+const option$1 = "_option_9g7i6_73";
+const active$6 = "_active_9g7i6_92";
+const disabled$8 = "_disabled_9g7i6_97";
+const selected$1 = "_selected_9g7i6_101";
+const optionContent$1 = "_optionContent_9g7i6_108";
+const inline$4 = "_inline_9g7i6_112";
+const icon$4 = "_icon_9g7i6_117";
+const check$1 = "_check_9g7i6_118";
+const label$9 = "_label_9g7i6_149";
+const description = "_description_9g7i6_160";
+const arrow$1 = "_arrow_9g7i6_164";
+const divider$1 = "_divider_9g7i6_168";
+const buttonLabel = "_buttonLabel_9g7i6_180";
+const buttonCaret = "_buttonCaret_9g7i6_186";
+const component = "_component_9g7i6_190";
+const right$7 = "_right_9g7i6_196";
+const actions$1 = "_actions_9g7i6_201";
 const styles$M = {
   wrapper: wrapper$4,
   layer: layer$1,
@@ -4199,13 +4201,15 @@ const styles$M = {
   trigger: trigger$2,
   middleAlignedInline,
   heading: heading$5,
-  icon: icon$4,
+  headingIcon,
+  clickable,
   option: option$1,
   active: active$6,
   disabled: disabled$8,
   selected: selected$1,
   optionContent: optionContent$1,
   inline: inline$4,
+  icon: icon$4,
   check: check$1,
   label: label$9,
   description,
@@ -4224,8 +4228,15 @@ const Heading$3 = ({ label: label2, onClick, icon: icon2, testId }) => /* @__PUR
     className: styles$M.heading,
     "data-testid": testId,
     children: [
-      !!icon2 && /* @__PURE__ */ jsx("span", { className: styles$M.icon, onClick, children: /* @__PURE__ */ jsx(Icon, { icon: icon2 }) }),
-      label2
+      label2,
+      !!icon2 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: cx$2(styles$M.headingIcon, onClick ? styles$M.clickable : ""),
+          onClick,
+          children: /* @__PURE__ */ jsx(Icon, { icon: icon2 })
+        }
+      )
     ]
   }
 );