@salutejs/plasma-new-hope 0.384.0-dev.0 → 0.385.0-dev.0

package/dist/styled-components/es/plasmaCore/components/Spinner/SpinnerSvg.js

@@ -0,0 +1,56 @@
+import React from "react";
+export const SpinnerSvg = ({ id, color, ...props })=>/*#__PURE__*/ React.createElement("svg", {
+        viewBox: "0 0 56 56",
+        fill: "none",
+        ...props
+    }, /*#__PURE__*/ React.createElement("path", {
+        fillRule: "evenodd",
+        clipRule: "evenodd",
+        d: "M28 0C12.536 0 0 12.536 0 28s12.536 28 28 28h.055H28v-4C14.745 52 4 41.255 4 28S14.745 4 28 4V0z",
+        fill: `url(#prefix__paint0_linear${id})`
+    }), /*#__PURE__*/ React.createElement("path", {
+        d: "M56 28c0 14.791-11.47 26.904-26 27.93-1.102.077-2-.825-2-1.93s.899-1.991 2-2.082C42.318 50.902 52 40.58 52 28 52 14.745 41.255 4 28 4V0c15.464 0 28 12.536 28 28z",
+        fill: `url(#prefix__paint1_linear${id})`
+    }), /*#__PURE__*/ React.createElement("defs", null, /*#__PURE__*/ React.createElement("linearGradient", {
+        id: `prefix__paint0_linear${id}`,
+        x1: 0,
+        y1: 56,
+        x2: 0,
+        y2: 0,
+        gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/ React.createElement("stop", {
+        stopColor: color,
+        stopOpacity: 0
+    }), /*#__PURE__*/ React.createElement("stop", {
+        offset: 0.048,
+        stopColor: color,
+        stopOpacity: 0
+    }), /*#__PURE__*/ React.createElement("stop", {
+        offset: 0.952,
+        stopColor: color,
+        stopOpacity: 0.5
+    }), /*#__PURE__*/ React.createElement("stop", {
+        offset: 1,
+        stopColor: color,
+        stopOpacity: 0.5
+    })), /*#__PURE__*/ React.createElement("linearGradient", {
+        id: `prefix__paint1_linear${id}`,
+        x1: 28,
+        y1: 56,
+        x2: 28,
+        y2: 0,
+        gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/ React.createElement("stop", {
+        stopColor: color
+    }), /*#__PURE__*/ React.createElement("stop", {
+        offset: 0.048,
+        stopColor: color
+    }), /*#__PURE__*/ React.createElement("stop", {
+        offset: 0.952,
+        stopColor: color,
+        stopOpacity: 0.5
+    }), /*#__PURE__*/ React.createElement("stop", {
+        offset: 1,
+        stopColor: color,
+        stopOpacity: 0.5
+    }))));

package/dist/styled-components/es/plasmaCore/components/Spinner/index.js

@@ -0,0 +1 @@
+export { Spinner } from "./Spinner";

package/dist/styled-components/es/plasmaCore/components/Typography/Body.js

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { body1, body2, body3 } from "../../utils/tokens";
+import { applyHyphens, applySpacing } from "../../utils/mixins";
+export const Body1 = styled.div.withConfig({
+    displayName: "Body__Body1",
+    componentId: "sc-68e4a017-0"
+})([
+    ``,
+    ` `,
+    ` `,
+    ``
+], applyHyphens, applySpacing, body1);
+export const Body2 = styled.div.withConfig({
+    displayName: "Body__Body2",
+    componentId: "sc-68e4a017-1"
+})([
+    ``,
+    ` `,
+    ` `,
+    ``
+], applyHyphens, applySpacing, body2);
+export const Body3 = styled.div.withConfig({
+    displayName: "Body__Body3",
+    componentId: "sc-68e4a017-2"
+})([
+    ``,
+    ` `,
+    ` `,
+    ``
+], applyHyphens, applySpacing, body3);

package/dist/styled-components/es/plasmaCore/components/Typography/Button.js

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { button1, button2 } from "../../utils/tokens";
+import { applyHyphens, applySpacing } from "../../utils/mixins";
+export const Button1 = styled.div.withConfig({
+    displayName: "Button__Button1",
+    componentId: "sc-deb3280-0"
+})([
+    ``,
+    ` `,
+    ` `,
+    ``
+], applyHyphens, applySpacing, button1);
+export const Button2 = styled.div.withConfig({
+    displayName: "Button__Button2",
+    componentId: "sc-deb3280-1"
+})([
+    ``,
+    ` `,
+    ` `,
+    ``
+], applyHyphens, applySpacing, button2);

package/dist/styled-components/es/plasmaCore/components/Typography/Caption.js

@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { caption } from "../../utils/tokens";
+import { applyHyphens, applySpacing } from "../../utils/mixins";
+export const Caption = styled.div.withConfig({
+    displayName: "Caption",
+    componentId: "sc-6b81e1a6-0"
+})([
+    ``,
+    ` `,
+    ` `,
+    ``
+], applyHyphens, applySpacing, caption);

package/dist/styled-components/es/plasmaCore/components/Typography/Display.js

@@ -0,0 +1,30 @@
+import styled from "styled-components";
+import { display1, display2, display3 } from "../../utils/tokens";
+import { applyHyphens, applySpacing } from "../../utils/mixins";
+export const Display1 = styled.div.withConfig({
+    displayName: "Display__Display1",
+    componentId: "sc-d5b10f76-0"
+})([
+    ``,
+    ` `,
+    ` `,
+    ``
+], applyHyphens, applySpacing, display1);
+export const Display2 = styled.div.withConfig({
+    displayName: "Display__Display2",
+    componentId: "sc-d5b10f76-1"
+})([
+    ``,
+    ` `,
+    ` `,
+    ``
+], applyHyphens, applySpacing, display2);
+export const Display3 = styled.div.withConfig({
+    displayName: "Display__Display3",
+    componentId: "sc-d5b10f76-2"
+})([
+    ``,
+    ` `,
+    ` `,
+    ``
+], applyHyphens, applySpacing, display3);

package/dist/styled-components/es/plasmaCore/components/Typography/Footnote.js

@@ -0,0 +1,21 @@
+import styled from "styled-components";
+import { footnote1, footnote2 } from "../../utils/tokens";
+import { applyHyphens, applySpacing } from "../../utils/mixins";
+export const Footnote1 = styled.div.withConfig({
+    displayName: "Footnote__Footnote1",
+    componentId: "sc-b9a62abf-0"
+})([
+    ``,
+    ` `,
+    ` `,
+    ``
+], applyHyphens, applySpacing, footnote1);
+export const Footnote2 = styled.div.withConfig({
+    displayName: "Footnote__Footnote2",
+    componentId: "sc-b9a62abf-1"
+})([
+    ``,
+    ` `,
+    ` `,
+    ``
+], applyHyphens, applySpacing, footnote2);

package/dist/styled-components/es/plasmaCore/components/Typography/Headline.js

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

package/dist/styled-components/es/plasmaCore/components/Typography/Paragraph.js

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

package/dist/styled-components/es/plasmaCore/components/Typography/Underline.js

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

package/dist/styled-components/es/plasmaCore/components/Typography/index.js

@@ -0,0 +1,8 @@
+export * from "./Body";
+export * from "./Button";
+export * from "./Caption";
+export * from "./Display";
+export * from "./Footnote";
+export * from "./Headline";
+export * from "./Paragraph";
+export * from "./Underline";

package/dist/styled-components/es/plasmaCore/components/index.js

@@ -0,0 +1,9 @@
+export * from "./Card";
+export * from "./Field";
+export * from "./Image";
+export * from "./Price";
+export * from "./SSRProvider";
+export * from "./Typography";
+export * from "./Badge";
+export * from "./Button";
+export * from "./Spinner";

package/dist/styled-components/es/plasmaCore/index.js

@@ -0,0 +1,2 @@
+export * from "./components";
+export * from "./utils";

package/dist/styled-components/es/plasmaCore/utils/hooks/index.js

@@ -0,0 +1,6 @@
+export { useDebouncedFunction } from "./useDebouncedFunction";
+export { useForkRef } from "./useForkRef";
+export { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect";
+export { useUniqId } from "./useUniqId";
+export { useResizeObserver } from "./useResizeObserver";
+export { useFocusTrap } from "./useFocusTrap";

package/dist/styled-components/es/plasmaCore/utils/hooks/useDebouncedFunction.js

@@ -0,0 +1,27 @@
+import React from "react";
+/**
+ * @param {Function} func
+ * @param {number} delay
+ * @param {boolean} cleanUp
+ * https://habr.com/ru/company/domclick/blog/510616/
+ */ export function useDebouncedFunction(func, delay, cleanUp) {
+    const timeoutRef = React.useRef();
+    /**
+     * Очистка таймера
+     */ function clearTimer() {
+        if (timeoutRef.current) {
+            clearTimeout(timeoutRef.current);
+            timeoutRef.current = undefined;
+        }
+    }
+    /**
+     * Очищаем таймер при анмаунте компонента, если cleanUp выставлен в true
+     * и тем самым отменяем последний запланированный вызов
+     */ React.useEffect(()=>cleanUp ? clearTimer : undefined, [
+        cleanUp
+    ]);
+    return (...args)=>{
+        clearTimer();
+        timeoutRef.current = setTimeout(()=>func(...args), delay);
+    };
+}

package/dist/styled-components/es/plasmaCore/utils/hooks/useFocusTrap.js

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

package/dist/styled-components/es/plasmaCore/utils/hooks/useForkRef.js

@@ -0,0 +1,21 @@
+import React from "react";
+import { setRef } from "../utils";
+/**
+ * Позволяет переиспользовать объект `ref` внутри forwardRef.
+ * @param {React.Ref<T>} refOne
+ * @param {React.Ref<T>} refTwo
+ * @return {Function React.Ref}
+ */ export const useForkRef = (refOne, refTwo)=>{
+    return React.useMemo(()=>{
+        if (refOne == null && refTwo === null) {
+            return null;
+        }
+        return (refOb)=>{
+            setRef(refOne, refOb);
+            setRef(refTwo, refOb);
+        };
+    }, [
+        refOne,
+        refTwo
+    ]);
+};

package/dist/styled-components/es/plasmaCore/utils/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,5 @@
+import { useLayoutEffect, useEffect } from "react";
+import { canUseDOM } from "../utils";
+/**
+ * Runs effect safely on server.
+ */ export const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;

package/dist/styled-components/es/plasmaCore/utils/hooks/useResizeObserver.js

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

package/dist/styled-components/es/plasmaCore/utils/hooks/useUniqId.js

@@ -0,0 +1,13 @@
+import { useState, useContext } from "react";
+import { SSRContext } from "../../components/SSRProvider";
+let noSSRId = 0;
+export function useUniqId() {
+    const context = useContext(SSRContext);
+    const [id] = useState(()=>{
+        if (context.uniqId !== null) {
+            return `plasma-uniq-id-ssr-${++context.uniqId}`;
+        }
+        return `plasma-uniq-id-${++noSSRId}`;
+    });
+    return id;
+}

package/dist/styled-components/es/plasmaCore/utils/index.js

@@ -0,0 +1,5 @@
+export * from "./hooks";
+export * from "./mixins";
+export * from "./tokens";
+export * from "./types";
+export * from "./utils";

package/dist/styled-components/es/plasmaCore/utils/mixins/addFocus.js

@@ -0,0 +1,42 @@
+import { css } from "styled-components";
+import { buttonFocused } from "../tokens";
+import "focus-visible";
+export const syntheticFocus = (ruleset, focused)=>css([
+        `&.focus-visible:focus,&[data-focus-visible-added]{outline:none;`,
+        `}`,
+        `;`
+    ], ruleset, focused && ruleset);
+/**
+ * Миксин для добавления фокусной рамки к элементу через псевдоэлемент before
+ * @param {FocusProps} props
+ * @example
+ * // Выведет фокусную рамку размером 2em, скруглением 5em, отступом 2em и цветом 'rebeccapurple'.
+ * addFocus({
+ *  outlineSize: '2em',
+ *  outlineOffset: '2em',
+ *  outlineRadius: '5em',
+ *  outlineColor: 'rebeccapurple',
+ * });
+ * @example
+ * // Выведет outline размером 4em, скруглением 10px 1px, без отступа и цветом 'greenyellow'.
+ * addFocus({
+ *  outlineSize: '4em',
+ *  outlineOffset: '0',
+ *  outlineRadius: '10em 1em',
+ *  outlineColor: 'greenyellow',
+ * });
+ */ 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 `,
+        ` `,
+        `;}`
+    ], outlineSize, outlineColor), focused));

package/dist/styled-components/es/plasmaCore/utils/mixins/applyDisabled.js

@@ -0,0 +1,11 @@
+import { css } from "styled-components";
+const disabledCss = css([
+    `opacity:0.4;cursor:not-allowed;&:hover,&:active{transform:none;}`
+]);
+/**
+ * Миксин неактивной кнопки
+ */ export const applyDisabled = ({ disabled, $disabled })=>css([
+        `&:disabled{`,
+        `}`,
+        ``
+    ], disabledCss, (disabled || $disabled) && disabledCss);

package/dist/styled-components/es/plasmaCore/utils/mixins/applyEllipsis.js

@@ -0,0 +1,4 @@
+import { css } from "styled-components";
+export const applyEllipsis = ()=>css([
+        `overflow:hidden;text-overflow:ellipsis;white-space:nowrap;`
+    ]);

package/dist/styled-components/es/plasmaCore/utils/mixins/applyMaxLines.js

@@ -0,0 +1,5 @@
+import { css } from "styled-components";
+export const applyMaxLines = ({ maxLines })=>maxLines && css([
+        `display:-webkit-box;overflow:hidden;box-sizing:border-box;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:`,
+        `;`
+    ], maxLines);

package/dist/styled-components/es/plasmaCore/utils/mixins/applyNoSelect.js

@@ -0,0 +1,4 @@
+import { css } from "styled-components";
+export const applyNoSelect = ()=>css([
+        `user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);`
+    ]);

package/dist/styled-components/es/plasmaCore/utils/mixins/applyOutline.js

@@ -0,0 +1,4 @@
+import { css } from "styled-components";
+export const applyOutline = ()=>css([
+        `position:relative;&::before{content:'';position:absolute;top:var(--plasma-outline-offset);left:var(--plasma-outline-offset);right:var(--plasma-outline-offset);bottom:var(--plasma-outline-offset);display:block;box-sizing:border-box;border:var(--plasma-outline-offset) solid transparent;border-radius:var(--plasma-outline-radius);transition:box-shadow 0.2s ease-in-out;pointer-events:none;}&:focus::before{box-shadow:0 0 0 var(--plasma-outline-size) var(--plasma-outline-radius);}`
+    ]);

package/dist/styled-components/es/plasmaCore/utils/mixins/applyRoundness.js

@@ -0,0 +1,22 @@
+import { css } from "styled-components";
+/**
+ * Набор часто встречающихся скруглений.
+ */ export const radiuses = {
+    250: 15.625,
+    32: 2,
+    28: 1.75,
+    24: 1.5,
+    20: 1.25,
+    18: 1.125,
+    16: 1,
+    14: 0.875,
+    12: 0.75,
+    8: 0.5,
+    0: 0
+};
+/**
+ * Миксин скругленности.
+ */ export const applyRoundness = ({ roundness })=>css([
+        `border-radius:`,
+        `rem;`
+    ], radiuses[roundness]);

package/dist/styled-components/es/plasmaCore/utils/mixins/applyScrollSnap.js

@@ -0,0 +1,6 @@
+import { css } from "styled-components";
+export const applyScrollSnap = ({ scrollSnapAlign, scrollSnapStop })=>scrollSnapAlign && css([
+        `scroll-snap-align:`,
+        `;scroll-snap-stop:`,
+        `;`
+    ], scrollSnapAlign, scrollSnapStop);

package/dist/styled-components/es/plasmaCore/utils/mixins/applySkeletonGradient.js

@@ -0,0 +1,10 @@
+import { css, keyframes } from "styled-components";
+import { skeletonGradient, skeletonGradientLighter } from "../tokens";
+const loading = keyframes([
+    `from{transform:translateX(0);}to{transform:translateX(100vw);}`
+]);
+export const applySkeletonGradient = ({ lighter })=>css([
+        `position:relative;overflow:hidden;z-index:1;&::before{content:'';position:absolute;animation:`,
+        ` 4s linear infinite;background-image:`,
+        `;top:0;left:-100vw;width:200vw;height:100%;}`
+    ], loading, lighter ? skeletonGradientLighter : skeletonGradient);