@salutejs/plasma-core 1.226.1-next-sbcom.0 → 1.227.0-dev.0

package/es/components/Typography/Headline.js

@@ -1,75 +1,75 @@
 import styled from 'styled-components';
 import { headline1, headline2, headline3, headline4 } from '../../tokens';
 import { applyHyphens, applySpacing } from '../../mixins';
-export var Headline1 = styled.div.withConfig({
+export const Headline1 = styled.div.withConfig({
     displayName: "Headline__Headline1",
     componentId: "sc-ae2aff6b-0"
 })([
-    "",
-    " ",
-    " ",
-    ""
+    ``,
+    ` `,
+    ` `,
+    ``
 ], applyHyphens, applySpacing, headline1);
-export var Headline2 = styled.div.withConfig({
+export const Headline2 = styled.div.withConfig({
     displayName: "Headline__Headline2",
     componentId: "sc-ae2aff6b-1"
 })([
-    "",
-    " ",
-    " ",
-    ""
+    ``,
+    ` `,
+    ` `,
+    ``
 ], applyHyphens, applySpacing, headline2);
-export var Headline3 = styled.div.withConfig({
+export const Headline3 = styled.div.withConfig({
     displayName: "Headline__Headline3",
     componentId: "sc-ae2aff6b-2"
 })([
-    "",
-    " ",
-    " ",
-    ""
+    ``,
+    ` `,
+    ` `,
+    ``
 ], applyHyphens, applySpacing, headline3);
-export var Headline4 = styled.div.withConfig({
+export const Headline4 = styled.div.withConfig({
     displayName: "Headline__Headline4",
     componentId: "sc-ae2aff6b-3"
 })([
-    "",
-    " ",
-    " ",
-    ""
+    ``,
+    ` `,
+    ` `,
+    ``
 ], applyHyphens, applySpacing, headline4);
-export var H1 = styled.h1.withConfig({
+export const H1 = styled.h1.withConfig({
     displayName: "Headline__H1",
     componentId: "sc-ae2aff6b-4"
 })([
-    "margin:0;",
-    " ",
-    " ",
-    ""
+    `margin:0;`,
+    ` `,
+    ` `,
+    ``
 ], applyHyphens, applySpacing, headline1);
-export var H2 = styled.h2.withConfig({
+export const H2 = styled.h2.withConfig({
     displayName: "Headline__H2",
     componentId: "sc-ae2aff6b-5"
 })([
-    "margin:0;",
-    " ",
-    " ",
-    ""
+    `margin:0;`,
+    ` `,
+    ` `,
+    ``
 ], applyHyphens, applySpacing, headline2);
-export var H3 = styled.h3.withConfig({
+export const H3 = styled.h3.withConfig({
     displayName: "Headline__H3",
     componentId: "sc-ae2aff6b-6"
 })([
-    "margin:0;",
-    " ",
-    " ",
-    ""
+    `margin:0;`,
+    ` `,
+    ` `,
+    ``
 ], applyHyphens, applySpacing, headline3);
-export var H4 = styled.h4.withConfig({
+export const H4 = styled.h4.withConfig({
     displayName: "Headline__H4",
     componentId: "sc-ae2aff6b-7"
 })([
-    "margin:0;",
-    " ",
-    " ",
-    ""
+    `margin:0;`,
+    ` `,
+    ` `,
+    ``
 ], applyHyphens, applySpacing, headline4);

package/es/components/Typography/Paragraph.js

@@ -1,40 +1,40 @@
 import styled from 'styled-components';
 import { paragraph1, paragraph2 } from '../../tokens';
 import { applyHyphens, applySpacing } from '../../mixins';
-export var ParagraphText1 = styled.div.withConfig({
+export const ParagraphText1 = styled.div.withConfig({
     displayName: "Paragraph__ParagraphText1",
     componentId: "sc-96b4c682-0"
 })([
-    "",
-    " ",
-    " ",
-    ""
+    ``,
+    ` `,
+    ` `,
+    ``
 ], applyHyphens, applySpacing, paragraph1);
-export var ParagraphText2 = styled.div.withConfig({
+export const ParagraphText2 = styled.div.withConfig({
     displayName: "Paragraph__ParagraphText2",
     componentId: "sc-96b4c682-1"
 })([
-    "",
-    " ",
-    " ",
-    ""
+    ``,
+    ` `,
+    ` `,
+    ``
 ], applyHyphens, applySpacing, paragraph2);
-export var P1 = styled.p.withConfig({
+export const P1 = styled.p.withConfig({
     displayName: "Paragraph__P1",
     componentId: "sc-96b4c682-2"
 })([
-    "",
-    " ",
-    " ",
-    " margin:0;"
+    ``,
+    ` `,
+    ` `,
+    ` margin:0;`
 ], applyHyphens, applySpacing, paragraph1);
-export var P = P1;
-export var P2 = styled.p.withConfig({
+export const P = P1;
+export const P2 = styled.p.withConfig({
     displayName: "Paragraph__P2",
     componentId: "sc-96b4c682-3"
 })([
-    "",
-    " ",
-    " ",
-    " margin:0;"
+    ``,
+    ` `,
+    ` `,
+    ` margin:0;`
 ], applyHyphens, applySpacing, paragraph2);

package/es/components/Typography/Underline.js

@@ -1,12 +1,12 @@
 import styled from 'styled-components';
 import { underline } from '../../tokens';
 import { applyHyphens, applySpacing } from '../../mixins';
-export var Underline = styled.div.withConfig({
+export const Underline = styled.div.withConfig({
     displayName: "Underline",
     componentId: "sc-7613e3f0-0"
 })([
-    "",
-    " ",
-    " ",
-    " text-transform:uppercase;"
+    ``,
+    ` `,
+    ` `,
+    ` text-transform:uppercase;`
 ], applyHyphens, applySpacing, underline);

package/es/hocs/withAutoFocus.js

@@ -1,86 +1,16 @@
-function _define_property(obj, key, value) {
-    if (key in obj) {
-        Object.defineProperty(obj, key, {
-            value: value,
-            enumerable: true,
-            configurable: true,
-            writable: true
-        });
-    } else {
-        obj[key] = value;
-    }
-    return obj;
-}
-function _object_spread(target) {
-    for(var i = 1; i < arguments.length; i++){
-        var source = arguments[i] != null ? arguments[i] : {};
-        var ownKeys = Object.keys(source);
-        if (typeof Object.getOwnPropertySymbols === "function") {
-            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
-                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
-            }));
-        }
-        ownKeys.forEach(function(key) {
-            _define_property(target, key, source[key]);
-        });
-    }
-    return target;
-}
-function _object_without_properties(source, excluded) {
-    if (source == null) return {};
-    var target = {}, sourceKeys, key, i;
-    if (typeof Reflect !== "undefined" && Reflect.ownKeys) {
-        sourceKeys = Reflect.ownKeys(source);
-        for(i = 0; i < sourceKeys.length; i++){
-            key = sourceKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-        return target;
-    }
-    target = _object_without_properties_loose(source, excluded);
-    if (Object.getOwnPropertySymbols) {
-        sourceKeys = Object.getOwnPropertySymbols(source);
-        for(i = 0; i < sourceKeys.length; i++){
-            key = sourceKeys[i];
-            if (excluded.indexOf(key) >= 0) continue;
-            if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-            target[key] = source[key];
-        }
-    }
-    return target;
-}
-function _object_without_properties_loose(source, excluded) {
-    if (source == null) return {};
-    var target = {}, sourceKeys = Object.getOwnPropertyNames(source), key, i;
-    for(i = 0; i < sourceKeys.length; i++){
-        key = sourceKeys[i];
-        if (excluded.indexOf(key) >= 0) continue;
-        if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
-        target[key] = source[key];
-    }
-    return target;
-}
 import React, { useEffect, useRef } from 'react';
-export var withAutoFocus = function withAutoFocus(Component) {
-    return function(_0) {
-        var autoFocus = _0.autoFocus, _0_tabIndex = _0.tabIndex, tabIndex = _0_tabIndex === void 0 ? -1 : _0_tabIndex, _0_preventScroll = _0.preventScroll, preventScroll = _0_preventScroll === void 0 ? true : _0_preventScroll, props = _object_without_properties(_0, [
-            "autoFocus",
-            "tabIndex",
-            "preventScroll"
-        ]);
-        var divRef = useRef(null);
-        useEffect(function() {
+export const withAutoFocus = (Component)=>({ autoFocus, tabIndex = -1, preventScroll = true, ...props })=>{
+        const divRef = useRef(null);
+        useEffect(()=>{
             if (autoFocus && divRef.current) {
                 divRef.current.focus({
-                    preventScroll: preventScroll
+                    preventScroll
                 });
             }
         });
-        return /*#__PURE__*/ React.createElement(Component, _object_spread({
+        return /*#__PURE__*/ React.createElement(Component, {
             tabIndex: tabIndex,
-            ref: divRef
-        }, props));
+            ref: divRef,
+            ...props
+        });
     };
-};

package/es/hocs/withSkeleton.js

@@ -4,17 +4,12 @@ import { applySkeletonGradient } from '../mixins';
 /**
  * Делает компонент скелетоном - у него заменяется фоновый цвет,
  * добавляется градиент и текст становится на 100% прозрачным.
- */ export var withSkeleton = function withSkeleton(Component) {
-    return styled(Component).withConfig({
+ */ export const withSkeleton = (Component)=>styled(Component).withConfig({
         displayName: "withSkeleton",
         componentId: "sc-764f817c-0"
     })([
-        "",
-        ""
-    ], function(param) {
-        var skeleton = param.skeleton;
-        return skeleton && applySkeletonGradient({
+        ``,
+        ``
+    ], ({ skeleton })=>skeleton && applySkeletonGradient({
             lighter: true
-        });
-    });
-};
+        }));

package/es/hooks/useDebouncedFunction.js

@@ -1,28 +1,3 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_without_holes(arr) {
-    if (Array.isArray(arr)) return _array_like_to_array(arr);
-}
-function _iterable_to_array(iter) {
-    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
-}
-function _non_iterable_spread() {
-    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _to_consumable_array(arr) {
-    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
 import React from 'react';
 /**
  * @param {Function} func
@@ -30,7 +5,7 @@ import React from 'react';
  * @param {boolean} cleanUp
  * https://habr.com/ru/company/domclick/blog/510616/
  */ export function useDebouncedFunction(func, delay, cleanUp) {
-    var timeoutRef = React.useRef();
+    const timeoutRef = React.useRef();
     /**
      * Очистка таймера
      */ function clearTimer() {
@@ -42,18 +17,11 @@ import React from 'react';
     /**
      * Очищаем таймер при анмаунте компонента, если cleanUp выставлен в true
      * и тем самым отменяем последний запланированный вызов
-     */ React.useEffect(function() {
-        return cleanUp ? clearTimer : undefined;
-    }, [
+     */ React.useEffect(()=>cleanUp ? clearTimer : undefined, [
         cleanUp
     ]);
-    return function() {
-        for(var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++){
-            args[_key] = arguments[_key];
-        }
+    return (...args)=>{
         clearTimer();
-        timeoutRef.current = setTimeout(function() {
-            return func.apply(void 0, _to_consumable_array(args));
-        }, delay);
+        timeoutRef.current = setTimeout(()=>func(...args), delay);
     };
 }

package/es/hooks/useFocusTrap.js

@@ -3,8 +3,8 @@ import { FocusManager } from '../utils/focusManager';
 import { focusSelector, isFocusable, isTabble } from '../utils/tabbable';
 import { scopeTab } from '../utils/scopeTab';
 // Находим элемент для фокуса
-var getFocusElement = function getFocusElement(node, firstFocusSelector) {
-    var focusElement = null;
+const getFocusElement = (node, firstFocusSelector)=>{
+    let focusElement = null;
     if (firstFocusSelector) {
         if (typeof firstFocusSelector === 'string') {
             focusElement = node.querySelector(firstFocusSelector);
@@ -13,10 +13,8 @@ var getFocusElement = function getFocusElement(node, firstFocusSelector) {
         }
     }
     if (!focusElement) {
-        var children = Array.from(node.querySelectorAll(focusSelector));
-        focusElement = children.find(function(el) {
-            return isTabble(el);
-        }) || null;
+        const children = Array.from(node.querySelectorAll(focusSelector));
+        focusElement = children.find((el)=>isTabble(el)) || null;
     }
     // Если ничего не нашлось, то может ли сама нода быть под фокусом
     if (!focusElement && isFocusable(node)) {
@@ -24,24 +22,23 @@ var getFocusElement = function getFocusElement(node, firstFocusSelector) {
     }
     return focusElement;
 };
-var processNode = function processNode1(node, firstFocusSelector, ref) {
-    if (ref === null || ref === void 0 ? void 0 : ref.current) {
-        ref.current.removeEventListener('animationend', function() {
+const processNode = (node, firstFocusSelector, ref)=>{
+    if (ref?.current) {
+        ref.current.removeEventListener('animationend', ()=>{
             processNode(node, firstFocusSelector, ref);
         });
     }
-    var focusElement = getFocusElement(node, firstFocusSelector);
+    const focusElement = getFocusElement(node, firstFocusSelector);
     if (focusElement) {
         focusElement.focus();
     }
 };
-var focusManager = new FocusManager();
+const focusManager = new FocusManager();
 /**
  *  Захватывает фокус внутри DOM node.
- * */ export var useFocusTrap = function useFocusTrap() {
-    var active = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : true, firstFocusSelector = arguments.length > 1 ? arguments[1] : void 0, focusAfterNode = arguments.length > 2 ? arguments[2] : void 0, focusAfterAnimation = arguments.length > 3 ? arguments[3] : void 0;
-    var ref = useRef();
-    var setRef = useCallback(function(node) {
+ * */ export const useFocusTrap = (active = true, firstFocusSelector, focusAfterNode, focusAfterAnimation)=>{
+    const ref = useRef();
+    const setRef = useCallback((node)=>{
         if (ref.current) {
             focusManager.teardownScopedFocus();
             focusManager.returnFocus();
@@ -50,9 +47,9 @@ var focusManager = new FocusManager();
             focusManager.setupScopedFocus(node);
             focusManager.markForFocusAfter(focusAfterNode);
             // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
-            setTimeout(function() {
-                if ((ref === null || ref === void 0 ? void 0 : ref.current) && node.ownerDocument && focusAfterAnimation) {
-                    ref.current.addEventListener('animationend', function() {
+            setTimeout(()=>{
+                if (ref?.current && node.ownerDocument && focusAfterAnimation) {
+                    ref.current.addEventListener('animationend', ()=>{
                         processNode(node, firstFocusSelector, ref);
                     });
                 } else if (node.ownerDocument) {
@@ -67,17 +64,17 @@ var focusManager = new FocusManager();
         active,
         firstFocusSelector
     ]);
-    useEffect(function() {
+    useEffect(()=>{
         if (!active) {
             return;
         }
-        var handleKeyDown = function handleKeyDown(event) {
+        const handleKeyDown = (event)=>{
             if (event.key === 'Tab' && ref.current) {
                 scopeTab(ref.current, event);
             }
         };
         document.addEventListener('keydown', handleKeyDown);
-        return function() {
+        return ()=>{
             document.removeEventListener('keydown', handleKeyDown);
         };
     }, [

package/es/hooks/useForkRef.js

@@ -5,12 +5,12 @@ import { setRef } from '../utils';
  * @param {React.Ref<T>} refOne
  * @param {React.Ref<T>} refTwo
  * @return {Function React.Ref}
- */ export var useForkRef = function useForkRef(refOne, refTwo) {
-    return React.useMemo(function() {
+ */ export const useForkRef = (refOne, refTwo)=>{
+    return React.useMemo(()=>{
         if (refOne == null && refTwo === null) {
             return null;
         }
-        return function(refOb) {
+        return (refOb)=>{
             setRef(refOne, refOb);
             setRef(refTwo, refOb);
         };

package/es/hooks/useIsomorphicLayoutEffect.js

@@ -2,4 +2,4 @@ import { useLayoutEffect, useEffect } from 'react';
 import { canUseDOM } from '../utils';
 /**
  * Runs effect safely on server.
- */ export var useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
+ */ export const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;

package/es/hooks/useResizeObserver.js

@@ -4,20 +4,20 @@ import { useEffect } from 'react';
  * @param {React.Ref<T>} ref - реф элемента, за которым нужно следить
  * @callback callback - функция, которая вызывается при изменении элемента
  * @param {Element} element - элемент, размер которого изменился
- */ export var useResizeObserver = function useResizeObserver(ref, callback) {
-    useEffect(function() {
-        /* istanbul ignore if: убираем проверку на рефы из покрытия */ if (!(ref === null || ref === void 0 ? void 0 : ref.current)) {
+ */ export const useResizeObserver = (ref, callback)=>{
+    useEffect(()=>{
+        /* istanbul ignore if: убираем проверку на рефы из покрытия */ if (!ref?.current) {
             return;
         }
-        var current = ref.current;
-        var resizeObserver = new window.ResizeObserver(function() {
-            window.requestAnimationFrame(function() {
+        const { current } = ref;
+        const resizeObserver = new window.ResizeObserver(()=>{
+            window.requestAnimationFrame(()=>{
                 callback(current);
             });
         });
         resizeObserver.observe(ref.current);
-        return function() {
-            /* istanbul ignore if: убираем проверку на рефы из покрытия */ if (!(ref === null || ref === void 0 ? void 0 : ref.current)) {
+        return ()=>{
+            /* istanbul ignore if: убираем проверку на рефы из покрытия */ if (!ref?.current) {
                 return;
             }
             resizeObserver.unobserve(ref.current);

package/es/hooks/useUniqId.js

@@ -1,59 +1,13 @@
-function _array_like_to_array(arr, len) {
-    if (len == null || len > arr.length) len = arr.length;
-    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
-    return arr2;
-}
-function _array_with_holes(arr) {
-    if (Array.isArray(arr)) return arr;
-}
-function _iterable_to_array_limit(arr, i) {
-    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
-    if (_i == null) return;
-    var _arr = [];
-    var _n = true;
-    var _d = false;
-    var _s, _e;
-    try {
-        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
-            _arr.push(_s.value);
-            if (i && _arr.length === i) break;
-        }
-    } catch (err) {
-        _d = true;
-        _e = err;
-    } finally{
-        try {
-            if (!_n && _i["return"] != null) _i["return"]();
-        } finally{
-            if (_d) throw _e;
-        }
-    }
-    return _arr;
-}
-function _non_iterable_rest() {
-    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-function _sliced_to_array(arr, i) {
-    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
-}
-function _unsupported_iterable_to_array(o, minLen) {
-    if (!o) return;
-    if (typeof o === "string") return _array_like_to_array(o, minLen);
-    var n = Object.prototype.toString.call(o).slice(8, -1);
-    if (n === "Object" && o.constructor) n = o.constructor.name;
-    if (n === "Map" || n === "Set") return Array.from(n);
-    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
-}
 import { useState, useContext } from 'react';
 import { SSRContext } from '../components/SSRProvider';
-var noSSRId = 0;
+let noSSRId = 0;
 export function useUniqId() {
-    var context = useContext(SSRContext);
-    var _useState = _sliced_to_array(useState(function() {
+    const context = useContext(SSRContext);
+    const [id] = useState(()=>{
         if (context.uniqId !== null) {
-            return "plasma-uniq-id-ssr-".concat(++context.uniqId);
+            return `plasma-uniq-id-ssr-${++context.uniqId}`;
         }
-        return "plasma-uniq-id-".concat(++noSSRId);
-    }), 1), id = _useState[0];
+        return `plasma-uniq-id-${++noSSRId}`;
+    });
     return id;
 }

package/es/mixins/addFocus.js

@@ -1,13 +1,11 @@
 import { css } from 'styled-components';
 import { buttonFocused } from '../tokens';
 import 'focus-visible';
-export var syntheticFocus = function syntheticFocus(ruleset, focused) {
-    return css([
-        "&.focus-visible:focus,&[data-focus-visible-added]{outline:none;",
-        "}",
-        ";"
+export const syntheticFocus = (ruleset, focused)=>css([
+        `&.focus-visible:focus,&[data-focus-visible-added]{outline:none;`,
+        `}`,
+        `;`
     ], ruleset, focused && ruleset);
-};
 /**
  * Миксин для добавления фокусной рамки к элементу через псевдоэлемент before
  * @param {FocusProps} props
@@ -27,21 +25,18 @@ export var syntheticFocus = function syntheticFocus(ruleset, focused) {
  *  outlineRadius: '10em 1em',
  *  outlineColor: 'greenyellow',
  * });
- */ export var addFocus = function addFocus(param) {
-    var lowPerformance = param.lowPerformance, focused = param.focused, _param_outlined = param.outlined, outlined = _param_outlined === void 0 ? true : _param_outlined, _param_outlineSize = param.outlineSize, outlineSize = _param_outlineSize === void 0 ? '0.125rem' : _param_outlineSize, _param_outlineOffset = param.outlineOffset, outlineOffset = _param_outlineOffset === void 0 ? outlineSize : _param_outlineOffset, _param_outlineColor = param.outlineColor, outlineColor = _param_outlineColor === void 0 ? buttonFocused : _param_outlineColor, _param_outlineRadius = param.outlineRadius, outlineRadius = _param_outlineRadius === void 0 ? 0 : _param_outlineRadius, _param_synthesizeFocus = param.synthesizeFocus, synthesizeFocus = _param_synthesizeFocus === void 0 ? syntheticFocus : _param_synthesizeFocus;
-    return outlined && css([
-        "position:relative;&::before{content:'';position:absolute;top:-",
-        ";left:-",
-        ";right:-",
-        ";bottom:-",
-        ";display:block;box-sizing:content-box;border:",
-        " solid transparent;border-radius:",
-        ";transition:",
-        ";pointer-events:none;}",
-        ""
+ */ export const addFocus = ({ lowPerformance, focused, outlined = true, outlineSize = '0.125rem', outlineOffset = outlineSize, outlineColor = buttonFocused, outlineRadius = 0, synthesizeFocus = syntheticFocus })=>outlined && css([
+        `position:relative;&::before{content:'';position:absolute;top:-`,
+        `;left:-`,
+        `;right:-`,
+        `;bottom:-`,
+        `;display:block;box-sizing:content-box;border:`,
+        ` solid transparent;border-radius:`,
+        `;transition:`,
+        `;pointer-events:none;}`,
+        ``
     ], outlineOffset, outlineOffset, outlineOffset, outlineOffset, outlineSize, outlineRadius, lowPerformance ? 'unset' : 'box-shadow 0.2s ease-in-out', synthesizeFocus(css([
-        "&::before{box-shadow:0 0 0 ",
-        " ",
-        ";}"
+        `&::before{box-shadow:0 0 0 `,
+        ` `,
+        `;}`
     ], outlineSize, outlineColor), focused));
-};