@inceptionbg/iui 2.0.35 → 2.0.36

package/src/styles/common/helpers/_base.scss

@@ -1,55 +0,0 @@
-body {
-  margin: 0;
-  width: 100%;
-}
-
-#root {
-  overflow: hidden;
-}
-
-* {
-  box-sizing: border-box;
-  &:focus-visible {
-    outline: none !important;
-  }
-}
-
-button {
-  all: unset;
-  box-sizing: border-box;
-}
-
-a {
-  text-decoration: none;
-  color: unset;
-  -webkit-user-drag: none;
-}
-
-.clickable {
-  transition: background-color 250ms;
-  &:not(.disabled):not(:disabled) {
-    cursor: pointer;
-    &.neutral:hover {
-      background-color: var(--neutral-hover);
-    }
-  }
-  &:disabled,
-  &.disabled {
-    opacity: 0.4;
-    pointer-events: none;
-    user-select: none;
-  }
-}
-.no-overflow {
-  overflow: hidden;
-}
-.overflow-auto {
-  overflow: auto;
-}
-
-.hover-primary:hover {
-  background-color: var(--primary-100);
-}
-.hover-neutral:hover {
-  background-color: var(--neutral-hover);
-}

package/src/styles/common/helpers/_color.scss

@@ -1,10 +0,0 @@
-.c-primary {
-  color: var(--primary) !important;
-}
-.c-danger {
-  color: var(--danger) !important;
-}
-
-// .b-white {
-//   background: var(--white);
-// }

package/src/styles/common/helpers/_display.scss

@@ -1,85 +0,0 @@
-@use '../../variables/bp';
-
-.hidden {
-  display: none !important;
-}
-.block {
-  display: block !important;
-}
-.relative {
-  position: relative !important;
-}
-
-.flex {
-  display: flex;
-  &.column {
-    flex-direction: column;
-  }
-  &.center {
-    align-items: center;
-    justify-content: center;
-  }
-  &.wrap {
-    flex-wrap: wrap;
-  }
-}
-.inline-flex {
-  display: inline-flex;
-}
-.flex-grow {
-  flex-grow: 1 !important;
-}
-
-.gap-1 {
-  gap: 0.25rem;
-}
-.gap-2 {
-  gap: 0.5rem;
-}
-.gap-3 {
-  gap: 1rem;
-}
-.gap-4 {
-  gap: 1.5rem;
-}
-.gap-5 {
-  gap: 3rem;
-}
-.gap-form {
-  gap: 16px 8px;
-}
-
-.grid {
-  display: grid;
-  &.auto-1 {
-    grid-template-columns: auto 1fr;
-  }
-  &.fr-2 {
-    grid-template-columns: repeat(2, 1fr);
-
-    @media #{bp.$mobile} {
-      grid-template-columns: 1fr;
-    }
-  }
-  &.fr-3 {
-    grid-template-columns: repeat(3, 1fr);
-
-    @media #{bp.$mobile} {
-      grid-template-columns: 1fr;
-    }
-  }
-  &.fr-4 {
-    grid-template-columns: repeat(4, 1fr);
-
-    @media #{bp.$mobile} {
-      grid-template-columns: 1fr;
-    }
-  }
-  &.fr-5 {
-    grid-template-columns: repeat(5, 1fr);
-
-    @media #{bp.$mobile} {
-      grid-template-columns: 1fr;
-    }
-  }
-}

package/src/styles/common/helpers/_size.scss

@@ -1,25 +0,0 @@
-.full-screen {
-  height: 100dvh !important;
-  width: 100dvw !important;
-}
-.full-width {
-  width: 100% !important;
-}
-.half-width {
-  width: 50% !important;
-}
-.width-fit {
-  width: fit-content !important;
-}
-.w-300 {
-  width: 300px !important;
-}
-
-.full-height {
-  height: 100% !important;
-}
-
-.icon24 {
-  height: 24px !important;
-  width: 24px !important;
-}

package/src/styles/common/maps/_align.scss

@@ -1,21 +0,0 @@
-$aligns: (center, left, right);
-$justifies: (
-  around: space-around,
-  between: space-between,
-  evenly: space-evenly,
-);
-
-@each $key in $aligns {
-  .align-#{$key} {
-    align-items: $key !important;
-  }
-  .justify-#{$key} {
-    justify-content: $key !important;
-  }
-}
-
-@each $key, $value in $justifies {
-  .justify-#{$key} {
-    justify-content: $value !important;
-  }
-}

package/src/styles/common/maps/_buttonMaps.scss

@@ -1,42 +0,0 @@
-$text-button-sizes: (
-  xs: (
-    font-size: 10px,
-    svg: 12px,
-    padding: 0 10px,
-    height: 24px,
-    gap: 6px,
-  ),
-  s: (
-    font-size: 12px,
-    svg: 14px,
-    padding: 0 12px,
-    height: 30px,
-  ),
-  m: (
-    font-size: 14px,
-    svg: 16px,
-    padding: 0 14px,
-    height: 36px,
-  ),
-  l: (
-    font-size: 16px,
-    svg: 20px,
-    padding: 0 18px,
-    height: 48px,
-  ),
-);
-
-$icon-button-sizes: (
-  s: (
-    size: 32px,
-    svg: 16px,
-  ),
-  m: (
-    size: 40px,
-    svg: 20px,
-  ),
-  l: (
-    size: 44px,
-    svg: 24px,
-  ),
-);

package/src/styles/common/maps/_info-types.scss

@@ -1 +0,0 @@
-$info-types: (success, info, warning, danger);

package/src/styles/common/maps/_spacing.scss

@@ -1,78 +0,0 @@
-// Margin and Padding
-$spacers: (
-  0: 0,
-  1: 0.25rem,
-  2: 0.5rem,
-  3: 1rem,
-  4: 1.5rem,
-  5: 3rem,
-);
-@each $prop, $abbrev in (margin: m, padding: p) {
-  @each $size, $length in $spacers {
-    .#{$abbrev}-#{$size} {
-      #{$prop}: $length !important;
-    }
-    .#{$abbrev}t-#{$size},
-    .#{$abbrev}y-#{$size} {
-      #{$prop}-top: $length !important;
-    }
-    .#{$abbrev}r-#{$size},
-    .#{$abbrev}x-#{$size} {
-      #{$prop}-right: $length !important;
-    }
-    .#{$abbrev}b-#{$size},
-    .#{$abbrev}y-#{$size} {
-      #{$prop}-bottom: $length !important;
-    }
-    .#{$abbrev}l-#{$size},
-    .#{$abbrev}x-#{$size} {
-      #{$prop}-left: $length !important;
-    }
-  }
-}
-
-// Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
-@each $size, $length in $spacers {
-  @if $size != 0 {
-    .m-n#{$size} {
-      margin: -$length !important;
-    }
-    .mt-n#{$size},
-    .my-n#{$size} {
-      margin-top: -$length !important;
-    }
-    .mr-n#{$size},
-    .mx-n#{$size} {
-      margin-right: -$length !important;
-    }
-    .mb-n#{$size},
-    .my-n#{$size} {
-      margin-bottom: -$length !important;
-    }
-    .ml-n#{$size},
-    .mx-n#{$size} {
-      margin-left: -$length !important;
-    }
-  }
-}
-
-// Some special margin utils
-.m-auto {
-  margin: auto !important;
-}
-.mt-auto,
-.my-auto {
-  margin-top: auto !important;
-}
-.mr-auto,
-.mx-auto {
-  margin-right: auto !important;
-}
-.mb-auto,
-.my-auto {
-  margin-bottom: auto !important;
-}
-.ml-auto,
-.mx-auto {
-  margin-left: auto !important;
-}

package/src/styles/common/maps/_text.scss

@@ -1,14 +0,0 @@
-$aligns: (center, left, right, justify);
-$fs: (10, 12, 13, 15, 16, 18, 32);
-
-@each $key in $aligns {
-  .text-#{$key} {
-    text-align: $key !important;
-  }
-}
-
-@each $key in $fs {
-  .fs-#{$key} {
-    font-size: #{$key}px !important;
-  }
-}

package/src/styles/components/_accordions.scss

@@ -1,51 +0,0 @@
-.iui-accordions {
-  display: flex;
-  flex-direction: column;
-}
-.iui-accordion {
-  background: var(--background);
-  box-shadow: var(--container-shadow);
-  border-radius: var(--container-radius);
-  margin: 3px 0;
-  color: rgba(0, 0, 0, 0.87);
-  font-size: 13px;
-  &.compact {
-    border-radius: unset;
-    margin: unset;
-    &:first-child {
-      border-top-left-radius: var(--container-radius);
-      border-top-right-radius: var(--container-radius);
-    }
-    &:last-child {
-      border-bottom-left-radius: var(--container-radius);
-      border-bottom-right-radius: var(--container-radius);
-    }
-  }
-  .summary {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    user-select: none;
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 1px;
-    padding: 0 16px;
-    min-height: 48px;
-  }
-  .iui-icon {
-    color: var(--primary-light);
-    max-width: 20px;
-    margin-right: 16px;
-    margin-bottom: 0;
-    font-size: 20px;
-  }
-  .collapse-icon {
-    color: #333;
-    height: 12px;
-    width: 14px;
-  }
-  .iui-accordion-content {
-    padding: 16px 24px;
-    border-top: 1px solid var(--neutral-200);
-  }
-}

package/src/styles/components/_alert.scss

@@ -1,23 +0,0 @@
-@use '../common/maps/info-types' as *;
-
-.iui-alert {
-  border-radius: var(--container-radius);
-  display: flex;
-  align-items: center;
-  padding: 16px;
-  font-size: 13px;
-  svg {
-    height: 20px;
-    width: 20px;
-    margin-right: 12px;
-  }
-
-  @each $key in $info-types {
-    &.#{$key} {
-      background-color: var(--#{$key}-100);
-      svg {
-        color: var(--#{$key});
-      }
-    }
-  }
-}

package/src/styles/components/_badge.scss

@@ -1,84 +0,0 @@
-.iui-badge-parent {
-  position: relative;
-  display: inline-block;
-}
-.iui-badge {
-  position: absolute;
-  top: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transform: scale(1) translate(50%, -50%);
-  transform-origin: 100% 0%;
-  border-radius: 50px;
-  padding: 0 4px;
-  &.primary {
-    color: var(--text-inverse);
-    border: 2px solid var(--background);
-    background-color: var(--primary);
-  }
-  &.header-btn-badge {
-    border: 1px solid var(--primary);
-    background-color: var(--danger);
-    right: 4px;
-    top: 4px;
-  }
-  // SIZES
-  &.s {
-    font-size: 10px;
-    height: 18px;
-    min-width: 18px;
-  }
-  &.m {
-    font-size: 11px;
-    height: 21px;
-    min-width: 21px;
-  }
-}
-
-.iui-pill-badge {
-  padding: 5px 11px;
-  border-radius: 20px;
-  width: fit-content;
-  font-size: 12px;
-  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-  &.success {
-    background-color: var(--success-200);
-  }
-  &.info {
-    background-color: var(--info-200);
-  }
-  &.warning {
-    background-color: var(--warning-200);
-  }
-  &.danger {
-    background-color: var(--danger-200);
-  }
-  &.gray {
-    background-color: var(--neutral-200);
-  }
-}
-
-.iui-dot-badge {
-  min-width: 13px;
-  max-width: 13px;
-  min-height: 13px;
-  max-height: 13px;
-  border-radius: 50%;
-  &.success {
-    background-color: var(--success);
-  }
-  &.info {
-    background-color: var(--info);
-  }
-  &.warning {
-    background-color: var(--warning);
-  }
-  &.danger {
-    background-color: var(--danger);
-  }
-  &.gray {
-    background-color: var(--neutral-400);
-  }
-}

package/src/styles/components/_button.scss

@@ -1,99 +0,0 @@
-@use 'sass:map';
-@use '../common/maps/buttonMaps' as buttonMaps;
-
-$btn-colors: (primary, neutral, danger);
-
-.iui-btn {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  border-radius: 100px;
-  cursor: pointer;
-  user-select: none;
-  background: none;
-  transition:
-    border-color 250ms,
-    background-color 250ms;
-
-  @each $key in $btn-colors {
-    &.#{$key} {
-      color: var(--#{$key}-600);
-      &.solid {
-        background-color: var(--#{$key});
-      }
-      &.outlined {
-        border-color: var(--#{$key}-600);
-      }
-      &:not(:disabled) {
-        &:focus-visible {
-          box-shadow: 0px 0px 1px 3px var(--#{$key}-200);
-        }
-        &:hover,
-        &:active,
-        &.active {
-          &.solid {
-            border-color: var(--#{$key}-600);
-            background-color: var(--#{$key}-600);
-          }
-          &:not(.solid) {
-            // color: var(--#{$key}-700);
-            background-color: var(--#{$key}-100);
-          }
-        }
-      }
-    }
-  }
-
-  &.solid {
-    color: var(--text-inverse);
-  }
-  &.outlined {
-    border: 1px solid var(--neutral-300);
-  }
-  &:disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-  &:not(:disabled):active {
-    transform: translateY(2px);
-  }
-}
-
-///// Text Button /////
-
-.iui-text-btn {
-  font-weight: 600;
-  white-space: nowrap;
-  gap: 8px;
-
-  // Sizes
-  @each $size, $vars in buttonMaps.$text-button-sizes {
-    &.#{$size} {
-      font-size: map.get($vars, font-size);
-      padding: map.get($vars, padding);
-      gap: map.get($vars, gap);
-      height: map.get($vars, height);
-      svg {
-        height: map.get($vars, svg);
-        width: map.get($vars, svg);
-      }
-    }
-  }
-}
-
-///// Icon Button /////
-
-.iui-btn.iui-icon-btn {
-  @each $size, $vars in buttonMaps.$icon-button-sizes {
-    &.#{$size} {
-      min-height: map.get($vars, size);
-      min-width: map.get($vars, size);
-      height: map.get($vars, size);
-      width: map.get($vars, size);
-      svg {
-        height: map.get($vars, svg);
-        width: map.get($vars, svg);
-      }
-    }
-  }
-}

package/src/styles/components/_buttonSplit.scss

@@ -1,74 +0,0 @@
-@use 'sass:map';
-@use '../common/maps/buttonMaps' as buttonMaps;
-
-.iui-split-btn {
-  overflow: hidden;
-  .iui-btn-content {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-weight: 600;
-    white-space: nowrap;
-    gap: 8px;
-  }
-  .btn-actions {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-left: 1px solid;
-  }
-  &:hover,
-  &.active {
-    background-color: transparent !important;
-  }
-  &:not(:disabled) {
-    &.outlined {
-      .iui-btn-content,
-      .btn-actions {
-        &:hover,
-        &.active {
-          background-color: var(--neutral-100);
-        }
-      }
-      &:focus-visible {
-        box-shadow: 0px 0px 1px 3px var(--neutral-200);
-      }
-    }
-    &.solid {
-      .iui-btn-content,
-      .btn-actions {
-        &:hover,
-        &.active {
-          background-color: var(--primary-600);
-        }
-      }
-    }
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: default;
-  }
-  &:not(:disabled):active {
-    transform: translateY(2px);
-  }
-  // Sizes
-  @each $size, $vars in buttonMaps.$text-button-sizes {
-    &.#{$size} {
-      .iui-btn-content {
-        font-size: map.get($vars, font-size);
-        padding: map.get($vars, padding);
-        gap: map.get($vars, gap);
-        height: map.get($vars, height);
-      }
-      .btn-actions {
-        height: map.get($vars, height);
-        width: map.get($vars, height);
-      }
-      svg {
-        height: map.get($vars, svg);
-        width: map.get($vars, svg);
-      }
-    }
-  }
-}

package/src/styles/components/_card.scss

@@ -1,24 +0,0 @@
-.iui-card {
-  box-shadow: var(--container-shadow);
-  border-radius: var(--container-radius);
-  background: var(--background);
-  & > .content {
-    &.s {
-      padding: 10px;
-    }
-    &.l {
-      padding: 40px 30px;
-    }
-  }
-}
-
-.iui-card-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-weight: 700;
-  padding-left: 15px;
-  margin: 0 10px;
-  height: 45px;
-  border-bottom: 1px solid var(--neutral-700);
-}