@enact/limestone 1.10.1 → 1.10.2

package/Spinner/Spinner.d.ts

@@ -1,6 +1,6 @@
 // Type definitions for limestone/Spinner
 
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import { SpinnerBaseProps as ui_Spinner_SpinnerBaseProps } from "@enact/ui/Spinner";
 import * as React from "react";
 

package/Spinner/Spinner.module.css

@@ -52,7 +52,7 @@
   }
 }
 .spinner {
-  line-height: 1.4em;
+  line-height: 1.34em;
   vertical-align: middle;
 }
 .spinner .bg {
@@ -126,7 +126,7 @@
   align-content: center;
   height: 2.75rem;
   font-weight: var(--primitive-font-weight-semibold);
-  line-height: 1.4em;
+  line-height: 1.34em;
   max-width: 14.5rem;
 }
 :global(.enact-locale-non-latin) .spinner .client {

package/Steps/Steps.d.ts

@@ -1,6 +1,6 @@
 // Type definitions for limestone/Steps
 
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 import * as React from "react";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

package/Steps/Steps.js

@@ -255,14 +255,20 @@ var StepsBase = exports.StepsBase = (0, _kind["default"])({
           children: children
         };
       });
+    },
+    className: function className(_ref4) {
+      var _className = _ref4.className,
+        css = _ref4.css,
+        highlightCurrentOnly = _ref4.highlightCurrentOnly;
+      return (0, _classnames["default"])(_className, _defineProperty({}, css.highlightCurrentOnly, highlightCurrentOnly));
     }
   },
-  render: function render(_ref4) {
-    var css = _ref4.css,
-      iconComponent = _ref4.iconComponent,
-      size = _ref4.size,
-      steps = _ref4.steps,
-      rest = _objectWithoutProperties(_ref4, _excluded2);
+  render: function render(_ref5) {
+    var css = _ref5.css,
+      iconComponent = _ref5.iconComponent,
+      size = _ref5.size,
+      steps = _ref5.steps,
+      rest = _objectWithoutProperties(_ref5, _excluded2);
     delete rest.current;
     delete rest.currentIcon;
     delete rest.futureIcon;

package/Steps/Steps.module.css

@@ -17,16 +17,30 @@
 .steps .step.future {
   opacity: 1;
 }
+.steps.highlightCurrentOnly {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--primitive-spacing-24);
+  margin-top: var(--primitive-spacing-30);
+}
 .steps .pageIndicator {
   width: 0.375rem;
   height: 0.375rem;
-  margin: 0 var(--primitive-spacing-12);
+  margin: 0;
   border-radius: var(--semantic-radius-full);
 }
 .steps .pageIndicator.current {
   width: 0.5rem;
   height: 0.5rem;
-  margin: 0 var(--primitive-spacing-6);
+}
+.steps:global(.largeText) .pageIndicator {
+  width: calc(0.375rem * 1.2);
+  height: calc(0.375rem * 1.2);
+}
+.steps:global(.largeText) .pageIndicator.current {
+  width: calc(0.5rem * 1.2);
+  height: calc(0.5rem * 1.2);
 }
 .steps:global(.neutral) .step:not(.pageIndicator).past {
   color: var(--semantic-color-on-background-main);

package/Switch/Switch.module.css

@@ -34,8 +34,8 @@ Animations properties
   --lime-bounce-motion-easing-function: var(--lime-default-motion-easing-function);
   --lime-focus-in-motion-easing-function: var(--lime-EIO-motion-easing-function);
   --lime-focus-out-motion-easing-function: var(--lime-EO-motion-easing-function);
-  --lime-press-motion-easing-function: var(--lime-EIO-motion-easing-function);
-  --lime-release-motion-easing-function: var(--lime-EO-motion-easing-function);
+  --lime-press-motion-easing-function: var(--lime-EO-motion-easing-function);
+  --lime-release-motion-easing-function: var(--lime-EIO-motion-easing-function);
   /* ---------------------------------------
 	Keyframes names
 	------------------------------------------ */
@@ -76,9 +76,6 @@ Keyframes
   }
 }
 /* ---------------------------------------
-Motion Variables
------------------------------------------- */
-/* ---------------------------------------
 Motion Mixins
 ------------------------------------------ */
 .switch {

package/SwitchItem/SwitchItem.d.ts

@@ -1,7 +1,7 @@
 // Type definitions for limestone/SwitchItem
 
 import { ToggleableProps as ui_Toggleable_ToggleableProps } from "@enact/ui/Toggleable";
-import { ItemProps as limestone_Item_ItemProps } from "limestone/Item";
+import { ItemProps as limestone_Item_ItemProps } from "@enact/limestone/Item";
 import * as React from "react";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

package/TabLayout/RefocusDecorator.js

@@ -40,7 +40,7 @@ var getNavigableFilter = exports.getNavigableFilter = function getNavigableFilte
 };
 function useScreenOrientation() {
   var getOrientation = function getOrientation() {
-    return window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
+    return typeof window === 'object' && window.innerWidth > window.innerHeight ? 'landscape' : 'portrait';
   };
   var _useState = (0, _react.useState)(getOrientation()),
     _useState2 = _slicedToArray(_useState, 2),

package/TabLayout/TabGroup.module.css

@@ -22,6 +22,10 @@
   height: 2rem;
   line-height: 1.25rem;
 }
+.tab.horizontal.button.small:global(.largeText) {
+  font-size: var(--primitive-font-size-58);
+  line-height: 1.45833rem;
+}
 .tab.vertical.button {
   height: 3.25rem;
   padding: var(--primitive-spacing-36) var(--primitive-spacing-48);
@@ -111,9 +115,16 @@
   display: flex;
 }
 .tabGroup.horizontal {
+  border-radius: var(--primitive-radius-44);
   margin-left: calc((1 - var(--scrollable)) * var(--offset));
   padding: var(--primitive-spacing-12);
 }
+.tabGroup.horizontal.scrollable {
+  border-radius: 0;
+}
+.tabGroup.horizontal.scrollable .tabs {
+  padding: 0 var(--primitive-spacing-132);
+}
 .tabGroup.horizontal:not(.scrollable) {
   width: var(--tabs-width);
 }
@@ -122,6 +133,7 @@
   width: calc(var(--tabs-width) - var(--scrollable) * var(--offset) * 2);
 }
 .tabGroup.vertical {
+  border-radius: var(--semantic-radius-container);
   padding: var(--primitive-spacing-36);
 }
 .tabGroup.vertical.scrollable {
@@ -141,7 +153,6 @@
 }
 :global(.neutral) .tabGroup {
   background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
-  border-radius: var(--semantic-radius-container);
 }
 :global(.neutral) .tabGroup > :first-child {
   background: transparent;
@@ -162,7 +173,6 @@
 }
 :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup {
   background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
-  border-radius: var(--semantic-radius-container);
 }
 :global(.enact-a11y-high-contrast) :global(.neutral):global(.highContrast) .tabGroup > :first-child {
   background: transparent;
@@ -183,7 +193,6 @@
 }
 :global(.light) .tabGroup {
   background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
-  border-radius: var(--semantic-radius-container);
 }
 :global(.light) .tabGroup > :first-child {
   background: transparent;
@@ -209,7 +218,6 @@
 }
 :global(.game) .tabGroup {
   background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
-  border-radius: var(--semantic-radius-container);
 }
 :global(.game) .tabGroup > :first-child {
   background: transparent;
@@ -234,7 +242,6 @@
 }
 :global(.green) :global(.game) .tabGroup {
   background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
-  border-radius: var(--semantic-radius-container);
 }
 :global(.green) :global(.game) .tabGroup > :first-child {
   background: transparent;
@@ -259,7 +266,6 @@
 }
 :global(.orange) :global(.game) .tabGroup {
   background-color: color(from var(--semantic-color-surface-default-group) srgb r g b / 0.1);
-  border-radius: var(--semantic-radius-container);
 }
 :global(.orange) :global(.game) .tabGroup > :first-child {
   background: transparent;

package/TabLayout/TabLayout.js

@@ -55,6 +55,8 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
  * @exports Tab
  */
 var MAX_TABS_BEFORE_VERTICAL_SCROLLING = 8;
+var MAX_TABS_BEFORE_HORIZONTAL_SCROLLING = 6;
+var MAX_TABS_BEFORE_HORIZONTAL_SCROLLING_SMALL = 7;
 var TAB_SPACING = 48;
 var TabLayoutContext = exports.TabLayoutContext = /*#__PURE__*/(0, _react.createContext)(null);
 var TouchableCell = (0, _Touchable["default"])(_Layout.Cell);
@@ -81,6 +83,8 @@ var getHorizontalTabWidth = function getHorizontalTabWidth(dataSize, size, tabSi
 };
 var isHorizontalScrollableTabs = function isHorizontalScrollableTabs(dataSize, offset, size, tabSize) {
   var _window;
+  if (size === 'large' && dataSize > MAX_TABS_BEFORE_HORIZONTAL_SCROLLING) return true;
+  if (size === 'small' && dataSize > MAX_TABS_BEFORE_HORIZONTAL_SCROLLING_SMALL) return true;
   var totalTabsWidth = dataSize * getHorizontalTabWidth(dataSize, size, tabSize) + TAB_SPACING * (dataSize - 1) + 2 * offset;
   return typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.innerWidth ? window.innerWidth < _resolution["default"].scale(totalTabsWidth) : false;
 };

package/ThemeDecorator/ThemeDecorator.d.ts

@@ -3,7 +3,7 @@
 import { FloatingLayerDecoratorProps as ui_FloatingLayer_FloatingLayerDecoratorProps } from "@enact/ui/FloatingLayer";
 import { ResolutionDecoratorProps as ui_resolution_ResolutionDecoratorProps } from "@enact/ui/resolution";
 import { SpotlightRootDecoratorProps as spotlight_SpotlightRootDecorator_SpotlightRootDecoratorProps } from "@enact/spotlight/SpotlightRootDecorator";
-import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "limestone/Skinnable";
+import { SkinnableProps as limestone_Skinnable_SkinnableProps } from "@enact/limestone/Skinnable";
 
 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;

package/ThemeDecorator/ThemeDecorator.module.css

@@ -268,6 +268,27 @@
   src: local("LG Smart UI NUMBER Bold"), local("LGSmartUINUMBER-Bold");
   font-weight: 700;
 }
+/* -----  Limestone Title ------ */
+@font-face {
+  font-family: "Limestone Title";
+  src: local("LGSmart UI 3.0 Title Regular"), local("LGSmartUI3.0Title-Regular"), local("LGSmart UI 3.0 Title");
+  font-weight: normal;
+}
+@font-face {
+  font-family: "Limestone Title";
+  src: local("LGSmart UI 3.0 Title Light"), local("LGSmartUI3.0Title-Light");
+  font-weight: normal;
+}
+@font-face {
+  font-family: "Limestone Title";
+  src: local("LGSmart UI 3.0 Title SemiBold"), local("LGSmartUI3.0Title-SemiBold");
+  font-weight: normal;
+}
+@font-face {
+  font-family: "Limestone Title";
+  src: local("LGSmart UI 3.0 Title Bold"), local("LGSmartUI3.0Title-Bold");
+  font-weight: normal;
+}
 /* ----- Manual Limestone Locale Fonts (Stacking onto "Limestone") ------ */
 @font-face {
   font-family: "Limestone";
@@ -1171,7 +1192,7 @@
 .root {
   font-family: "Limestone";
   font-size: var(--primitive-font-size-60);
-  line-height: 1.4em;
+  line-height: 1.34em;
   font-weight: normal;
   font-style: normal;
   letter-spacing: normal;

package/TooltipDecorator/Tooltip.js

@@ -8,12 +8,13 @@ exports.defaultArrowAnchor = defaultArrowAnchor;
 exports.defaultDirection = defaultDirection;
 var _propTypes = _interopRequireDefault(require("@enact/core/internal/prop-types"));
 var _kind = _interopRequireDefault(require("@enact/core/kind"));
+var _usePublicClassNames = require("@enact/core/usePublicClassNames");
 var _propTypes2 = _interopRequireDefault(require("prop-types"));
 var _Skinnable = _interopRequireDefault(require("../Skinnable"));
 var _TooltipLabel = _interopRequireDefault(require("./TooltipLabel"));
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["arrowAnchor", "children", "css", "tooltipRef", "width", "labelOffset", "marquee"];
+var _excluded = ["arrowAnchor", "children", "css", "tooltipImage", "noArrow", "tooltipCss", "tooltipImageSize", "tooltipRef", "width", "labelOffset", "marquee"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
@@ -111,6 +112,13 @@ var TooltipBase = exports.TooltipBase = (0, _kind["default"])({
      * @public
      */
     marquee: _propTypes2["default"].bool,
+    /**
+     * `Tooltip` without the arrow.
+     *
+     * @type {Boolean}
+     * @public
+     */
+    noArrow: _propTypes2["default"].bool,
     /**
      * Style object for tooltip position.
      *
@@ -134,6 +142,41 @@ var TooltipBase = exports.TooltipBase = (0, _kind["default"])({
      * @public
      */
     relative: _propTypes2["default"].bool,
+    /**
+     * Customizes the component by mapping the supplied collection of CSS class names to the
+     * corresponding internal elements and states of this component.
+     *
+     * The following classes are supported:
+     *
+     * * `tooltip` - The root class name
+     *
+     * @type {Object}
+     * @public
+     */
+    tooltipCss: _propTypes2["default"].object,
+    /**
+     * Source for the image.
+     * String value or Object of values used to determine which image will appear on
+     * a specific screenSize.
+     *
+     * @type {String|Object}
+     * @public
+     */
+    tooltipImage: _propTypes2["default"].oneOfType([_propTypes2["default"].string, _propTypes2["default"].object]),
+    /**
+     * The size of the image.
+     *
+     * The following properties should be provided:
+     * * `height` - The height of the image
+     * * `width` - The width of the image
+     *
+     * @type {Object}
+     * @public
+     */
+    tooltipImageSize: _propTypes2["default"].shape({
+      height: _propTypes2["default"].number,
+      width: _propTypes2["default"].number
+    }),
     /**
      * Called when the tooltip mounts/unmounts, giving a reference to the DOM.
      *
@@ -172,6 +215,7 @@ var TooltipBase = exports.TooltipBase = (0, _kind["default"])({
     width: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string])
   },
   defaultProps: {
+    tooltipCss: {},
     type: 'balloon',
     labelOffset: 0
   },
@@ -193,12 +237,15 @@ var TooltipBase = exports.TooltipBase = (0, _kind["default"])({
     className: function className(_ref2) {
       var direction = _ref2.direction,
         arrowAnchor = _ref2.arrowAnchor,
+        noArrow = _ref2.noArrow,
         relative = _ref2.relative,
+        tooltipCss = _ref2.tooltipCss,
         type = _ref2.type,
         styler = _ref2.styler;
-      return styler.append(direction || defaultDirection(type), "".concat(arrowAnchor || defaultArrowAnchor(type), "Arrow"), {
+      return styler.append(direction || defaultDirection(type), "".concat(arrowAnchor || defaultArrowAnchor(type), "Arrow"), tooltipCss.tooltip, {
         relative: relative,
-        absolute: !relative
+        absolute: !relative,
+        noArrow: noArrow
       }, type);
     },
     style: function style(_ref3) {
@@ -211,6 +258,10 @@ var TooltipBase = exports.TooltipBase = (0, _kind["default"])({
     var arrowAnchor = _ref4.arrowAnchor,
       children = _ref4.children,
       css = _ref4.css,
+      tooltipImage = _ref4.tooltipImage,
+      noArrow = _ref4.noArrow,
+      tooltipCss = _ref4.tooltipCss,
+      tooltipImageSize = _ref4.tooltipImageSize,
       tooltipRef = _ref4.tooltipRef,
       width = _ref4.width,
       labelOffset = _ref4.labelOffset,
@@ -221,18 +272,28 @@ var TooltipBase = exports.TooltipBase = (0, _kind["default"])({
     delete rest.position;
     delete rest.relative;
     delete rest.type;
+
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    var mergedCss = (0, _usePublicClassNames.usePublicClassNames)({
+      componentCss: css,
+      customCss: tooltipCss,
+      publicClassNames: true
+    });
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, rest), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: css.tooltipAnchor,
+        className: mergedCss.tooltipAnchor,
         ref: tooltipRef,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: css.tooltipArrow
+        children: [!noArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: mergedCss.tooltipArrow
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipLabel["default"], {
-          className: css.tooltipLabel,
+          className: mergedCss.tooltipLabel,
+          tooltipImage: tooltipImage,
           marquee: marquee,
+          noArrow: noArrow,
           centered: arrowAnchor === 'center',
           width: width,
           style: labelOffset,
+          tooltipImageSize: tooltipImageSize,
           children: children
         })]
       })

package/TooltipDecorator/Tooltip.module.css

@@ -37,7 +37,7 @@
   line-height: 1.5rem;
   white-space: nowrap;
   width: var(--lime-tooltip-label-width);
-  max-width: 25rem;
+  max-width: var(--lime-tooltip-label-width, 25rem);
   padding: var(--primitive-spacing-12) var(--primitive-spacing-48);
   border-radius: var(--semantic-radius-button);
 }
@@ -53,6 +53,19 @@
 :global(.enact-locale-right-to-left) .tooltip .tooltipLabel {
   text-align: right;
 }
+.tooltip .tooltipLabel .tooltipImage {
+  margin: 0;
+  border-radius: var(--semantic-radius-button);
+  width: var(--lime-tooltip-image-width, 20rem);
+  height: var(--lime-tooltip-image-height, 11.25rem);
+}
+.tooltip .tooltipLabel.image {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--semantic-radius-container);
+  gap: var(--primitive-spacing-36);
+  padding: var(--primitive-spacing-60);
+}
 .tooltip .tooltipLabel.marquee {
   max-width: var(--lime-tooltip-label-width, 12.5rem);
 }
@@ -105,6 +118,8 @@
 }
 .tooltip.below.leftArrow .tooltipLabel {
   text-align: right;
+}
+.tooltip.below.leftArrow .tooltipLabel:not(.noArrow) {
   border-top-right-radius: 0;
 }
 .tooltip.below.centerArrow .tooltipArrow {
@@ -124,7 +139,7 @@
   transform-origin: top left;
   transform: rotate(45deg) skew(45deg, 0);
 }
-.tooltip.below.rightArrow .tooltipLabel {
+.tooltip.below.rightArrow .tooltipLabel:not(.noArrow) {
   border-top-left-radius: 0;
 }
 .tooltip.above .tooltipArrow {
@@ -144,6 +159,8 @@
 }
 .tooltip.above.leftArrow .tooltipLabel {
   text-align: right;
+}
+.tooltip.above.leftArrow .tooltipLabel:not(.noArrow) {
   border-bottom-right-radius: 0;
 }
 .tooltip.above.centerArrow .tooltipArrow::after {
@@ -160,7 +177,7 @@
   transform-origin: bottom left;
   transform: rotate(-45deg) skew(-45deg, 0);
 }
-.tooltip.above.rightArrow .tooltipLabel {
+.tooltip.above.rightArrow .tooltipLabel:not(.noArrow) {
   border-bottom-left-radius: 0;
 }
 .tooltip.left .tooltipArrow {
@@ -178,7 +195,7 @@
   transform-origin: bottom right;
   transform: rotate(-45deg) skew(0, 45deg);
 }
-.tooltip.left.topArrow .tooltipLabel {
+.tooltip.left.topArrow .tooltipLabel:not(.noArrow) {
   border-bottom-right-radius: 0;
 }
 .tooltip.left.middleArrow .tooltipArrow::after {
@@ -194,7 +211,7 @@
   transform-origin: top right;
   transform: rotate(45deg) skew(0, -45deg);
 }
-.tooltip.left.bottomArrow .tooltipLabel {
+.tooltip.left.bottomArrow .tooltipLabel:not(.noArrow) {
   border-top-right-radius: 0;
 }
 .tooltip.right .tooltipArrow {
@@ -212,7 +229,7 @@
   transform-origin: bottom left;
   transform: rotate(45deg) skew(0, -45deg);
 }
-.tooltip.right.topArrow .tooltipLabel {
+.tooltip.right.topArrow .tooltipLabel:not(.noArrow) {
   border-bottom-left-radius: 0;
 }
 .tooltip.right.middleArrow .tooltipArrow::after {
@@ -228,7 +245,7 @@
   transform-origin: top left;
   transform: rotate(-45deg) skew(0, 45deg);
 }
-.tooltip.right.bottomArrow .tooltipLabel {
+.tooltip.right.bottomArrow .tooltipLabel:not(.noArrow) {
   border-top-left-radius: 0;
 }
 .tooltip.absolute {
@@ -241,10 +258,10 @@
   position: absolute;
 }
 .tooltip.absolute.below {
-  top: calc(var(--tooltip-position-top) + var(--primitive-spacing-24) );
+  top: calc(var(--tooltip-position-top) +  var(--primitive-spacing-24) );
 }
 .tooltip.absolute.below.transparent {
-  top: calc(var(--tooltip-position-top) + 0rem );
+  top: calc(var(--tooltip-position-top) +  0rem );
 }
 .tooltip.absolute.below.leftArrow .tooltipAnchor {
   transform: translateX(-100%);
@@ -256,10 +273,10 @@
   /* transform: translate(0, 0); */
 }
 .tooltip.absolute.above {
-  top: calc(var(--tooltip-position-top) - var(--primitive-spacing-24) );
+  top: calc(var(--tooltip-position-top) -  var(--primitive-spacing-24) );
 }
 .tooltip.absolute.above.transparent {
-  top: calc(var(--tooltip-position-top) - 0rem );
+  top: calc(var(--tooltip-position-top) -  0rem );
 }
 .tooltip.absolute.above.leftArrow .tooltipAnchor {
   transform: translate(-100%, -100%);
@@ -271,10 +288,10 @@
   transform: translate(0, -100%);
 }
 .tooltip.absolute.left {
-  left: calc(var(--tooltip-position-left) - var(--primitive-spacing-24) );
+  left: calc(var(--tooltip-position-left) -  var(--primitive-spacing-24) );
 }
 .tooltip.absolute.left.transparent {
-  left: calc(var(--tooltip-position-left) - 0rem );
+  left: calc(var(--tooltip-position-left) -  0rem );
 }
 .tooltip.absolute.left.topArrow .tooltipAnchor {
   transform: translate(-100%, -100%);
@@ -286,10 +303,10 @@
   transform: translate(-100%, 0);
 }
 .tooltip.absolute.right {
-  left: calc(var(--tooltip-position-left) + var(--primitive-spacing-24) );
+  left: calc(var(--tooltip-position-left) +  var(--primitive-spacing-24) );
 }
 .tooltip.absolute.right.transparent {
-  left: calc(var(--tooltip-position-left) + 0rem );
+  left: calc(var(--tooltip-position-left) +  0rem );
 }
 .tooltip.absolute.right.topArrow .tooltipAnchor {
   transform: translate(0, -100%);
@@ -301,10 +318,10 @@
   /* transform: translate(0, 0); */
 }
 .tooltip.relative.below {
-  top: calc(100% + var(--primitive-spacing-24) );
+  top: calc(100% +  var(--primitive-spacing-24) );
 }
 .tooltip.relative.below.transparent {
-  top: calc(100% + 0rem );
+  top: calc(100% +  0rem );
 }
 .tooltip.relative.below.leftArrow {
   right: 50%;
@@ -317,10 +334,10 @@
   transform: translateX(-50%);
 }
 .tooltip.relative.above {
-  bottom: calc(100% + var(--primitive-spacing-24) );
+  bottom: calc(100% +  var(--primitive-spacing-24) );
 }
 .tooltip.relative.above.transparent {
-  bottom: calc(100% + 0rem );
+  bottom: calc(100% +  0rem );
 }
 .tooltip.relative.above.leftArrow {
   right: 50%;
@@ -333,10 +350,10 @@
   transform: translateX(-50%);
 }
 .tooltip.relative.left {
-  right: calc(100% + var(--primitive-spacing-24) );
+  right: calc(100% +  var(--primitive-spacing-24) );
 }
 .tooltip.relative.left.transparent {
-  right: calc(100% + 0rem );
+  right: calc(100% +  0rem );
 }
 .tooltip.relative.left.topArrow {
   bottom: 50%;
@@ -349,10 +366,10 @@
   transform: translateY(-50%);
 }
 .tooltip.relative.right {
-  left: calc(100% + var(--primitive-spacing-24) );
+  left: calc(100% +  var(--primitive-spacing-24) );
 }
 .tooltip.relative.right.transparent {
-  left: calc(100% + 0rem );
+  left: calc(100% +  0rem );
 }
 .tooltip.relative.right.topArrow {
   bottom: 50%;