@kubit-ui-web/react-components 2.0.0-beta.4 → 2.0.0-beta.40

package/dist/cjs/components/popover/styles/keyframes.css

@@ -1,421 +0,0 @@
-/**
- * CSS animations for popover positioning
- * Each animation corresponds to a specific body position from positionStyles.ts
- */
-
-/* ========================================
-   CENTER POSITION ANIMATIONS
-   ======================================== */
-
-/* Center position - scales from center */
-@keyframes popover-enter-center {
-  from {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.8);
-  }
-  to {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-}
-
-@keyframes popover-exit-center {
-  from {
-    opacity: 1;
-    transform: translate(-50%, -50%) scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: translate(-50%, -50%) scale(0.8);
-  }
-}
-
-/* ========================================
-   TOP POSITION ANIMATIONS
-   ======================================== */
-
-/* Top center - slides down and fades in */
-@keyframes popover-enter-top {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
-@keyframes popover-exit-top {
-  from {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-20px);
-  }
-}
-
-/* Top start (left) - slides down only (same as top) */
-@keyframes popover-enter-top-start {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes popover-exit-top-start {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-}
-
-/* Top end (right) - slides down only (same as top) */
-@keyframes popover-enter-top-end {
-  from {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes popover-exit-top-end {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-20px);
-  }
-}
-
-/* ========================================
-   BOTTOM POSITION ANIMATIONS
-   ======================================== */
-
-/* Bottom center - slides up and fades in */
-@keyframes popover-enter-bottom {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-}
-
-@keyframes popover-exit-bottom {
-  from {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-50%) translateY(20px);
-  }
-}
-
-/* Bottom start (left) - slides up only (same as bottom) */
-@keyframes popover-enter-bottom-start {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes popover-exit-bottom-start {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-}
-
-/* Bottom end (right) - slides up only (same as bottom) */
-@keyframes popover-enter-bottom-end {
-  from {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes popover-exit-bottom-end {
-  from {
-    opacity: 1;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(20px);
-  }
-}
-
-/* ========================================
-   LEFT POSITION ANIMATIONS
-   ======================================== */
-
-/* Left center - slides right and fades in */
-@keyframes popover-enter-left {
-  from {
-    opacity: 0;
-    transform: translateY(-50%) translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(-50%) translateX(0);
-  }
-}
-
-@keyframes popover-exit-left {
-  from {
-    opacity: 1;
-    transform: translateY(-50%) translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-50%) translateX(-20px);
-  }
-}
-
-/* Left start (top) - slides right only (same as left) */
-@keyframes popover-enter-left-start {
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes popover-exit-left-start {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-}
-
-/* Left end (bottom) - slides right only (same as left) */
-@keyframes popover-enter-left-end {
-  from {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes popover-exit-left-end {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(-20px);
-  }
-}
-
-/* ========================================
-   RIGHT POSITION ANIMATIONS
-   ======================================== */
-
-/* Right center - slides left and fades in */
-@keyframes popover-enter-right {
-  from {
-    opacity: 0;
-    transform: translateY(-50%) translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(-50%) translateX(0);
-  }
-}
-
-@keyframes popover-exit-right {
-  from {
-    opacity: 1;
-    transform: translateY(-50%) translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateY(-50%) translateX(20px);
-  }
-}
-
-/* Right start (top) - slides left only (same as right) */
-@keyframes popover-enter-right-start {
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes popover-exit-right-start {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-}
-
-/* Right end (bottom) - slides left only (same as right) */
-@keyframes popover-enter-right-end {
-  from {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@keyframes popover-exit-right-end {
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
-  to {
-    opacity: 0;
-    transform: translateX(20px);
-  }
-}
-
-/* ========================================
-   NOTE: No default animation needed
-   ======================================== */
-/* When no placement is specified, center animation is used as fallback */
-
-/* ========================================
-   UTILITY CLASSES FOR APPLYING ANIMATIONS
-   ======================================== */
-
-/* Animation duration and timing */
-.popover-animate {
-  animation-duration: 200ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  animation-fill-mode: forwards;
-}
-
-/* Enter animations by position */
-.popover-enter-center {
-  animation-name: popover-enter-center;
-}
-.popover-enter-top {
-  animation-name: popover-enter-top;
-}
-.popover-enter-top-start {
-  animation-name: popover-enter-top-start;
-}
-.popover-enter-top-end {
-  animation-name: popover-enter-top-end;
-}
-.popover-enter-bottom {
-  animation-name: popover-enter-bottom;
-}
-.popover-enter-bottom-start {
-  animation-name: popover-enter-bottom-start;
-}
-.popover-enter-bottom-end {
-  animation-name: popover-enter-bottom-end;
-}
-.popover-enter-left {
-  animation-name: popover-enter-left;
-}
-.popover-enter-left-start {
-  animation-name: popover-enter-left-start;
-}
-.popover-enter-left-end {
-  animation-name: popover-enter-left-end;
-}
-.popover-enter-right {
-  animation-name: popover-enter-right;
-}
-.popover-enter-right-start {
-  animation-name: popover-enter-right-start;
-}
-.popover-enter-right-end {
-  animation-name: popover-enter-right-end;
-}
-
-/* Exit animations by position */
-.popover-exit-center {
-  animation-name: popover-exit-center;
-}
-.popover-exit-top {
-  animation-name: popover-exit-top;
-}
-.popover-exit-top-start {
-  animation-name: popover-exit-top-start;
-}
-.popover-exit-top-end {
-  animation-name: popover-exit-top-end;
-}
-.popover-exit-bottom {
-  animation-name: popover-exit-bottom;
-}
-.popover-exit-bottom-start {
-  animation-name: popover-exit-bottom-start;
-}
-.popover-exit-bottom-end {
-  animation-name: popover-exit-bottom-end;
-}
-.popover-exit-left {
-  animation-name: popover-exit-left;
-}
-.popover-exit-left-start {
-  animation-name: popover-exit-left-start;
-}
-.popover-exit-left-end {
-  animation-name: popover-exit-left-end;
-}
-.popover-exit-right {
-  animation-name: popover-exit-right;
-}
-.popover-exit-right-start {
-  animation-name: popover-exit-right-start;
-}
-.popover-exit-right-end {
-  animation-name: popover-exit-right-end;
-}

package/dist/cjs/components/popover/styles/popover-arrow.css

@@ -1,42 +0,0 @@
-/* ============================================= */
-/* PopoverV2 Arrow Styles */
-/* ============================================= */
-
-/* Arrow base styles */
-[data-kbt-id='popover-arrow'] {
-  position: absolute;
-  transform: rotate(45deg);
-  z-index: -1;
-}
-
-/* Arrow positioning based on placement */
-[data-kbt-id='popover-arrow'][data-kbt-placement^='top'] {
-  bottom: calc(-1 * var(--arrow-size, 8px) / 2);
-  left: 50%;
-  transform: translateX(-50%) rotate(45deg);
-}
-
-[data-kbt-id='popover-arrow'][data-kbt-placement^='bottom'] {
-  top: calc(-1 * var(--arrow-size, 8px) / 2);
-  left: 50%;
-  transform: translateX(-50%) rotate(45deg);
-}
-
-[data-kbt-id='popover-arrow'][data-kbt-placement^='left'] {
-  right: calc(-1 * var(--arrow-size, 8px) / 2);
-  top: 50%;
-  transform: translateY(-50%) rotate(45deg);
-}
-
-[data-kbt-id='popover-arrow'][data-kbt-placement^='right'] {
-  left: calc(-1 * var(--arrow-size, 8px) / 2);
-  top: 50%;
-  transform: translateY(-50%) rotate(45deg);
-}
-
-/* Center placement arrow - default to bottom position */
-[data-kbt-id='popover-arrow'][data-kbt-placement='center'] {
-  top: calc(-1 * var(--arrow-size, 8px) / 2);
-  left: 50%;
-  transform: translateX(-50%) rotate(45deg);
-}

package/dist/cjs/components/popover/styles/popover.css

@@ -1,189 +0,0 @@
-/**
- * PopoverV2 Main Styles
- * Contains animation logic and positioning styles
- */
-
-/* Import all animation keyframes */
-@import './keyframes.css';
-
-/* Popover Animation Styles */
-/* ============================================= */
-
-/* Base animation properties - ALWAYS applied (even with disableAnimations=true) */
-/* This allows additionalClasses to work properly */
-[data-kbt-id='popover'][data-kbt-placement] {
-  animation-duration: 500ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  animation-fill-mode: forwards;
-  animation-iteration-count: 1;
-}
-
-/* Opening animations based on placement - ONLY when animations are enabled */
-[data-kbt-id='popover'][data-kbt-closing='false']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  --animation-prefix: 'popover-enter-';
-}
-
-[data-kbt-id='popover'][data-kbt-placement='center'][data-kbt-closing='false']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-enter-center;
-}
-
-[data-kbt-id='popover'][data-kbt-placement^='top'][data-kbt-closing='false']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: var(--animation-name, popover-enter-top);
-}
-
-[data-kbt-id='popover'][data-kbt-placement='top-start'][data-kbt-closing='false']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-enter-top-start;
-}
-
-[data-kbt-id='popover'][data-kbt-placement='top-end'][data-kbt-closing='false']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-enter-top-end;
-}
-
-[data-kbt-id='popover'][data-kbt-placement^='bottom'][data-kbt-closing='false']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: var(--animation-name, popover-enter-bottom);
-}
-
-[data-kbt-id='popover'][data-kbt-placement='bottom-start'][data-kbt-closing='false']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-enter-bottom-start;
-}
-
-[data-kbt-id='popover'][data-kbt-placement='bottom-end'][data-kbt-closing='false']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-enter-bottom-end;
-}
-
-[data-kbt-id='popover'][data-kbt-placement^='left'][data-kbt-closing='false']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: var(--animation-name, popover-enter-left);
-}
-
-[data-kbt-id='popover'][data-kbt-placement='left-start'][data-kbt-closing='false']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-enter-left-start;
-}
-
-[data-kbt-id='popover'][data-kbt-placement='left-end'][data-kbt-closing='false']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-enter-left-end;
-}
-
-[data-kbt-id='popover'][data-kbt-placement^='right'][data-kbt-closing='false']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: var(--animation-name, popover-enter-right);
-}
-
-[data-kbt-id='popover'][data-kbt-placement='right-start'][data-kbt-closing='false']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-enter-right-start;
-}
-
-[data-kbt-id='popover'][data-kbt-placement='right-end'][data-kbt-closing='false']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-enter-right-end;
-}
-
-/* Closing animations based on placement - ONLY when animations are enabled */
-[data-kbt-id='popover'][data-kbt-closing='true']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  --animation-prefix: 'popover-exit-';
-}
-
-[data-kbt-id='popover'][data-kbt-placement='center'][data-kbt-closing='true']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-exit-center;
-}
-
-[data-kbt-id='popover'][data-kbt-placement^='top'][data-kbt-closing='true']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: var(--exit-animation-name, popover-exit-top);
-}
-
-[data-kbt-id='popover'][data-kbt-placement='top-start'][data-kbt-closing='true']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-exit-top-start;
-}
-
-[data-kbt-id='popover'][data-kbt-placement='top-end'][data-kbt-closing='true']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-exit-top-end;
-}
-
-[data-kbt-id='popover'][data-kbt-placement^='bottom'][data-kbt-closing='true']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: var(--exit-animation-name, popover-exit-bottom);
-}
-
-[data-kbt-id='popover'][data-kbt-placement='bottom-start'][data-kbt-closing='true']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-exit-bottom-start;
-}
-
-[data-kbt-id='popover'][data-kbt-placement='bottom-end'][data-kbt-closing='true']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-exit-bottom-end;
-}
-
-[data-kbt-id='popover'][data-kbt-placement^='left'][data-kbt-closing='true']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: var(--exit-animation-name, popover-exit-left);
-}
-
-[data-kbt-id='popover'][data-kbt-placement='left-start'][data-kbt-closing='true']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-exit-left-start;
-}
-
-[data-kbt-id='popover'][data-kbt-placement='left-end'][data-kbt-closing='true']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-exit-left-end;
-}
-
-[data-kbt-id='popover'][data-kbt-placement^='right'][data-kbt-closing='true']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: var(--exit-animation-name, popover-exit-right);
-}
-
-[data-kbt-id='popover'][data-kbt-placement='right-start'][data-kbt-closing='true']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-exit-right-start;
-}
-
-[data-kbt-id='popover'][data-kbt-placement='right-end'][data-kbt-closing='true']:not(
-    [data-kbt-disable-animations='true']
-  ) {
-  animation-name: popover-exit-right-end;
-}

package/dist/cjs/components/selectorBoxFile/components/selectorBoxFileErrorMessage.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../../_virtual/jsx-runtime.js"),s=require("../../text/text.js"),r=require("../../../lib/components/elementOrIcon/elementOrIcon.js"),t=require("../../../lib/types/states/states.js"),o=require("../../../lib/utils/process/processText/processText.js");exports.SelectorBoxFileErrorMessage=({cssClasses:i,errorMessage:a,errorMessageIcon:l,errorMessageId:n,state:x})=>e.jsxRuntimeExports.jsx("div",{"aria-live":"polite",children:o.processText(a)&&x===t.STATES.ERROR?e.jsxRuntimeExports.jsxs("div",{className:i?.errormessagecontainer,id:n,children:[e.jsxRuntimeExports.jsx(r.ElementOrIcon,{className:i?.errormessageicon,...l}),e.jsxRuntimeExports.jsx(s.Text,{additionalClasses:{text:i?.errormessage},...o.processText(a)})]}):null});

package/dist/cjs/components/selectorBoxFile/components/selectorBoxFileHeader.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("../../../_virtual/jsx-runtime.js"),e=require("../../button/button.js"),s=require("../../text/text.js"),i=require("../../../lib/components/renderIf/renderIf.js"),o=require("../../../lib/utils/process/processText/processText.js"),n=require("./selectorBoxFileTooltip.js");exports.SelectorBoxFileHeader=({button:r,cssClasses:x,description:l,headerId:a,subtitle:d,title:c,tooltip:u,tooltipIcon:j})=>t.jsxRuntimeExports.jsxs(t.jsxRuntimeExports.Fragment,{children:[t.jsxRuntimeExports.jsxs("div",{className:x?.titlesubtitlecontainer,id:a,children:[t.jsxRuntimeExports.jsx(i.RenderIf,{condition:!!c,children:t.jsxRuntimeExports.jsx(s.Text,{additionalClasses:{text:x?.title},component:"h5",...o.processText(c)})}),t.jsxRuntimeExports.jsx(i.RenderIf,{condition:!!d,children:t.jsxRuntimeExports.jsxs("div",{className:x?.actiondescriptioncontainer,children:[t.jsxRuntimeExports.jsx(s.Text,{additionalClasses:{text:x?.subtitle},...o.processText(d)}),t.jsxRuntimeExports.jsx(n.SelectorBoxFileTooltip,{cssClasses:x,tooltip:u,tooltipIcon:j})]})})]}),t.jsxRuntimeExports.jsx(i.RenderIf,{condition:!(!l&&!r),children:t.jsxRuntimeExports.jsxs("div",{className:x?.descriptioncontainer,children:[t.jsxRuntimeExports.jsx(s.Text,{additionalClasses:{text:x?.description},...o.processText(l)}),t.jsxRuntimeExports.jsx(i.RenderIf,{condition:!(!x?.button_variant&&!r?.size||!x?.button_size&&!r?.variant),children:t.jsxRuntimeExports.jsx(e.Button,{additionalSizeClasses:r?.variant?void 0:x?.button_size,additionalVariantClasses:r?.size?void 0:x?.button_variant,size:r?.size,variant:r?.variant,...r,children:r?.content})})]})})]});

package/dist/cjs/components/selectorBoxFile/components/selectorBoxFileTooltip.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../../_virtual/jsx-runtime.js"),t=require("../../tooltip/tooltipUnControlled.js"),e=require("../../../lib/components/elementOrIcon/elementOrIcon.js");exports.SelectorBoxFileTooltip=({cssClasses:i,tooltip:n,tooltipIcon:s})=>{if(!s?.icon)return null;const l=o.jsxRuntimeExports.jsx(e.ElementOrIcon,{className:i?.tooltipicon,...s});return n?o.jsxRuntimeExports.jsx("div",{className:i?.tooltipiconcontainer,children:o.jsxRuntimeExports.jsx(t.TooltipUnControlled,{additionalClasses:i?.tooltip,...n,children:l})}):o.jsxRuntimeExports.jsx("div",{className:i?.tooltipiconcontainer,children:l})};

package/dist/cjs/components/skeleton/skeleton.css

@@ -1,20 +0,0 @@
-@keyframes breatheAnimation {
-  from {
-    background-position-x: 0%;
-  }
-
-  to {
-    background-position-x: -200%;
-  }
-}
-
-.kbt-skeleton {
-  width: var(--skeleton-width, 100%);
-  height: var(--skeleton-height, 20px);
-  animation-name: breatheAnimation;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
-  animation-duration: var(--skeleton-duration, 2s);
-  animation-delay: 1ms;
-  background-size: 200% 100%;
-}

package/dist/cjs/components/skeleton/skeleton.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../_virtual/jsx-runtime.js"),s=require("react"),a=require("../../lib/hooks/useClassName/useClassName.js"),t=require("./skeletonStandAlone.js"),r=s.forwardRef(({additionalClasses:s,additionalShapeClasses:r,shapeVariant:n,variant:o,...i},l)=>{const u=a.useClassName({component:"SKELETON",variant:o}),p=a.useClassName({component:"SKELETON",variant:n});return e.jsxRuntimeExports.jsx(t.SkeletonStandAlone,{...i,ref:l,cssClasses:u,cssShapeClasses:p,shapeVariant:o})});exports.Skeleton=r;

package/dist/cjs/components/table/__stories__/css/table.css

@@ -1,7 +0,0 @@
-.scrollablecontainer-max-height {
-  max-height: 200px;
-}
-
-.container-over-width {
-  width: 120% !important;
-}

package/dist/cjs/components/text/text.css

@@ -1,14 +0,0 @@
-.kbt-text {
-  -webkit-text-size-adjust: 100%;
-  text-size-adjust: 100%;
-}
-
-.kbt-text--disabled {
-  pointer-events: none;
-}
-
-.kbt-text--truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}