@avakhula/ui 0.0.340 → 0.0.341

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@avakhula/ui",
-  "version": "0.0.340",
+  "version": "0.0.341",
   "main": "dist/index.js",
   "module": "dist/index.umd.cjs",
   "source": "src/index.js",
@@ -21,7 +21,6 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.5.4",
     "@vueup/vue-quill": "^1.2.0",
     "mitt": "^3.0.0",
     "vue": "^3.2.45"

package/src/components/Form/CheckboxGroup/CheckboxGroup.vue

@@ -7,6 +7,7 @@
       v-if="labelText.length"
       class="ib-checkbox-group-label"
       :required="required"
+      :info-text="infoText"
     >
       {{ labelText }}
     </ib-label>
@@ -44,6 +45,14 @@ export default {
       type: String,
       default: "",
     },
+    infoText: {
+      type: String,
+      default: ""
+    },
+    height: {
+      type: String,
+      default: '290px'
+    }
   },
   components: {
     IbLabel,
@@ -62,6 +71,8 @@ export default {
   .ib-checkbox-group-content {
     display: flex;
     flex-direction: column;
+    flex-wrap: wrap;
+    max-height: v-bind(height);
     .ib-radio:not(:last-child),
     .ib-checkbox:not(:last-child) {
       margin-bottom: 10px;

package/src/components/Form/CheckboxGroup/readme.mdx

@@ -17,6 +17,8 @@ The IbCheckboxGroup component is a wrapper component that helps to group and dis
 | required     | Boolean | false   | If true, a required indicator will be displayed next to the label       |
 | horizontal   | Boolean | false   | If true, the checkboxes or radio buttons will be displayed horizontally |
 | errorMessage | String  | ''      | Responsible for displaying an error                                     |
+| infoText     | String  | ''      | The text that will be displayed inside the tooltip when the information button is hover or have focus. |
+| maxHeight    | String  | '290px' | Max height of container with radio elements.                                |
 
 ### Slots
 

package/src/components/Form/Radio/radio.scss

@@ -30,12 +30,15 @@ $radio-border-filled-disabled: $neutral-500;
 .ib-radio {
   display: inline-flex;
   cursor: pointer;
+  position: relative;
 
   input {
     opacity: 0;
     position: absolute;
-    top: -100%;
-    right: -100%;
+    width: 1px;
+    height: 1px;
+    z-index: -1;
+
 
     &:focus + .ib-radio-body {
       border-radius: 4px;

package/src/components/Tooltip/Tooltip.vue

@@ -53,7 +53,7 @@ export default {
   padding: 10px;
   max-width: 240px;
   box-shadow: $ib-shadow-1;
-  z-index: 10051;
+  z-index: 10002;
 
   &.ib-tooltip-large {
     box-shadow: $ib-shadow-2;