@trebired/frontend 7.1.18 → 8.0.1

package/dist/inputs/styles/cropper-internals.scss

@@ -1,14 +1,20 @@
-.tbf-upload-crop__stage .cropper-container,
-.tbf-upload-crop__stage .cropper-wrap-box,
-.tbf-upload-crop__stage .cropper-canvas,
-.tbf-upload-crop__stage .cropper-drag-box,
-.tbf-upload-crop__stage .cropper-crop-box,
-.tbf-upload-crop__stage .cropper-modal {
+@use "@trebired/bundler/namespace" as ns;
+#{ns.element-class("upload-crop", "stage")} .cropper-container,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-wrap-box,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-canvas,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-drag-box,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-crop-box,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-modal {
   position: absolute;
   inset: 0;
 }
 
-.tbf-upload-crop__stage .cropper-container {
+#{ns.element-class("upload-crop", "stage")} .cropper-container {
   width: 100%;
   height: 100%;
   direction: ltr;
@@ -18,11 +24,11 @@
   user-select: none;
 }
 
-.tbf-upload-crop__stage .cropper-crop-box {
+#{ns.element-class("upload-crop", "stage")} .cropper-crop-box {
   overflow: visible;
 }
 
-.tbf-upload-crop__stage .cropper-container img {
+#{ns.element-class("upload-crop", "stage")} .cropper-container img {
   display: block;
   width: 100%;
   height: 100%;
@@ -33,21 +39,22 @@
   backface-visibility: hidden;
 }
 
-.tbf-upload-crop__stage .cropper-wrap-box,
-.tbf-upload-crop__stage .cropper-canvas {
+#{ns.element-class("upload-crop", "stage")} .cropper-wrap-box,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-canvas {
   overflow: hidden;
 }
 
-.tbf-upload-crop__stage .cropper-drag-box {
+#{ns.element-class("upload-crop", "stage")} .cropper-drag-box {
   background: #fff;
   opacity: 0;
 }
 
-.tbf-upload-crop__stage .cropper-modal {
-  background: var(--tbf-ui-upload-cropper-stage-overlay-color, rgb(0 0 0 / 72%));
+#{ns.element-class("upload-crop", "stage")} .cropper-modal {
+  background: var(#{ns.css-var("ui-upload-cropper-stage-overlay-color")}, rgb(0 0 0 / 72%));
 }
 
-.tbf-upload-crop__stage .cropper-view-box {
+#{ns.element-class("upload-crop", "stage")} .cropper-view-box {
   position: relative;
   display: block;
   width: 100%;
@@ -56,8 +63,9 @@
   outline: none;
 }
 
-.tbf-upload-crop__stage .cropper-view-box::before,
-.tbf-upload-crop__stage .cropper-view-box::after {
+#{ns.element-class("upload-crop", "stage")} .cropper-view-box::before,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-view-box::after {
   position: absolute;
   display: block;
   content: "";
@@ -65,19 +73,19 @@
   z-index: 4;
 }
 
-.tbf-upload-crop__stage .cropper-view-box::before {
+#{ns.element-class("upload-crop", "stage")} .cropper-view-box::before {
   inset: 0;
-  border: var(--tbf-ui-upload-cropper-stage-line-width, 1px) solid
-  var(--tbf-ui-upload-cropper-stage-line-contrast-color, #000);
+  border: var(#{ns.css-var("ui-upload-cropper-stage-line-width")}, 1px) solid
+  var(#{ns.css-var("ui-upload-cropper-stage-line-contrast-color")}, #000);
 }
 
-.tbf-upload-crop__stage .cropper-view-box::after {
-  inset: var(--tbf-ui-upload-cropper-stage-line-width, 1px);
-  border: var(--tbf-ui-upload-cropper-stage-line-width, 1px) solid
-  var(--tbf-ui-upload-cropper-stage-line-color, #fff);
+#{ns.element-class("upload-crop", "stage")} .cropper-view-box::after {
+  inset: var(#{ns.css-var("ui-upload-cropper-stage-line-width")}, 1px);
+  border: var(#{ns.css-var("ui-upload-cropper-stage-line-width")}, 1px) solid
+  var(#{ns.css-var("ui-upload-cropper-stage-line-color")}, #fff);
 }
 
-.tbf-upload-crop__stage .cropper-dashed {
+#{ns.element-class("upload-crop", "stage")} .cropper-dashed {
   position: absolute;
   display: block;
   border: 0;
@@ -85,61 +93,64 @@
   z-index: 3;
 }
 
-.tbf-upload-crop__stage .cropper-dashed::before,
-.tbf-upload-crop__stage .cropper-dashed::after {
+#{ns.element-class("upload-crop", "stage")} .cropper-dashed::before,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-dashed::after {
   position: absolute;
   display: block;
   content: "";
   pointer-events: none;
 }
 
-.tbf-upload-crop__stage .cropper-dashed.dashed-h {
+#{ns.element-class("upload-crop", "stage")} .cropper-dashed.dashed-h {
   top: calc(100% / 3);
   left: 0;
   width: 100%;
   height: calc(100% / 3);
 }
 
-.tbf-upload-crop__stage .cropper-dashed.dashed-h::before,
-.tbf-upload-crop__stage .cropper-dashed.dashed-h::after {
+#{ns.element-class("upload-crop", "stage")} .cropper-dashed.dashed-h::before,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-dashed.dashed-h::after {
   left: 0;
   width: 100%;
-  height: calc(var(--tbf-ui-upload-cropper-stage-guide-width, 1px) * 2);
-  background: var(--tbf-upload-cropper-guide-horizontal);
+  height: calc(var(#{ns.css-var("ui-upload-cropper-stage-guide-width")}, 1px) * 2);
+  background: var(#{ns.css-var("upload-cropper-guide-horizontal")});
 }
 
-.tbf-upload-crop__stage .cropper-dashed.dashed-h::before {
+#{ns.element-class("upload-crop", "stage")} .cropper-dashed.dashed-h::before {
   top: 0;
 }
 
-.tbf-upload-crop__stage .cropper-dashed.dashed-h::after {
+#{ns.element-class("upload-crop", "stage")} .cropper-dashed.dashed-h::after {
   bottom: 0;
 }
 
-.tbf-upload-crop__stage .cropper-dashed.dashed-v {
+#{ns.element-class("upload-crop", "stage")} .cropper-dashed.dashed-v {
   top: 0;
   left: calc(100% / 3);
   width: calc(100% / 3);
   height: 100%;
 }
 
-.tbf-upload-crop__stage .cropper-dashed.dashed-v::before,
-.tbf-upload-crop__stage .cropper-dashed.dashed-v::after {
+#{ns.element-class("upload-crop", "stage")} .cropper-dashed.dashed-v::before,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-dashed.dashed-v::after {
   top: 0;
-  width: calc(var(--tbf-ui-upload-cropper-stage-guide-width, 1px) * 2);
+  width: calc(var(#{ns.css-var("ui-upload-cropper-stage-guide-width")}, 1px) * 2);
   height: 100%;
-  background: var(--tbf-upload-cropper-guide-vertical);
+  background: var(#{ns.css-var("upload-cropper-guide-vertical")});
 }
 
-.tbf-upload-crop__stage .cropper-dashed.dashed-v::before {
+#{ns.element-class("upload-crop", "stage")} .cropper-dashed.dashed-v::before {
   left: 0;
 }
 
-.tbf-upload-crop__stage .cropper-dashed.dashed-v::after {
+#{ns.element-class("upload-crop", "stage")} .cropper-dashed.dashed-v::after {
   right: 0;
 }
 
-.tbf-upload-crop__stage .cropper-center {
+#{ns.element-class("upload-crop", "stage")} .cropper-center {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -149,133 +160,138 @@
   z-index: 3;
 }
 
-.tbf-upload-crop__stage .cropper-center::before,
-.tbf-upload-crop__stage .cropper-center::after {
+#{ns.element-class("upload-crop", "stage")} .cropper-center::before,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-center::after {
   position: absolute;
   display: block;
   content: " ";
 }
 
-.tbf-upload-crop__stage .cropper-center::before {
+#{ns.element-class("upload-crop", "stage")} .cropper-center::before {
   top: 0;
   left: -4px;
   width: 9px;
-  height: calc(var(--tbf-ui-upload-cropper-stage-guide-width, 1px) * 2);
-  background: var(--tbf-upload-cropper-guide-horizontal);
+  height: calc(var(#{ns.css-var("ui-upload-cropper-stage-guide-width")}, 1px) * 2);
+  background: var(#{ns.css-var("upload-cropper-guide-horizontal")});
 }
 
-.tbf-upload-crop__stage .cropper-center::after {
+#{ns.element-class("upload-crop", "stage")} .cropper-center::after {
   top: -4px;
   left: 0;
-  width: calc(var(--tbf-ui-upload-cropper-stage-guide-width, 1px) * 2);
+  width: calc(var(#{ns.css-var("ui-upload-cropper-stage-guide-width")}, 1px) * 2);
   height: 9px;
-  background: var(--tbf-upload-cropper-guide-vertical);
+  background: var(#{ns.css-var("upload-cropper-guide-vertical")});
 }
 
-.tbf-upload-crop__stage .cropper-face,
-.tbf-upload-crop__stage .cropper-line,
-.tbf-upload-crop__stage .cropper-point {
+#{ns.element-class("upload-crop", "stage")} .cropper-face,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-line,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-point {
   position: absolute;
   display: block;
 }
 
-.tbf-upload-crop__stage .cropper-face {
+#{ns.element-class("upload-crop", "stage")} .cropper-face {
   inset: 0;
-  background: var(--tbf-ui-upload-cropper-stage-face-color, rgb(255 255 255 / 14%));
+  background: var(#{ns.css-var("ui-upload-cropper-stage-face-color")}, rgb(255 255 255 / 14%));
   z-index: 1;
 }
 
-.tbf-upload-crop__stage .cropper-line {
+#{ns.element-class("upload-crop", "stage")} .cropper-line {
   background: transparent;
   z-index: 6;
 }
 
-.tbf-upload-crop__stage .cropper-line.line-e,
-.tbf-upload-crop__stage .cropper-line.line-w {
+#{ns.element-class("upload-crop", "stage")} .cropper-line.line-e,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-line.line-w {
   top: 0;
-  width: calc(var(--tbf-ui-upload-cropper-stage-line-width, 1px) * 2);
+  width: calc(var(#{ns.css-var("ui-upload-cropper-stage-line-width")}, 1px) * 2);
   height: 100%;
   cursor: ew-resize;
 }
 
-.tbf-upload-crop__stage .cropper-line.line-e {
-  right: calc(var(--tbf-ui-upload-cropper-stage-line-width, 1px) * -1);
+#{ns.element-class("upload-crop", "stage")} .cropper-line.line-e {
+  right: calc(var(#{ns.css-var("ui-upload-cropper-stage-line-width")}, 1px) * -1);
 }
 
-.tbf-upload-crop__stage .cropper-line.line-w {
-  left: calc(var(--tbf-ui-upload-cropper-stage-line-width, 1px) * -1);
+#{ns.element-class("upload-crop", "stage")} .cropper-line.line-w {
+  left: calc(var(#{ns.css-var("ui-upload-cropper-stage-line-width")}, 1px) * -1);
 }
 
-.tbf-upload-crop__stage .cropper-line.line-n,
-.tbf-upload-crop__stage .cropper-line.line-s {
+#{ns.element-class("upload-crop", "stage")} .cropper-line.line-n,
+
+#{ns.element-class("upload-crop", "stage")} .cropper-line.line-s {
   left: 0;
   width: 100%;
-  height: calc(var(--tbf-ui-upload-cropper-stage-line-width, 1px) * 2);
+  height: calc(var(#{ns.css-var("ui-upload-cropper-stage-line-width")}, 1px) * 2);
   cursor: ns-resize;
 }
 
-.tbf-upload-crop__stage .cropper-line.line-n {
-  top: calc(var(--tbf-ui-upload-cropper-stage-line-width, 1px) * -1);
+#{ns.element-class("upload-crop", "stage")} .cropper-line.line-n {
+  top: calc(var(#{ns.css-var("ui-upload-cropper-stage-line-width")}, 1px) * -1);
 }
 
-.tbf-upload-crop__stage .cropper-line.line-s {
-  bottom: calc(var(--tbf-ui-upload-cropper-stage-line-width, 1px) * -1);
+#{ns.element-class("upload-crop", "stage")} .cropper-line.line-s {
+  bottom: calc(var(#{ns.css-var("ui-upload-cropper-stage-line-width")}, 1px) * -1);
 }
 
-.tbf-upload-crop__stage .cropper-point {
-  width: var(--tbf-ui-upload-cropper-stage-point-size, 12px);
-  height: var(--tbf-ui-upload-cropper-stage-point-size, 12px);
+#{ns.element-class("upload-crop", "stage")} .cropper-point {
+  width: var(#{ns.css-var("ui-upload-cropper-stage-point-size")}, 12px);
+  height: var(#{ns.css-var("ui-upload-cropper-stage-point-size")}, 12px);
   margin: 0;
   border: var(
-    --tbf-ui-upload-cropper-stage-point-border,
-    var(--tbf-border-width, 1px) solid var(--tbf-text, #000)
+    #{ns.css-var("ui-upload-cropper-stage-point-border")},
+    var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("text")}, #000)
   );
-  border-radius: var(--tbf-ui-upload-cropper-stage-point-radius, var(--tbf-radius-sm, 0));
-  background: var(--tbf-ui-upload-cropper-stage-point-bg, #fff);
-  box-shadow: 0 0 0 var(--tbf-ui-upload-cropper-stage-line-width, 1px)
-  var(--tbf-ui-upload-cropper-stage-line-color, #fff);
+  border-radius: var(#{ns.css-var("ui-upload-cropper-stage-point-radius")}, var(#{ns.css-var("radius-sm")}, 0));
+  background: var(#{ns.css-var("ui-upload-cropper-stage-point-bg")}, #fff);
+  box-shadow: 0 0 0 var(#{ns.css-var("ui-upload-cropper-stage-line-width")}, 1px)
+  var(#{ns.css-var("ui-upload-cropper-stage-line-color")}, #fff);
   cursor: pointer;
-  transform: translate(var(--tbf-upload-cropper-point-x, 0), var(--tbf-upload-cropper-point-y, 0));
+  transform: translate(var(#{ns.css-var("upload-cropper-point-x")}, 0), var(#{ns.css-var("upload-cropper-point-y")}, 0));
   z-index: 5;
 }
 
-.tbf-upload-crop__stage .cropper-point:is(.point-e, .point-w) {
+#{ns.element-class("upload-crop", "stage")} .cropper-point:is(.point-e, .point-w) {
   top: 50%;
-  --tbf-upload-cropper-point-y: -50%;
+  #{ns.css-var("upload-cropper-point-y")}: -50%;
 }
 
-.tbf-upload-crop__stage .cropper-point:is(.point-n, .point-s) {
+#{ns.element-class("upload-crop", "stage")} .cropper-point:is(.point-n, .point-s) {
   left: 50%;
-  --tbf-upload-cropper-point-x: -50%;
+  #{ns.css-var("upload-cropper-point-x")}: -50%;
 }
 
-.tbf-upload-crop__stage .cropper-point:is(.point-e, .point-ne, .point-se) {
-  right: var(--tbf-ui-upload-cropper-stage-point-inset, 0);
+#{ns.element-class("upload-crop", "stage")} .cropper-point:is(.point-e, .point-ne, .point-se) {
+  right: var(#{ns.css-var("ui-upload-cropper-stage-point-inset")}, 0);
 }
 
-.tbf-upload-crop__stage .cropper-point:is(.point-w, .point-nw, .point-sw) {
-  left: var(--tbf-ui-upload-cropper-stage-point-inset, 0);
+#{ns.element-class("upload-crop", "stage")} .cropper-point:is(.point-w, .point-nw, .point-sw) {
+  left: var(#{ns.css-var("ui-upload-cropper-stage-point-inset")}, 0);
 }
 
-.tbf-upload-crop__stage .cropper-point:is(.point-n, .point-ne, .point-nw) {
-  top: var(--tbf-ui-upload-cropper-stage-point-inset, 0);
+#{ns.element-class("upload-crop", "stage")} .cropper-point:is(.point-n, .point-ne, .point-nw) {
+  top: var(#{ns.css-var("ui-upload-cropper-stage-point-inset")}, 0);
 }
 
-.tbf-upload-crop__stage .cropper-point:is(.point-s, .point-se, .point-sw) {
-  bottom: var(--tbf-ui-upload-cropper-stage-point-inset, 0);
+#{ns.element-class("upload-crop", "stage")} .cropper-point:is(.point-s, .point-se, .point-sw) {
+  bottom: var(#{ns.css-var("ui-upload-cropper-stage-point-inset")}, 0);
 }
 
-.tbf-upload-crop__stage .cropper-hidden {
+#{ns.element-class("upload-crop", "stage")} .cropper-hidden {
   display: none !important;
 }
 
-.tbf-upload-crop__stage .cropper-hide {
+#{ns.element-class("upload-crop", "stage")} .cropper-hide {
   position: absolute;
   display: block;
   width: 0;
   height: 0;
 }
 
-.tbf-upload-crop__stage .cropper-invisible {
+#{ns.element-class("upload-crop", "stage")} .cropper-invisible {
   opacity: 0;
 }

package/dist/inputs/styles/cropper.scss

@@ -1,88 +1,91 @@
-.tbf-upload-cropper-modal .tbf-modal__content,
-.tbf-upload-cropper-modal__content {
-  width: var(--tbf-ui-upload-cropper-modal-width, min(960px, calc(100vw - 40px)));
-  max-height: var(--tbf-ui-upload-cropper-modal-max-h, min(90vh, 920px));
+@use "@trebired/bundler/namespace" as ns;
+#{ns.class("upload-cropper-modal")} #{ns.element-class("modal", "content")},
+
+#{ns.element-class("upload-cropper-modal", "content")} {
+  width: var(#{ns.css-var("ui-upload-cropper-modal-width")}, min(960px, calc(100vw - 40px)));
+  max-height: var(#{ns.css-var("ui-upload-cropper-modal-max-h")}, min(90vh, 920px));
 }
 
-.tbf-upload-crop {
+#{ns.class("upload-crop")} {
   display: grid;
-  gap: var(--tbf-ui-upload-cropper-root-gap, var(--tbf-gap-md, 12px));
+  gap: var(#{ns.css-var("ui-upload-cropper-root-gap")}, var(#{ns.css-var("gap-md")}, 12px));
 }
 
-.tbf-upload-crop__header {
+#{ns.element-class("upload-crop", "header")} {
   display: grid;
-  gap: var(--tbf-ui-upload-cropper-header-gap, var(--tbf-gap-xs, 4px));
+  gap: var(#{ns.css-var("ui-upload-cropper-header-gap")}, var(#{ns.css-var("gap-xs")}, 4px));
 }
 
-.tbf-upload-crop__title,
-.tbf-upload-crop__description {
+#{ns.element-class("upload-crop", "title")},
+
+#{ns.element-class("upload-crop", "description")} {
   margin: 0;
 }
 
-.tbf-upload-crop__description {
-  color: var(--tbf-ui-upload-cropper-description-color, var(--tbf-text-muted, #000));
+#{ns.element-class("upload-crop", "description")} {
+  color: var(#{ns.css-var("ui-upload-cropper-description-color")}, var(#{ns.css-var("text-muted")}, #000));
 }
 
-.tbf-upload-crop__stage {
+#{ns.element-class("upload-crop", "stage")} {
   position: relative;
-  height: var(--tbf-ui-upload-cropper-stage-height, min(62vh, 640px));
-  min-height: var(--tbf-ui-upload-cropper-stage-min-h, 320px);
+  height: var(#{ns.css-var("ui-upload-cropper-stage-height")}, min(62vh, 640px));
+  min-height: var(#{ns.css-var("ui-upload-cropper-stage-min-h")}, 320px);
   overflow: visible;
   border: var(
-    --tbf-ui-upload-cropper-stage-border,
-    var(--tbf-border-width, 1px) solid var(--tbf-border, #000)
+    #{ns.css-var("ui-upload-cropper-stage-border")},
+    var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, #000)
   );
-  border-radius: var(--tbf-ui-upload-cropper-stage-radius, var(--tbf-radius, 0));
-  background: var(--tbf-ui-upload-cropper-stage-bg, var(--tbf-surface-muted, #fff));
-  --tbf-upload-cropper-guide-horizontal: linear-gradient(
+  border-radius: var(#{ns.css-var("ui-upload-cropper-stage-radius")}, var(#{ns.css-var("radius")}, 0));
+  background: var(#{ns.css-var("ui-upload-cropper-stage-bg")}, var(#{ns.css-var("surface-muted")}, #fff));
+  #{ns.css-var("upload-cropper-guide-horizontal")}: linear-gradient(
     to bottom,
-    var(--tbf-ui-upload-cropper-stage-line-contrast-color, #000) 0,
-    var(--tbf-ui-upload-cropper-stage-line-contrast-color, #000)
-    var(--tbf-ui-upload-cropper-stage-guide-width, 1px),
-    var(--tbf-ui-upload-cropper-stage-line-color, #fff)
-    var(--tbf-ui-upload-cropper-stage-guide-width, 1px),
-    var(--tbf-ui-upload-cropper-stage-line-color, #fff) 100%
+    var(#{ns.css-var("ui-upload-cropper-stage-line-contrast-color")}, #000) 0,
+    var(#{ns.css-var("ui-upload-cropper-stage-line-contrast-color")}, #000)
+    var(#{ns.css-var("ui-upload-cropper-stage-guide-width")}, 1px),
+    var(#{ns.css-var("ui-upload-cropper-stage-line-color")}, #fff)
+    var(#{ns.css-var("ui-upload-cropper-stage-guide-width")}, 1px),
+    var(#{ns.css-var("ui-upload-cropper-stage-line-color")}, #fff) 100%
   );
-  --tbf-upload-cropper-guide-vertical: linear-gradient(
+  #{ns.css-var("upload-cropper-guide-vertical")}: linear-gradient(
     to right,
-    var(--tbf-ui-upload-cropper-stage-line-contrast-color, #000) 0,
-    var(--tbf-ui-upload-cropper-stage-line-contrast-color, #000)
-    var(--tbf-ui-upload-cropper-stage-guide-width, 1px),
-    var(--tbf-ui-upload-cropper-stage-line-color, #fff)
-    var(--tbf-ui-upload-cropper-stage-guide-width, 1px),
-    var(--tbf-ui-upload-cropper-stage-line-color, #fff) 100%
+    var(#{ns.css-var("ui-upload-cropper-stage-line-contrast-color")}, #000) 0,
+    var(#{ns.css-var("ui-upload-cropper-stage-line-contrast-color")}, #000)
+    var(#{ns.css-var("ui-upload-cropper-stage-guide-width")}, 1px),
+    var(#{ns.css-var("ui-upload-cropper-stage-line-color")}, #fff)
+    var(#{ns.css-var("ui-upload-cropper-stage-guide-width")}, 1px),
+    var(#{ns.css-var("ui-upload-cropper-stage-line-color")}, #fff) 100%
   );
 }
 
-.tbf-upload-crop__image {
+#{ns.element-class("upload-crop", "image")} {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: contain;
 }
 
-.tbf-upload-crop__actions {
+#{ns.element-class("upload-crop", "actions")} {
   display: flex;
   justify-content: flex-end;
-  gap: var(--tbf-ui-upload-cropper-actions-gap, var(--tbf-gap-sm, 8px));
+  gap: var(#{ns.css-var("ui-upload-cropper-actions-gap")}, var(#{ns.css-var("gap-sm")}, 8px));
 }
 
 @media (max-width: 768px) {
-  .tbf-upload-cropper-modal .tbf-modal__content,
-  .tbf-upload-cropper-modal__content {
-    width: var(--tbf-ui-upload-resp-mobile-cropper-modal-width, calc(100vw - 24px));
+  #{ns.class("upload-cropper-modal")} #{ns.element-class("modal", "content")},
+  #{ns.element-class("upload-cropper-modal", "content")} {
+    width: var(#{ns.css-var("ui-upload-resp-mobile-cropper-modal-width")}, calc(100vw - 24px));
     max-height: var(
-      --tbf-ui-upload-resp-mobile-cropper-modal-max-h,
+      #{ns.css-var("ui-upload-resp-mobile-cropper-modal-max-h")},
       calc(100vh - 24px)
     );
   }
 
-  .tbf-upload-crop__stage {
-    height: var(--tbf-ui-upload-resp-mobile-cropper-stage-height, min(52vh, 420px));
-    min-height: var(--tbf-ui-upload-resp-mobile-cropper-stage-min-h, 260px);
+  #{ns.element-class("upload-crop", "stage")} {
+    height: var(#{ns.css-var("ui-upload-resp-mobile-cropper-stage-height")}, min(52vh, 420px));
+    min-height: var(#{ns.css-var("ui-upload-resp-mobile-cropper-stage-min-h")}, 260px);
   }
 
-  .tbf-upload-crop__actions {
+  #{ns.element-class("upload-crop", "actions")} {
     flex-direction: column;
   }
 }

package/dist/inputs/styles/field.scss

@@ -1,14 +1,15 @@
-.tbf-input {
+@use "@trebired/bundler/namespace" as ns;
+#{ns.class("input")} {
   min-height: 36px;
   box-sizing: border-box;
   padding: 0 10px;
-  border: var(--tbf-border-width, 1px) solid var(--tbf-border, #000);
-  border-radius: var(--tbf-radius-sm, 0);
-  color: var(--tbf-text, #000);
-  background: var(--tbf-surface, #fff);
+  border: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("border")}, #000);
+  border-radius: var(#{ns.css-var("radius-sm")}, 0);
+  color: var(#{ns.css-var("text")}, #000);
+  background: var(#{ns.css-var("surface")}, #fff);
 }
 
-.tbf-input:focus-visible {
-  outline: var(--tbf-border-width, 1px) solid var(--tbf-focus, #000);
+#{ns.class("input")}:focus-visible {
+  outline: var(#{ns.css-var("border-width")}, 1px) solid var(#{ns.css-var("focus")}, #000);
   outline-offset: 2px;
 }