@yoobic/yobi 8.1.0-110 → 8.1.0-113

package/dist/collection/feature-platform/app/widget-small-size/widget-small-size.css

@@ -0,0 +1,253 @@
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+/* Z-Index (Ionic)
+--------------------------------------------------
+Grouped by elements which would be siblings */
+/* Hairlines width */
+/* Default Colors
+---------------------------------- */
+/* Private color variables */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff;*/
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* #3880ff; */
+/* Color map should provide
+- base: main color to be used.
+- contrast: Color that will provide readable text against the base color
+- shade: 12% darker version of the base color (mix with black)
+- tint: 10% lighter version of the base color (mix with white) */
+/* Themed Colors
+
+ Default Foreground and Background Colors values
+ Allows users to override an foreground / background colors
+ $background-color-value:            $light !default;
+ $background-color-rgb:              255, 255, 255 !default; */
+/* Default Foreground and Background Colors
+-------------------------------------------------- */
+/* Default General Colors
+-------------------------------------------------- */
+/* Default List & List Items
+-------------------------------------------------- */
+/* Item Divider */
+/* iOS List & List Items
+-------------------------------------------------- */
+/* Default Toolbar
+--------------------------------------------------*/
+/* iOS Toolbar
+--------------------------------------------------*/
+/* Default Tabs & Tab bar
+--------------------------------------------------*/
+/* iOS Tabs & Tab bar
+--------------------------------------------------*/
+/* Function related variables
+--------------------------------------------------*/
+/* Gets the active color's css variable from a variation. Alpha is optional.
+--------------------------------------------------------------------------------------------
+Example usage:
+current-color(base) => var(--ion-color-base)
+current-color(contrast, 0.1) => rgba(var(--ion-color-contrast-rgb), 0.1)
+--------------------------------------------------------------------------------------------*/
+/* Gets the specific color's css variable from the name and variation. Alpha/rgb are optional.
+--------------------------------------------------------------------------------------------
+Example usage:
+ion-color(primary, base) => var(--ion-color-primary, #3880ff)
+ion-color(secondary, contrast) => var(--ion-color-secondary-contrast)
+ion-color(primary, base, 0.5) => rgba(var(--ion-color-primary-rgb, 56, 128, 255), 0.5)
+--------------------------------------------------------------------------------------------*/
+/* Mixes a color with black to create its shade.
+--------------------------------------------------------------------------------------------*/
+/*Mixes a color with white to create its tint.
+--------------------------------------------------------------------------------------------*/
+/* Converts a color to a comma separated rgb.
+--------------------------------------------------------------------------------------------*/
+/* Str functions.
+___________________________________________________________________________________________*/
+/* Creates a pulse animation.
+  @param {color} $begin-color [stable-20] - starting color for pulse.
+  @param {color} $end-color [stable-20] - ending color for pulse.
+  @author Ben Morgan
+  @author Damien Arondel 
+*/
+/* Execute a content if the hover state is supported.
+
+ @content the content to execute if relevant
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Properly hide overflow on rounded corner elements for Webkit based browsers.
+ This mixin must be used at the same level as `overflow: hidden` and `border-radius: ...`.
+
+ @link https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Truncate every overflown elements with an ellipsis.
+ This mixin does not work with flex box on the same level.
+
+ @author Ben Morgan
+ @author Damien Arondel
+*/
+/* Truncate text at a specific number of lines.
+ */
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+/* https://web-design-weekly.com/2013/05/12/handy-sass-mixins/ */
+/* Single side border-radius */
+/* Text Direction - ltr / rtl
+$app-direction: multi | rtl | ltr | null (default)
+multi: Both [dir=ltr] and [dir=rtl] are applied to css selectors.
+rtl: Always assumes rtl and only includes rtl css. No [dir] selectors.
+ltr: Always assumes ltr and only includes ltr css. No [dir] selectors.
+null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override ltr defaults.
+---------------------------------------------------------- */
+/* Add property horizontal
+ @param {string} $start
+ @param {string} $end
+----------------------------------------------------------*/
+/* Add property for all directions
+  @param {string} $prop
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+  @param {boolean} $content include content or use default
+----------------------------------------------------------*/
+/* Add margin for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/* Add padding for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/*Font smoothing
+--------------------------------------------------*/
+/* SVG Background Image Mixin
+  @param {string} $svg
+----------------------------------------------------------*/
+/* Add padding horizontal
+  @param {string} $start
+  @param {string} $end
+----------------------------------------------------------*/
+/* Add margin horizontal
+ @param {string} $start
+ @param {string} $end
+----------------------------------------------------------*/
+/* Add safe area padding horizontal
+  @param {string} $start
+  @param {string} $end
+----------------------------------------------------------*/
+/* Add border radius for all directions
+  @param {string} $top-start
+  @param {string} $top-end
+  @param {string} $bottom-end
+  @param {string} $bottom-start
+----------------------------------------------------------*/
+/* Sets correct text align with support for old browsers
+  @param {string} $direction - text direction
+  @param {string} $decorator - !important
+----------------------------------------------------------*/
+/* Add position for all directions
+  @param {string} $top
+  @param {string} $end
+  @param {string} $bottom
+  @param {string} $start
+----------------------------------------------------------*/
+/* Add position horizontal
+  @param {string} $start - amount to position start
+  @param {string} $end - amount to left: 0; end
+----------------------------------------------------------*/
+/**
+ * NOTE DO NOT USE FOR NEW COMPONENTS
+ * LEGACY CODE -- Styles maintained only to prevent breaking changes
+ * For all Font Sizes please use the appropreate font-size-XX Variables.
+ */
+/**
+* Global style mixin for being able to change the background / font-color and border-color
+* programmatically using global classes
+*/
+/* app direction */
+/* border-radius */
+/* border-width */
+/* font family */
+/* font-size */
+/* font weights */
+/* icon size */
+/* used for logos */
+/* spacing for padding, margin, etc... */
+/* shadow */
+:host {
+  --end-grid-gap: var(--spacing-08, 0.5rem);
+  --end-content-color: var(--dark, #000000);
+  --end-content-font-size: var(--font-size-48, 3rem);
+  --end-content-font-weight: var(--font-weight-900, 900);
+  --end-sub-content-color: var(--dark, #000000);
+  --end-sub-content-font-size: var(--font-size-14, 0.875rem);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+  padding: var(--spacing-16, 1rem);
+}
+:host .title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+:host .title span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+  color: var(--dark, #000000);
+  font-weight: var(--font-weight-900, 900);
+  font-size: var(--font-size-16, 1rem);
+}
+:host .title yoo-icon {
+  cursor: pointer;
+}
+:host ::slotted(.centered) {
+  display: flex;
+  justify-content: center;
+}
+:host .end {
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--end-grid-gap);
+}
+:host .end ::slotted([slot=end-content]) {
+  color: var(--end-content-color);
+  font-weight: var(--end-content-font-weight);
+  font-size: var(--end-content-font-size);
+  line-height: var(--end-content-font-size);
+}
+:host .end ::slotted([slot=end-sub-content]) {
+  color: var(--end-sub-content-color);
+  font-size: var(--end-sub-content-font-size);
+}

package/dist/collection/feature-platform/app/widget-small-size/widget-small-size.js

@@ -0,0 +1,67 @@
+import { isWeb } from '@shared/utils';
+import { Component, Element, Event, h, Host, Prop } from '@stencil/core';
+export class YooWidgetSmallSizeComponent {
+  onWidgetEdit(ev) {
+    ev.stopPropagation();
+    this.widgetEdited.emit(ev);
+  }
+  render() {
+    return h(Host, null,
+      h("div", { class: "title" },
+        h("span", null, this.name),
+        h("yoo-icon", { name: "more", size: isWeb(this.host) ? 'small' : 'medium', color: "stable", onClick: (ev) => this.onWidgetEdit(ev) })),
+      h("slot", { name: "start" }),
+      h("slot", { name: "middle" }),
+      h("div", { class: "end" },
+        h("slot", { name: "end-content" }),
+        h("slot", { name: "end-sub-content" })));
+  }
+  static get is() { return "yoo-widget-small-size"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["widget-small-size.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["widget-small-size.css"]
+  }; }
+  static get properties() { return {
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "name",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "widgetEdited",
+      "name": "widgetEdited",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "MouseEvent",
+        "resolved": "MouseEvent",
+        "references": {
+          "MouseEvent": {
+            "location": "global"
+          }
+        }
+      }
+    }]; }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/feature-platform/app/widget-tile/widget-tile.js

@@ -131,7 +131,7 @@ export class YooWidgetTileComponent {
       "mutable": false,
       "complexType": {
         "original": "TWidgetLayout",
-        "resolved": "\"layout12x12\" | \"layout12x3\" | \"layout12x6\" | \"layout4x12\" | \"layout4x3\" | \"layout4x6\" | \"layout6x12\" | \"layout6x3\" | \"layout6x6\" | \"layoutwidget\"",
+        "resolved": "\"layout12x12\" | \"layout12x3\" | \"layout12x6\" | \"layout4x12\" | \"layout4x3\" | \"layout4x6\" | \"layout6x12\" | \"layout6x3\" | \"layout6x6\" | \"layoutwidget\" | \"layoutwidget_medium\" | \"layoutwidget_small\"",
         "references": {
           "TWidgetLayout": {
             "location": "import",

package/dist/collection/feature-platform/login/login/login.css

@@ -245,6 +245,9 @@ null: CSS defaults to use the ltr css, and adds [dir=rtl] selectors to override
 :host .powered-by img {
   margin: 0 var(--spacing-04, 0.25rem);
 }
+:host .powered-by [hidden] {
+  display: none;
+}
 :host .outer-container {
   position: absolute;
   top: 0;

package/dist/collection/feature-platform/login/login/login.js

@@ -1,5 +1,5 @@
 import { ScreenOrientation } from '@ionic-native/screen-orientation';
-import { debounce, disableKeyboardResize, enableKeyboardResize, getContrastColorName, 
+import { debounce, disableKeyboardResize, enableKeyboardResize, getContrastColorName, getSession, 
 // getUserLanguageKeys,
 isAndroid, isChromatic, isIonic, isIOS, isIphone5, isIphoneSE, isIphoneX, isNativeMobile, isTablet, isWeb, LoginFocusAnimation, setStatusBarDarkMode, showActionSheet, translate } from '@shared/utils';
 import { Component, Element, Event, forceUpdate, h, Host, Method, Prop, State, Watch } from '@stencil/core';
@@ -279,6 +279,7 @@ export class YooLoginComponent {
     );
   }
   renderPoweredBy() {
+    const session = getSession();
     return (h("div", { class: {
         'powered-by': true,
         [this.hasCustomBackground() ? 'light' : getContrastColorName(this.backgroundColor)]: true
@@ -291,7 +292,7 @@ export class YooLoginComponent {
               ? '_white'
               : ''}.svg`, height: "12.8", alt: "" }),
         "YOOBIC"),
-      h("p", { class: "version", hidden: !this.version || isChromatic() },
+      h("p", { class: "version", hidden: !this.version || (session === null || session === void 0 ? void 0 : session.isStorybook) },
         "v",
         this.version)));
   }

package/dist/collection/feature-platform/menu/user-detail/user-detail.js

@@ -18,7 +18,7 @@ export class YooUserDetailComponent {
     var _a;
     if ((_a = this.courses) === null || _a === void 0 ? void 0 : _a.length) {
       const className = 'has-heading no-background';
-      return this.renderGrid(this.courses, 'card-course', 'courses', (ev) => this.onSelectCourse(ev), () => this.onSeeAllCourses(), className, true);
+      return this.renderGrid(this.courses, 'card-course', 'medium', 'courses', (ev) => this.onSelectCourse(ev), () => this.onSeeAllCourses(), className, true);
     }
     else if (this.showEmptyState) {
       return h("div", { class: "courses-empty" },
@@ -30,13 +30,14 @@ export class YooUserDetailComponent {
   renderUserBadges() {
     var _a;
     if ((_a = this.userBadges) === null || _a === void 0 ? void 0 : _a.length) {
-      return this.renderGrid(this.userBadges, 'card-sticky', 'badges', (ev) => this.onSelectBadge(ev), () => this.onSeeAllBadges(), 'has-heading', false);
+      return this.renderGrid(this.userBadges, 'card-sticky', null, 'badges', (ev) => this.onSelectBadge(ev), () => this.onSeeAllBadges(), 'has-heading', false);
     }
   }
-  renderGrid(items, displayType, entityType, itemHandler, gridHandler, extraClass, summary) {
+  renderGrid(items, displayType, displaySize, entityType, itemHandler, gridHandler, extraClass, summary) {
     if (items === null || items === void 0 ? void 0 : items.length) {
       const attrs = {
-        displayType: displayType,
+        displayType,
+        displaySize,
         direction: 'horizontal',
         profileSummary: summary,
         emptyState: entityType,

package/dist/collection/utils/helpers/annotations-helpers.js

@@ -12,6 +12,9 @@ export function isAnnotationFocused(annotation) {
   var _a;
   return !!((_a = annotation === null || annotation === void 0 ? void 0 : annotation._local) === null || _a === void 0 ? void 0 : _a.isFocusing);
 }
+export function getBound(axis) {
+  return axis === 'x' ? 'width' : 'height';
+}
 export function getElement(id, containerElement) {
   return containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector(`[id="${id}"]`);
 }
@@ -71,7 +74,7 @@ export function getAnnotationPositionStyle(annotation, imageSize) {
   const aTransform = { transform: getAnnotationTransform(annotation, 'current') };
   return Object.assign(aCoords, aTransform);
 }
-export function isElementInsideContainer(elementBounds, containerBounds) {
+export function isElementInsideContainer(elementBounds, containerBounds, acceptationThreshold = 0) {
   if (elementBounds && containerBounds) {
     const { top, left, bottom, right } = containerBounds;
     const points = [];
@@ -84,7 +87,11 @@ export function isElementInsideContainer(elementBounds, containerBounds) {
     else {
       points.push({ x: elementBounds.x, y: elementBounds.y });
     }
-    return points.every(p => (p.y >= top) && (p.y <= bottom) && (p.x >= left) && (p.x <= right));
+    return points.every(p => (p.y >= top - acceptationThreshold) && (p.y <= bottom + acceptationThreshold) && (p.x >= left - acceptationThreshold) && (p.x <= right + acceptationThreshold));
   }
   return false;
 }
+export function calcCoordPercentage(containerBR, annotationEl, axis) {
+  const annotationBR = annotationEl === null || annotationEl === void 0 ? void 0 : annotationEl.getBoundingClientRect();
+  return containerBR && annotationBR ? Math.abs(((annotationBR[axis] - containerBR[axis]) / containerBR[getBound(axis)]) * 100) : 0;
+}

package/dist/collection/utils/helpers/common-helpers.js

@@ -93,7 +93,7 @@ export function getAppContext(host) {
     }
   }
   if (!root) {
-    root = document.querySelector('app-root') || document.querySelector('yoo-app') || document.querySelector('storybook-root');
+    root = document.querySelector('app-root') || document.querySelector('yoo-app');
   }
   let classes = {};
   if (((_a = root === null || root === void 0 ? void 0 : root.classList) === null || _a === void 0 ? void 0 : _a.length) > 0) {

package/dist/design-system/{annotations-helpers-8ef22a73.js → annotations-helpers-d0cebac8.js}

@@ -12,6 +12,9 @@ function isAnnotationFocused(annotation) {
   var _a;
   return !!((_a = annotation === null || annotation === void 0 ? void 0 : annotation._local) === null || _a === void 0 ? void 0 : _a.isFocusing);
 }
+function getBound(axis) {
+  return axis === 'x' ? 'width' : 'height';
+}
 function getElement(id, containerElement) {
   return containerElement === null || containerElement === void 0 ? void 0 : containerElement.querySelector(`[id="${id}"]`);
 }
@@ -71,7 +74,7 @@ function getAnnotationPositionStyle(annotation, imageSize) {
   const aTransform = { transform: getAnnotationTransform(annotation, 'current') };
   return Object.assign(aCoords, aTransform);
 }
-function isElementInsideContainer(elementBounds, containerBounds) {
+function isElementInsideContainer(elementBounds, containerBounds, acceptationThreshold = 0) {
   if (elementBounds && containerBounds) {
     const { top, left, bottom, right } = containerBounds;
     const points = [];
@@ -84,9 +87,13 @@ function isElementInsideContainer(elementBounds, containerBounds) {
     else {
       points.push({ x: elementBounds.x, y: elementBounds.y });
     }
-    return points.every(p => (p.y >= top) && (p.y <= bottom) && (p.x >= left) && (p.x <= right));
+    return points.every(p => (p.y >= top - acceptationThreshold) && (p.y <= bottom + acceptationThreshold) && (p.x >= left - acceptationThreshold) && (p.x <= right + acceptationThreshold));
   }
   return false;
 }
+function calcCoordPercentage(containerBR, annotationEl, axis) {
+  const annotationBR = annotationEl === null || annotationEl === void 0 ? void 0 : annotationEl.getBoundingClientRect();
+  return containerBR && annotationBR ? Math.abs(((annotationBR[axis] - containerBR[axis]) / containerBR[getBound(axis)]) * 100) : 0;
+}
 
-export { isAnnotationValid as a, getElement as b, getAnnotationPositionStyle as c, isAnnotationDeleted as d, getPointerCoordinates as e, getPhotoSVG as f, getPercentPositionStyle as g, isElementInsideContainer as h, isAnnotationEmpty as i, isAnnotationFocused as j };
+export { isElementInsideContainer as a, isAnnotationValid as b, calcCoordPercentage as c, getElement as d, getAnnotationPositionStyle as e, getBound as f, getPercentPositionStyle as g, isAnnotationDeleted as h, isAnnotationEmpty as i, getPointerCoordinates as j, getPhotoSVG as k, isAnnotationFocused as l };

package/dist/{esm/camera-helpers-b856909c.js → design-system/camera-helpers-55e2c849.js}

@@ -1,4 +1,4 @@
-import { c6 as cordova, c7 as IonicNativePlugin, ci as cordovaPropertyGet, cj as cordovaPropertySet, ck as registerPlugin, _ as getSession, cl as isIonic, d as isNativeMobile, cm as Device, e as isAndroid, v as isIOS, cn as getMediaDevices, n as showModal, m as getModalAnimation, o as isWeb } from './index-979657d3.js';
+import { c3 as cordova, c4 as IonicNativePlugin, cf as cordovaPropertyGet, cg as cordovaPropertySet, ch as registerPlugin, _ as getSession, ci as isIonic, d as isNativeMobile, cj as Device, e as isAndroid, v as isIOS, ck as getMediaDevices, n as showModal, m as getModalAnimation, o as isWeb } from './index-3cdbfc76.js';
 
 var __extends$2 = (undefined && undefined.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -205,7 +205,7 @@ var CameraResultType;
 })(CameraResultType || (CameraResultType = {}));
 
 const Camera = registerPlugin('Camera', {
-    web: () => import('./web-d7b7c1a6.js').then(m => new m.CameraWeb()),
+    web: () => import('./web-0d4299df.js').then(m => new m.CameraWeb()),
 });
 
 var __extends = (undefined && undefined.__extends) || (function () {

package/dist/design-system/{chat-helpers-ae07928e.js → chat-helpers-644c8d46.js}

@@ -1,4 +1,4 @@
-import { al as is24Hour, am as isFile, n as showModal, o as isWeb } from './index-979657d3.js';
+import { al as is24Hour, am as isFile, n as showModal, o as isWeb } from './index-3cdbfc76.js';
 import { a as isArray } from './lodash-eb23e844.js';
 
 /**

package/dist/{esm/common-helpers-bfd5c70f.js → design-system/common-helpers-db77a2c0.js}

@@ -1,4 +1,4 @@
-import { m as getModalAnimation, t as translate, n as showModal, o as isWeb, p as debounce, q as querySelectorDeep$1, d as isNativeMobile, S as ScreenOrientation, r as findParent, u as isIphoneX, f as isIpadPro, j as isTablet, c as isFullScreenFalse, v as isIOS, e as isAndroid, w as setAnimation, x as animations, y as getCssColor, Y as YOOBICON_ENTITIES_MAP, z as startOf, A as isDateBefore, B as dateDiffInCalendarDays, D as isDateAfter, E as getAsyncExtraData, F as isNativeFilePath, G as cleanupWKWebViewFilePath, k as Cloudinary, H as getProtocol, C as CloudinaryGradientLayer } from './index-979657d3.js';
+import { m as getModalAnimation, t as translate, n as showModal, o as isWeb, p as debounce, q as querySelectorDeep$1, d as isNativeMobile, S as ScreenOrientation, r as findParent, u as isIphoneX, f as isIpadPro, j as isTablet, c as isFullScreenFalse, v as isIOS, e as isAndroid, w as setAnimation, x as animations, y as getCssColor, Y as YOOBICON_ENTITIES_MAP, z as startOf, A as isDateBefore, B as dateDiffInCalendarDays, D as isDateAfter, E as getAsyncExtraData, F as isNativeFilePath, G as cleanupWKWebViewFilePath, k as Cloudinary, H as getProtocol, C as CloudinaryGradientLayer } from './index-3cdbfc76.js';
 import { A as get } from './lodash-eb23e844.js';
 
 function getDefaultModalAnimation() {
@@ -93,7 +93,7 @@ function getAppContext(host) {
     }
   }
   if (!root) {
-    root = document.querySelector('app-root') || document.querySelector('yoo-app') || document.querySelector('storybook-root');
+    root = document.querySelector('app-root') || document.querySelector('yoo-app');
   }
   let classes = {};
   if (((_a = root === null || root === void 0 ? void 0 : root.classList) === null || _a === void 0 ? void 0 : _a.length) > 0) {

package/dist/design-system/design-system.css

@@ -8465,6 +8465,8 @@ span.fr-img-caption.fr-view {
 
 .royal-theme.fr-box.fr-basic .fr-element {
   color: var(--dark, #000000);
+  font-size: var(--font-size-16, 1rem);
+  font-family: "Lato";
 }
 
 .royal-theme.fr-toolbar {
@@ -8513,7 +8515,7 @@ span.fr-img-caption.fr-view {
   width: auto;
   padding: 0 4px;
   color: #808080;
-  font-size: 11px;
+  font-size: var(--font-size-12, 0.75rem);
 }
 
 .fr-line-breaker {