powell-react 0.0.29 → 0.0.30

package/dist/powell/styles/global.scss

@@ -0,0 +1,1460 @@
+@mixin components-general-styles() {
+  [class*="-wrapper"] {
+    .field {
+      display: flex;
+      gap: 0.25rem 1rem;
+
+      > .field-inner {
+        flex-grow: 1;
+      }
+    }
+
+    &.control-disabled {
+      label {
+        opacity: 0.6;
+      }
+    }
+
+    &.label-side .field {
+      flex-direction: row;
+      align-items: center;
+    }
+
+    &.label-top .field {
+      flex-direction: column;
+
+      label {
+        margin-bottom: 0.25rem;
+      }
+    }
+
+    &.label-float {
+      label {
+        left: auto;
+        inset-inline-start: 0.75rem;
+      }
+
+      &[class^="icon"] .field label {
+        inset-inline-start: 2.5rem;
+      }
+    }
+
+    .hint {
+      color: var(--text-color-secondary);
+      display: block;
+    }
+
+    .error-message {
+      color: rgb(185, 28, 28);
+      display: block;
+    }
+  }
+
+  .auto-complete-wrapper .p-autocomplete,
+  .auto-complete-wrapper .p-autocomplete .p-inputtext,
+  .cascade-select-wrapper .p-cascadeselect,
+  .chips-wrapper .p-chips,
+  .chips-wrapper .p-chips .p-inputtext,
+  .dropdown-wrapper .p-dropdown,
+  .editor-wrapper [data-pc-name="editor"],
+  .input-mask-wrapper .p-inputmask,
+  .input-number-wrapper .p-inputnumber,
+  .input-text-wrapper .p-inputtext,
+  .input-textarea-wrapper .p-inputtext,
+  .input-password-wrapper .p-password,
+  .input-password-wrapper .p-password div,
+  .input-password-wrapper .p-password-input,
+  .mention-wrapper .p-mention,
+  .mention-wrapper .p-mention .p-mention-input,
+  .multi-select-wrapper .p-multiselect,
+  .tree-select-wrapper .p-treeselect {
+    width: 100%;
+  }
+
+  .checkbox-wrapper,
+  .tri-state-checkbox-wrapper,
+  .multi-state-checkbox-wrapper {
+    &.label-side .field {
+      display: inline-flex;
+      flex-direction: row-reverse;
+      gap: 0.25rem 0.5rem;
+
+      .field-inner {
+        flex-grow: 0;
+      }
+    }
+  }
+
+  .input-switch-wrapper {
+    .field-inner {
+      display: inline-flex;
+    }
+  }
+
+  .color-picker-wrapper.is-inline,
+  .editor-wrapper,
+  .input-textarea-wrapper,
+  .list-box-wrapper,
+  .mention-wrapper,
+  .radio-group-wrapper.is-vertical {
+    .field label {
+      align-self: self-start;
+    }
+  }
+}
+
+@mixin components-rtl-styles() {
+  input:not(
+  [type="file" i],
+  [type="image" i],
+  [type="checkbox" i],
+  [type="radio" i]),
+  textarea {
+    unicode-bidi: plaintext;
+  }
+
+  .auto-complete-wrapper {
+    .p-autocomplete-multiple-container .p-autocomplete-token {
+      margin: 0;
+      margin-inline-start: 0.5rem;
+
+      .p-autocomplete-token-icon {
+        margin: 0;
+        margin-inline-start: 0.5rem;
+      }
+    }
+
+    .p-autocomplete-loader {
+      left: auto;
+      right: auto;
+      inset-inline-end: 0.75rem;
+    }
+
+    &:dir(rtl) {
+      .p-autocomplete-dd {
+        .p-autocomplete-dropdown {
+          @include left-side-radius(var(--border-radius));
+          @include right-side-radius(0);
+        }
+
+        .p-autocomplete-input, .p-autocomplete-multiple-container {
+          @include left-side-radius(0);
+          @include right-side-radius(var(--border-radius));
+        }
+      }
+    }
+  }
+
+  .chips-wrapper {
+    .p-chips-multiple-container .p-chips-token {
+      margin: 0;
+      margin-inline-end: 0.5rem;
+
+      .p-chips-token-icon {
+        margin: 0;
+        margin-inline-start: 0.5rem;
+      }
+    }
+  }
+
+  .dropdown-wrapper {
+    &.is-clearable {
+      .p-dropdown-label {
+        padding-right: 0.75rem;
+        padding-inline-end: 1.75rem;
+      }
+
+      .p-dropdown-clear-icon {
+        right: auto;
+        inset-inline-end: 3rem;
+      }
+    }
+  }
+
+  .editor-wrapper .ql-toolbar.ql-snow {
+    direction: ltr;
+  }
+
+  .input-number-wrapper {
+    &:dir(rtl) {
+      &.has-buttons-stacked {
+        .p-inputnumber-input {
+          @include left-side-radius(0);
+          @include right-side-radius(var(--border-radius));
+        }
+
+        .p-button.p-inputnumber-button-up {
+          border-top-left-radius: var(--border-radius);
+          border-top-right-radius: 0;
+        }
+
+        .p-button.p-inputnumber-button-down {
+          border-bottom-left-radius: var(--border-radius);
+          border-bottom-right-radius: 0;
+        }
+      }
+
+      &.has-buttons-horizontal {
+        .p-button.p-inputnumber-button-up {
+          order: 1;
+        }
+
+        .p-button.p-inputnumber-button-down {
+          order: 3;
+        }
+      }
+    }
+  }
+
+  .input-otp-wrapper {
+    .p-inputotp {
+      direction: ltr;
+    }
+
+    &:dir(rtl) {
+      .p-inputotp {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  .input-text-wrapper {
+    .input-text-inner {
+      position: relative;
+      width: 100%;
+    }
+
+    .input-text-clear-icon {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+
+    &.is-clearable {
+      .p-inputtext {
+        padding-right: 0.75rem;
+        padding-inline-end: 2.5rem;
+      }
+
+      .input-text-clear-icon {
+        right: auto;
+        inset-inline-end: 0.75rem;
+      }
+    }
+  }
+
+  .input-password-wrapper {
+    .input-password-inner {
+      position: relative;
+      width: 100%;
+    }
+
+    &:not(.icon-right) {
+      .p-inputtext {
+        padding-right: 0.75rem;
+      }
+    }
+
+    &.has-toggler {
+      .p-input-icon:has([class*=p-password-]) {
+        right: auto;
+        inset-inline-end: 0.75rem;
+      }
+
+      .p-inputtext {
+        padding-inline-end: 2.5rem;
+      }
+    }
+
+    .input-password-clear-icon {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: pointer;
+    }
+
+    &.is-clearable {
+      .p-inputtext {
+        padding-right: 0.75rem;
+        padding-inline-end: 2.5rem;
+      }
+
+      .input-password-clear-icon {
+        right: auto;
+        inset-inline-end: 0.75rem;
+      }
+
+      &.has-toggler {
+        .p-inputtext {
+          padding-inline-end: 4rem;
+        }
+
+        .input-password-clear-icon {
+          inset-inline-end: 2.5rem;
+        }
+      }
+    }
+  }
+
+  .list-box-wrapper {
+    .p-listbox-header {
+      .p-listbox-filter {
+        padding-right: 0.75rem;
+        padding-inline-end: 1.75rem;
+      }
+
+      .p-listbox-filter-icon {
+        right: auto;
+        inset-inline-end: 0.75rem;
+      }
+    }
+  }
+
+  .multi-select-wrapper {
+    &.is-clearable {
+      .p-multiselect-label {
+        padding-right: 0.75rem;
+        padding-inline-end: 1.75rem;
+      }
+
+      .p-multiselect-clear-icon {
+        right: auto;
+        inset-inline-end: 3rem;
+      }
+    }
+  }
+
+  .radio-group-wrapper {
+    .radio-group-item {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
+    &.is-vertical {
+      .radio-group-item {
+        margin-bottom: 0.5rem;
+      }
+    }
+
+    &.is-horizontal {
+      .radio-group-item {
+        gap: 0.25rem;
+      }
+
+      .field-inner {
+        display: flex;
+        gap: 1.25rem;
+      }
+    }
+  }
+
+  .select-button-wrapper {
+    .p-selectbutton {
+      direction: ltr;
+    }
+
+    &:dir(rtl) {
+      .p-selectbutton {
+        text-align: right;
+      }
+    }
+  }
+
+  .tree-select-wrapper {
+    &.is-clearable {
+      .p-treeselect-label {
+        padding-right: 0.75rem;
+        padding-inline-end: 1.75rem;
+      }
+
+      .p-treeselect-clear-icon {
+        right: auto;
+        inset-inline-end: 3rem;
+      }
+    }
+  }
+}
+
+@mixin components-panel-styles() {
+  .p-autocomplete-panel {
+    &.panel-rtl {
+      direction: rtl;
+    }
+  }
+
+  .p-cascadeselect-panel {
+    &.panel-rtl {
+      direction: rtl;
+
+      .p-cascadeselect-group-icon {
+        margin-left: unset;
+        margin-inline-start: auto;
+        transform: rotate(180deg);
+      }
+
+      .p-cascadeselect-item-active > .p-cascadeselect-sublist-wrapper {
+        left: unset;
+        inset-inline-start: 100%;
+      }
+    }
+  }
+
+  .p-dropdown-panel {
+    &.panel-rtl {
+      direction: rtl;
+    }
+
+    .p-dropdown-header {
+      .p-dropdown-filter-icon {
+        right: auto;
+        inset-inline-end: 0.75rem;
+      }
+
+      .p-dropdown-filter {
+        padding-right: 0.75rem;
+        padding-inline-end: 2rem;
+        margin-right: 0;
+        margin-inline-end: -1.75rem;
+      }
+    }
+  }
+
+  .p-password-panel {
+    &.panel-rtl {
+      direction: rtl;
+    }
+  }
+
+  .p-mention-panel {
+    &.panel-rtl {
+      direction: rtl;
+    }
+  }
+
+  .p-multiselect-panel {
+    &.panel-rtl {
+      direction: rtl;
+
+      .p-multiselect-header {
+        .p-checkbox {
+          margin-right: unset;
+          margin-inline-end: 0.5rem;
+        }
+
+        .p-multiselect-close {
+          margin-left: unset;
+          margin-inline-start: 0.5rem;
+        }
+
+        .p-multiselect-filter-container {
+          .p-inputtext {
+            padding-right: 0.75rem;
+            margin-inline-end: 1.75rem;
+            padding-inline-end: 2rem;
+          }
+
+          .p-multiselect-filter-icon {
+            right: auto;
+            inset-inline-end: 0.75rem;
+          }
+        }
+      }
+
+      .p-multiselect-items .p-multiselect-item .p-checkbox {
+        margin-right: unset;
+        margin-inline-end: 0.5rem;
+      }
+    }
+  }
+
+  .p-treeselect-panel {
+    &.panel-rtl {
+      direction: rtl;
+
+      .p-tree .p-tree-container .p-treenode {
+        &:not([aria-expanded="true"]) {
+          .p-tree-toggler {
+            transform: rotate(180deg);
+          }
+        }
+
+        .p-treenode-content {
+          .p-tree-toggler, .p-treenode-icon, .p-checkbox {
+            margin-right: unset;
+            margin-inline-end: 0.5rem;
+          }
+        }
+      }
+
+      .p-tree .p-treenode-children {
+        padding: unset;
+        padding-inline-start: 1rem;
+      }
+
+      .p-treeselect-header {
+        .p-checkbox {
+          margin-right: unset;
+          margin-inline-end: 0.5rem;
+        }
+
+        .p-treeselect-close {
+          margin-left: unset;
+          margin-inline-start: 0.5rem;
+        }
+
+        .p-treeselect-filter-container {
+          .p-inputtext {
+            padding-right: 0.75rem;
+            margin-inline-end: 1.75rem;
+            padding-inline-end: 2rem;
+          }
+
+          .p-treeselect-filter-icon {
+            right: auto;
+            inset-inline-end: 0.75rem;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin components-icon-styles() {
+  [class*=-wrapper] .p-icon-field {
+    .p-input-icon {
+      margin: 0;
+      transform: translateY(-50%);
+      z-index: 50;
+      color: #6b7280;
+    }
+
+    &.p-icon-field-right > .p-input-icon:not(:has([class*=p-password-])) {
+      right: 0.75rem;
+    }
+
+    &.p-icon-field-left > .p-input-icon:not(:has([class*=p-password-])) {
+      left: 0.75rem;
+    }
+  }
+
+  .auto-complete-wrapper {
+    &.label-float {
+      &:dir(ltr).icon-left,
+      &:dir(rtl).icon-right {
+        label {
+          inset-inline-start: 2.5rem;
+        }
+      }
+    }
+
+    &.icon-right {
+      .p-inputtext {
+        padding-right: 2.5rem;
+      }
+
+      &:dir(ltr).has-dropdown {
+        .p-input-icon {
+          right: 4rem;
+        }
+      }
+    }
+
+    &.icon-left {
+      .p-inputtext {
+        padding-left: 2.5rem;
+      }
+
+      &:dir(rtl).has-dropdown {
+        .p-input-icon {
+          left: 4rem;
+        }
+      }
+    }
+  }
+
+  .cascade-select-wrapper {
+    &.label-float {
+      &:dir(ltr).icon-left,
+      &:dir(rtl).icon-right {
+        label {
+          inset-inline-start: 2.5rem;
+        }
+      }
+    }
+
+    &.icon-right {
+      &:dir(rtl) {
+        .p-cascadeselect-label {
+          padding-right: 2.5rem;
+        }
+      }
+
+      &:dir(ltr) {
+        .p-cascadeselect-label {
+          padding-right: 1.75rem;
+        }
+
+        .field .p-icon-field > .p-input-icon {
+          right: 3rem;
+        }
+      }
+    }
+
+    &.icon-left {
+      &:dir(ltr) {
+        .p-cascadeselect-label {
+          padding-left: 2.5rem;
+        }
+      }
+
+      &:dir(rtl) {
+        .p-cascadeselect-label {
+          padding-left: 1.75rem;
+        }
+
+        .field .p-icon-field > .p-input-icon {
+          left: 3rem;
+        }
+      }
+    }
+
+    &.is-clearable {
+      &.icon-right {
+        &:dir(ltr) {
+          .p-cascadeselect-clear-icon {
+            inset-inline-end: 5rem;
+          }
+
+          .p-cascadeselect-label {
+            padding-right: 3.75rem;
+          }
+        }
+      }
+
+      &.icon-left {
+        &:dir(rtl) {
+          .p-cascadeselect-clear-icon {
+            inset-inline-end: 5rem;
+          }
+
+          .p-cascadeselect-label {
+            padding-left: 3.75rem;
+          }
+        }
+      }
+    }
+  }
+
+  .chips-wrapper {
+    &.label-float {
+      &:dir(ltr).icon-left,
+      &:dir(rtl).icon-right {
+        label {
+          inset-inline-start: 2.5rem;
+        }
+      }
+    }
+
+    &.icon-right {
+      .p-inputtext {
+        padding-right: 2.5rem;
+      }
+    }
+
+    &.icon-left {
+      .p-inputtext {
+        padding-left: 2.5rem;
+      }
+    }
+  }
+
+  .dropdown-wrapper {
+    &.label-float {
+      &:dir(ltr).icon-left,
+      &:dir(rtl).icon-right {
+        label {
+          inset-inline-start: 2.5rem;
+        }
+      }
+    }
+
+    &.icon-right {
+      &:dir(rtl) {
+        .p-dropdown-label {
+          padding-right: 2.5rem;
+        }
+      }
+
+      &:dir(ltr) {
+        .p-dropdown-label {
+          padding-right: 1.75rem;
+        }
+
+        .field .p-icon-field > .p-input-icon {
+          right: 3rem;
+        }
+      }
+    }
+
+    &.icon-left {
+      &:dir(ltr) {
+        .p-dropdown-label {
+          padding-left: 2.5rem;
+        }
+      }
+
+      &:dir(rtl) {
+        .p-dropdown-label {
+          padding-left: 1.75rem;
+        }
+
+        .field .p-icon-field > .p-input-icon {
+          left: 3rem;
+        }
+      }
+    }
+
+    &.is-clearable {
+      &.icon-right {
+        &:dir(ltr) {
+          .p-dropdown-clear-icon {
+            inset-inline-end: 5rem;
+          }
+
+          .p-dropdown-label {
+            padding-right: 3.75rem;
+          }
+        }
+      }
+
+      &.icon-left {
+        &:dir(rtl) {
+          .p-dropdown-clear-icon {
+            inset-inline-end: 5rem;
+          }
+
+          .p-dropdown-label {
+            padding-left: 3.75rem;
+          }
+        }
+      }
+    }
+  }
+
+  .input-mask-wrapper {
+    &.label-float {
+      &:dir(ltr).icon-left,
+      &:dir(rtl).icon-right {
+        label {
+          inset-inline-start: 2.5rem;
+        }
+      }
+    }
+
+    &.icon-right {
+      .p-inputtext {
+        padding-right: 2.5rem;
+      }
+    }
+
+    &.icon-left {
+      .p-inputtext {
+        padding-left: 2.5rem;
+      }
+    }
+  }
+
+  .input-number-wrapper {
+    &.label-float {
+      &:dir(ltr).icon-left,
+      &:dir(rtl).icon-right {
+        label {
+          inset-inline-start: 2.5rem;
+        }
+      }
+    }
+
+    &.icon-right {
+      .p-inputtext {
+        padding-right: 2.5rem;
+      }
+
+      &.has-buttons-horizontal {
+        .p-input-icon {
+          right: 4rem;
+        }
+      }
+
+      &.has-buttons-vertical {
+        .p-inputtext {
+          padding-left: 2.5rem;
+        }
+      }
+
+      &:dir(ltr).has-buttons-stacked {
+        .p-input-icon {
+          right: 4rem;
+        }
+      }
+    }
+
+    &.icon-left {
+      .p-inputtext {
+        padding-left: 2.5rem;
+      }
+
+      &.has-buttons-horizontal {
+        .p-input-icon {
+          left: 4rem;
+        }
+      }
+
+      &.has-buttons-vertical {
+        .p-inputtext {
+          padding-right: 2.5rem;
+        }
+      }
+
+      &:dir(rtl).has-buttons-stacked {
+        .p-input-icon {
+          left: 4rem;
+        }
+      }
+    }
+  }
+
+  .input-password-wrapper {
+    &.label-float {
+      &:dir(ltr).icon-left,
+      &:dir(rtl).icon-right {
+        label {
+          inset-inline-start: 2.5rem;
+        }
+      }
+    }
+
+    &.icon-right {
+      .p-inputtext {
+        padding-right: 2.5rem;
+      }
+
+      &:dir(ltr) {
+        &.has-toggler {
+          .p-input-icon:not(:has([class*=p-password-])) {
+            right: 2.75rem;
+          }
+
+          .p-inputtext {
+            padding-right: 4.5rem;
+          }
+        }
+      }
+    }
+
+    &.icon-left {
+      .p-inputtext {
+        padding-left: 2.5rem;
+      }
+
+      &:dir(rtl) {
+        &.has-toggler {
+          .p-input-icon:not(:has([class*=p-password-])) {
+            left: 2.75rem;
+          }
+
+          .p-inputtext {
+            padding-left: 4.5rem;
+          }
+        }
+      }
+    }
+
+    &.is-clearable {
+      &.icon-right {
+        &:dir(ltr) {
+          .input-password-clear-icon {
+            inset-inline-end: 2.5rem;
+          }
+
+          .p-inputtext {
+            padding-right: 4rem;
+          }
+        }
+
+        &.has-toggler {
+          &:dir(ltr) {
+            .input-password-clear-icon {
+              inset-inline-end: 4.75rem;
+            }
+
+            .p-inputtext {
+              padding-right: 6.5rem;
+            }
+          }
+        }
+      }
+
+      &.icon-left {
+        &:dir(rtl) {
+          .input-password-clear-icon {
+            inset-inline-end: 2.5rem;
+          }
+
+          .p-inputtext {
+            padding-left: 4rem;
+          }
+        }
+
+        &.has-toggler {
+          &:dir(rtl) {
+            .input-password-clear-icon {
+              inset-inline-end: 4.75rem;
+            }
+
+            .p-inputtext {
+              padding-left: 6.5rem;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .input-text-wrapper {
+    &.label-float {
+      &:dir(ltr).icon-left,
+      &:dir(rtl).icon-right {
+        label {
+          inset-inline-start: 2.5rem;
+        }
+      }
+    }
+
+    &.icon-right {
+      .p-inputtext {
+        padding-right: 2.5rem;
+      }
+    }
+
+    &.icon-left {
+      .p-inputtext {
+        padding-left: 2.5rem;
+      }
+    }
+
+    &.is-clearable {
+      &.icon-right {
+        &:dir(ltr) {
+          .input-text-clear-icon {
+            inset-inline-end: 2.5rem;
+          }
+
+          .p-inputtext {
+            padding-right: 4rem;
+          }
+        }
+      }
+
+      &.icon-left {
+        &:dir(rtl) {
+          .input-text-clear-icon {
+            inset-inline-end: 2.5rem;
+          }
+
+          .p-inputtext {
+            padding-left: 4rem;
+          }
+        }
+      }
+    }
+  }
+
+  .input-textarea-wrapper {
+    &.label-float {
+      &:dir(ltr).icon-left,
+      &:dir(rtl).icon-right {
+        label {
+          inset-inline-start: 2.5rem;
+        }
+      }
+    }
+
+    &.icon-right {
+      .p-inputtextarea {
+        padding-right: 2.5rem;
+      }
+    }
+
+    &.icon-left {
+      .p-inputtextarea {
+        padding-left: 2.5rem;
+      }
+    }
+  }
+
+  .mention-wrapper {
+    &.label-float {
+      &:dir(ltr).icon-left,
+      &:dir(rtl).icon-right {
+        label {
+          inset-inline-start: 2.5rem;
+        }
+      }
+    }
+
+    &.icon-right {
+      .p-inputtext {
+        padding-right: 2.5rem;
+      }
+    }
+
+    &.icon-left {
+      .p-inputtext {
+        padding-left: 2.5rem;
+      }
+    }
+  }
+
+  .multi-select-wrapper {
+    &.label-float {
+      &:dir(ltr).icon-left,
+      &:dir(rtl).icon-right {
+        label {
+          inset-inline-start: 2.5rem;
+        }
+      }
+    }
+
+    &.icon-right {
+      &:dir(rtl) {
+        .p-multiselect-label {
+          padding-right: 2.5rem;
+        }
+      }
+
+      &:dir(ltr) {
+        .p-multiselect-label {
+          padding-right: 1.75rem;
+        }
+
+        .field .p-icon-field > .p-input-icon {
+          right: 3rem;
+        }
+      }
+    }
+
+    &.icon-left {
+      &:dir(ltr) {
+        .p-multiselect-label {
+          padding-left: 2.5rem;
+        }
+      }
+
+      &:dir(rtl) {
+        .p-multiselect-label {
+          padding-left: 1.75rem;
+        }
+
+        .field .p-icon-field > .p-input-icon {
+          left: 3rem;
+        }
+      }
+    }
+
+    &.is-clearable {
+      &.icon-right {
+        &:dir(ltr) {
+          .p-multiselect-clear-icon {
+            inset-inline-end: 5rem;
+          }
+
+          .p-multiselect-label {
+            padding-right: 3.75rem;
+          }
+        }
+      }
+
+      &.icon-left {
+        &:dir(rtl) {
+          .p-multiselect-clear-icon {
+            inset-inline-end: 5rem;
+          }
+
+          .p-multiselect-label {
+            padding-left: 3.75rem;
+          }
+        }
+      }
+    }
+  }
+
+  .tree-select-wrapper {
+    &.label-float {
+      &:dir(ltr).icon-left,
+      &:dir(rtl).icon-right {
+        label {
+          inset-inline-start: 2.5rem;
+        }
+      }
+    }
+
+    &.icon-right {
+      &:dir(rtl) {
+        .p-treeselect-label {
+          padding-right: 2.5rem;
+        }
+      }
+
+      &:dir(ltr) {
+        .p-treeselect-label {
+          padding-right: 1.75rem;
+        }
+
+        .field .p-icon-field > .p-input-icon {
+          right: 3rem;
+        }
+      }
+    }
+
+    &.icon-left {
+      &:dir(ltr) {
+        .p-treeselect-label {
+          padding-left: 2.5rem;
+        }
+      }
+
+      &:dir(rtl) {
+        .p-treeselect-label {
+          padding-left: 1.75rem;
+        }
+
+        .field .p-icon-field > .p-input-icon {
+          left: 3rem;
+        }
+      }
+    }
+
+    &.is-clearable {
+      &.icon-right {
+        &:dir(ltr) {
+          .p-treeselect-clear-icon {
+            inset-inline-end: 5rem;
+          }
+
+          .p-treeselect-label {
+            padding-right: 3.75rem;
+          }
+        }
+      }
+
+      &.icon-left {
+        &:dir(rtl) {
+          .p-treeselect-clear-icon {
+            inset-inline-end: 5rem;
+          }
+
+          .p-treeselect-label {
+            padding-left: 3.75rem;
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin components-addon-styles() {
+  [class*="-wrapper"] {
+    &:dir(rtl) {
+      .p-inputgroup-addon {
+        &, i {
+          transform: rotate(180deg);
+        }
+      }
+    }
+  }
+
+  .auto-complete-wrapper {
+    &:not(.has-dropdown) {
+      @include adjust-addon-styles(".p-inputtext");
+    }
+
+    &.has-dropdown {
+      &.addon-both {
+        .p-autocomplete-dropdown,
+        .p-inputtext {
+          @include radius-all(0);
+        }
+      }
+
+      &.addon-before {
+        &:dir(rtl) {
+          .p-inputtext {
+            @include radius-all(0);
+          }
+        }
+
+        &:dir(ltr) {
+          .p-inputtext {
+            @include right-side-radius(0);
+          }
+        }
+      }
+
+      &.addon-after {
+        &:dir(rtl) {
+          .p-autocomplete-dropdown {
+            @include left-side-radius(0);
+          }
+        }
+
+        &:dir(ltr) {
+          .p-autocomplete-dropdown {
+            @include right-side-radius(0);
+          }
+        }
+      }
+    }
+  }
+
+  .cascade-select-wrapper {
+    @include adjust-addon-styles(".p-inputwrapper");
+  }
+
+  .chips-wrapper {
+    @include adjust-addon-styles(".p-inputtext");
+  }
+
+  .dropdown-wrapper {
+    @include adjust-addon-styles(".p-inputwrapper");
+  }
+
+  .input-mask-wrapper {
+    @include adjust-addon-styles(".p-inputtext");
+  }
+
+  .input-number-wrapper {
+    &:not([class*=has-buttons]) {
+      @include adjust-addon-styles(".p-inputtext");
+    }
+
+    &.has-buttons-stacked {
+      &.addon-both {
+        .p-button.p-inputnumber-button-down,
+        .p-button.p-inputnumber-button-up {
+          @include radius-all(0);
+        }
+      }
+
+      &.addon-after {
+        .p-button.p-inputnumber-button-up,
+        .p-button.p-inputnumber-button-down {
+          @include radius-all(0)
+        }
+      }
+
+      &.addon-before {
+        &:dir(rtl) {
+          .p-inputtext {
+            @include left-side-radius(0)
+          }
+        }
+
+        &:dir(ltr) {
+          .p-inputtext {
+            @include right-side-radius(0)
+          }
+        }
+      }
+    }
+
+    &.has-buttons-horizontal {
+      &.addon-both {
+        .p-button.p-inputnumber-button-down,
+        .p-button.p-inputnumber-button-up {
+          @include radius-all(0);
+        }
+      }
+
+      &.addon-after {
+        &:dir(rtl) {
+          .p-inputtext {
+            @include right-side-radius(0);
+          }
+
+          .p-button.p-inputnumber-button-down {
+            @include left-side-radius(0);
+          }
+        }
+
+        &:dir(ltr) {
+          .p-inputtext {
+            @include left-side-radius(0);
+          }
+
+          .p-button.p-inputnumber-button-up {
+            @include right-side-radius(0);
+          }
+        }
+      }
+
+      &.addon-before {
+        &:dir(rtl) {
+          .p-inputtext {
+            @include left-side-radius(0);
+          }
+
+          .p-button.p-inputnumber-button-up {
+            @include right-side-radius(0);
+          }
+        }
+
+        &:dir(ltr) {
+          .p-inputtext {
+            @include right-side-radius(0);
+          }
+
+          .p-button.p-inputnumber-button-down {
+            @include left-side-radius(0);
+          }
+        }
+      }
+    }
+
+    &.has-buttons-vertical {
+      .p-inputtext {
+        @include radius-all(0);
+        width: 100%
+      }
+
+      &.addon-both {
+        .p-button.p-inputnumber-button-down,
+        .p-button.p-inputnumber-button-up {
+          @include radius-all(0);
+        }
+      }
+
+      &.addon-before {
+        &:dir(ltr) {
+          .p-button.p-inputnumber-button-down,
+          .p-button.p-inputnumber-button-up {
+            @include left-side-radius(0);
+          }
+        }
+
+        &:dir(rtl) {
+          .p-button.p-inputnumber-button-down,
+          .p-button.p-inputnumber-button-up {
+            @include right-side-radius(0);
+          }
+        }
+      }
+
+      &.addon-after {
+        &:dir(ltr) {
+          .p-button.p-inputnumber-button-down,
+          .p-button.p-inputnumber-button-up {
+            @include right-side-radius(0);
+          }
+        }
+
+        &:dir(rtl) {
+          .p-button.p-inputnumber-button-down,
+          .p-button.p-inputnumber-button-up {
+            @include left-side-radius(0);
+          }
+        }
+      }
+    }
+  }
+
+  .input-password-wrapper {
+    @include adjust-addon-styles(".p-inputtext");
+  }
+
+  .input-text-wrapper {
+    @include adjust-addon-styles(".p-inputtext");
+  }
+
+  .input-textarea-wrapper {
+    @include adjust-addon-styles(".p-inputtextarea");
+  }
+
+  .mention-wrapper {
+    @include adjust-addon-styles(".p-inputtext");
+  }
+
+  .multi-select-wrapper {
+    @include adjust-addon-styles(".p-inputwrapper");
+  }
+
+  .tree-select-wrapper {
+    @include adjust-addon-styles(".p-inputwrapper");
+  }
+}
+
+@mixin radius-all($value) {
+  @include left-side-radius($value);
+  @include right-side-radius($value);
+}
+
+@mixin left-side-radius($value) {
+  border-top-left-radius: $value;
+  border-bottom-left-radius: $value;
+}
+
+@mixin right-side-radius($value) {
+  border-top-right-radius: $value;
+  border-bottom-right-radius: $value;
+}
+
+@mixin adjust-addon-styles($selector) {
+  &.addon-both {
+    #{$selector} {
+      @include radius-all(0);
+    }
+  }
+
+  &:dir(ltr) {
+    &.addon-before {
+      #{$selector} {
+        @include left-side-radius(0);
+        @include right-side-radius(var(--border-radius));
+      }
+    }
+
+    &.addon-after {
+      #{$selector} {
+        @include left-side-radius(var(--border-radius));
+        @include right-side-radius(0);
+      }
+    }
+  }
+
+  &:dir(rtl) {
+    &.addon-before {
+      #{$selector} {
+        @include left-side-radius(var(--border-radius));
+        @include right-side-radius(0);
+      }
+    }
+
+    &.addon-after {
+      #{$selector} {
+        @include left-side-radius(0);
+        @include right-side-radius(var(--border-radius));
+      }
+    }
+  }
+}
+
+@include components-general-styles();
+
+@include components-rtl-styles();
+
+@include components-icon-styles();
+
+@include components-addon-styles();
+
+@include components-panel-styles();