@salutejs/plasma-new-hope 0.133.2-canary.1396.10611246152.0 → 0.134.0-canary.1352.10609199302.0

package/styled-components/es/examples/sds_engineer/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,205 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { Button } from '../Button/Button';
+import { PopoverPlacement } from '../Popover/Popover';
+import { IconDisclosureRight } from '../../../../components/_Icon';
+
+import { Tooltip } from './Tooltip';
+import type { TooltipProps } from './Tooltip';
+
+const placements: Array<PopoverPlacement> = [
+    'top',
+    'top-start',
+    'top-end',
+
+    'bottom',
+    'bottom-start',
+    'bottom-end',
+
+    'left',
+    'left-start',
+    'left-end',
+
+    'right',
+    'right-start',
+    'right-end',
+
+    'auto',
+];
+
+const meta: Meta<TooltipProps> = {
+    title: 'sds_engineer/Tooltip',
+    decorators: [WithTheme],
+    component: Tooltip,
+    parameters: {
+        docs: { story: { inline: false, iframeHeight: '20rem' } },
+    },
+};
+
+export default meta;
+
+const StyledGrid = styled.div`
+    display: grid;
+    grid-template-columns: repeat(3, max-content);
+    grid-gap: 1rem 3.5rem;
+    padding: 3.5rem;
+`;
+
+const StoryDefault = ({ size }: TooltipProps) => {
+    return (
+        <StyledGrid>
+            <Tooltip
+                target={
+                    <Tooltip
+                        target={<Button>Btn</Button>}
+                        placement="left"
+                        size={size}
+                        opened
+                        hasArrow
+                        text="left"
+                        frame="theme-root"
+                    />
+                }
+                placement="top-start"
+                size={size}
+                opened
+                hasArrow
+                text="top-start"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={<Button>Btn</Button>}
+                placement="top"
+                size={size}
+                opened
+                hasArrow
+                text="top"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={
+                    <Tooltip
+                        target={<Button>Btn</Button>}
+                        placement="right"
+                        size={size}
+                        opened
+                        hasArrow
+                        text="right"
+                        frame="theme-root"
+                    />
+                }
+                placement="top-end"
+                size={size}
+                opened
+                hasArrow
+                text="top-end"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={<Button>Btn</Button>}
+                placement="bottom-start"
+                size={size}
+                opened
+                hasArrow
+                text="bottom-start"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={<Button>Btn</Button>}
+                placement="bottom"
+                size={size}
+                opened
+                hasArrow
+                text="bottom"
+                frame="theme-root"
+            />
+            <Tooltip
+                target={<Button>Btn</Button>}
+                placement="bottom-end"
+                size={size}
+                opened
+                hasArrow
+                text="bottom-end"
+                frame="theme-root"
+            />
+        </StyledGrid>
+    );
+};
+
+export const Default: StoryObj<TooltipProps> = {
+    argTypes: {
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        size: 'm',
+    },
+    render: (args) => <StoryDefault {...args} />,
+};
+
+const StyledRow = styled.div`
+    display: flex;
+    width: 150vw;
+    height: 150vh;
+    padding: 10rem;
+`;
+
+const StoryLive = (args: TooltipProps) => {
+    const [text, setText] = useState('Type here');
+
+    return (
+        <>
+            <StyledRow>
+                <Tooltip
+                    target={
+                        <input
+                            name="Имя"
+                            value={text}
+                            onChange={(e) => setText(e.target.value)}
+                            aria-describedby="example-tooltip-firstname"
+                        />
+                    }
+                    contentLeft={<IconDisclosureRight size="xs" />}
+                    {...args}
+                    id="example-tooltip-firstname"
+                    text={text}
+                    opened
+                    frame="theme-root"
+                />
+            </StyledRow>
+        </>
+    );
+};
+
+export const Live: StoryObj<TooltipProps> = {
+    argTypes: {
+        placement: {
+            options: placements,
+            control: {
+                type: 'select',
+            },
+            mapping: placements,
+        },
+        size: {
+            options: ['m', 's'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+    args: {
+        placement: 'bottom',
+        maxWidth: 10,
+        minWidth: 3,
+        hasArrow: true,
+        size: 'm',
+    },
+    render: (args) => <StoryLive {...args} />,
+};

package/styled-components/es/examples/themes/index.js

@@ -1,7 +1,9 @@
 /* eslint-disable camelcase */
 import plasma_b2c from './plasma_b2c.module.css';
 import plasma_web from './plasma_web.module.css';
+import sds_engineer from './sds_engineer.module.css';
 export var themes = {
   plasma_b2c: plasma_b2c,
-  plasma_web: plasma_web
+  plasma_web: plasma_web,
+  sds_engineer: sds_engineer
 };

package/styled-components/es/examples/themes/sds_engineer.module.css

@@ -0,0 +1,373 @@
+/* Generated by robots, do not change this manually! */
+
+.dark {
+  --overlay-soft: rgba(0, 0, 0, 0.56);
+  --overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-dark-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-dark-overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-light-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-light-overlay-hard: rgba(0, 0, 0, 0.9);
+  --inverse-overlay-soft: rgba(0, 0, 0, 0.56);
+  --inverse-overlay-hard: rgba(0, 0, 0, 0.9);
+  --text-primary: rgba(245, 245, 245, 0.96);
+  --text-secondary: rgba(245, 245, 245, 0.56);
+  --text-tertiary: rgba(245, 245, 245, 0.4);
+  --text-paragraph: rgba(245, 245, 245, 0.8);
+  --text-accent: #FFFFFF;
+  --text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --text-positive: #1A9E32;
+  --text-warning: #FA5F05;
+  --text-negative: #FF293E;
+  --on-dark-text-primary: rgba(245, 245, 245, 0.96);
+  --on-dark-text-secondary: rgba(245, 245, 245, 0.56);
+  --on-dark-text-tertiary: rgba(245, 245, 245, 0.4);
+  --on-dark-text-paragraph: rgba(245, 245, 245, 0.8);
+  --on-dark-text-accent: #FFFFFF;
+  --on-dark-text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-text-positive: #1A9E32;
+  --on-dark-text-warning: #FA5F05;
+  --on-dark-text-negative: #FF293E;
+  --on-light-text-primary: rgba(8, 8, 8, 0.96);
+  --on-light-text-secondary: rgba(8, 8, 8, 0.56);
+  --on-light-text-tertiary: rgba(8, 8, 8, 0.4);
+  --on-light-text-paragraph: rgba(8, 8, 8, 0.8);
+  --on-light-text-accent: #FFFFFF;
+  --on-light-text-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-text-positive: #108E25;
+  --on-light-text-warning: #E85702;
+  --on-light-text-negative: #F31B30;
+  --inverse-text-primary: rgba(8, 8, 8, 0.96);
+  --inverse-text-secondary: rgba(8, 8, 8, 0.56);
+  --inverse-text-tertiary: rgba(8, 8, 8, 0.4);
+  --inverse-text-paragraph: rgba(8, 8, 8, 0.8);
+  --inverse-text-accent: #FFFFFF;
+  --inverse-text-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --inverse-text-positive: #108E25;
+  --inverse-text-warning: #E85702;
+  --inverse-text-negative: #F31B30;
+  --surface-solid-default: #FFFFFF;
+  --surface-solid-primary: #171717;
+  --surface-solid-secondary: #262626;
+  --surface-solid-tertiary: #363636;
+  --surface-solid-card: #171717;
+  --surface-transparent-default: #FFFFFF;
+  --surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --surface-accent: #FFFFFF;
+  /* добавлены вручную */
+  --surface-accent-hover: #1383cf80;
+  /* добавлены вручную */
+  --surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --surface-positive: #1A9E32;
+  --surface-warning: #FA5F05;
+  --surface-negative: #FF293E;
+  /* добавлены вручную */
+  --surface-transparent-negative: #e3122712;
+  --surface-clear: rgba(0, 0, 0, 0);
+  --on-dark-surface-solid-default: #FFFFFF;
+  --on-dark-surface-solid-primary: #171717;
+  --on-dark-surface-solid-secondary: #262626;
+  --on-dark-surface-solid-tertiary: #363636;
+  --on-dark-surface-solid-card: #171717;
+  --on-dark-surface-transparent-default: #FFFFFF;
+  --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --on-dark-surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-accent: #FFFFFF;
+  --on-dark-surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-surface-positive: #1A9E32;
+  --on-dark-surface-warning: #FA5F05;
+  --on-dark-surface-negative: #FF293E;
+  --on-dark-surface-clear: rgba(0, 0, 0, 0);
+  --on-light-surface-solid-default: #080808;
+  --on-light-surface-solid-primary: #F5F5F5;
+  --on-light-surface-solid-secondary: #ECECEC;
+  --on-light-surface-solid-tertiary: #DDDDDD;
+  --on-light-surface-solid-card: #F7F7F7;
+  --on-light-surface-transparent-default: #080808;
+  --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --on-light-surface-transparent-card: rgba(8, 8, 8, 0.06);
+  --on-light-surface-accent: #FFFFFF;
+  --on-light-surface-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-surface-positive: #108E25;
+  --on-light-surface-warning: #E85702;
+  --on-light-surface-negative: #F31B30;
+  --on-light-surface-clear: rgba(0, 0, 0, 0);
+  --inverse-surface-solid-default: #080808;
+  --inverse-surface-solid-primary: #F5F5F5;
+  --inverse-surface-solid-secondary: #ECECEC;
+  --inverse-surface-solid-tertiary: #DDDDDD;
+  --inverse-surface-solid-card: #F7F7F7;
+  --inverse-surface-transparent-default: #080808;
+  --inverse-surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --inverse-surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --inverse-surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --inverse-surface-transparent-card: rgba(8, 8, 8, 0.06);
+  --inverse-surface-accent: #FFFFFF;
+  --inverse-surface-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --inverse-surface-positive: #108E25;
+  --inverse-surface-warning: #E85702;
+  --inverse-surface-negative: #F31B30;
+  --inverse-surface-clear: rgba(0, 0, 0, 0);
+  --background-primary: #000000;
+  --background-secondary: #080808;
+  --background-tertiary: #171717;
+  --dark-background-primary: #000000;
+  --dark-background-secondary: #080808;
+  --dark-background-tertiary: #171717;
+  --light-background-primary: #FFFFFF;
+  --light-background-secondary: #FFFFFF;
+  --light-background-tertiary: #FFFFFF;
+  --inverse-background-primary: #FFFFFF;
+  --inverse-background-secondary: #FFFFFF;
+  --inverse-background-tertiary: #FFFFFF;
+  --text-primary-hover:  #17171793;
+  --text-primary-active:  #171717C4;
+  --surface-solid-default-hover:  #0D0D0DFF;
+  --surface-solid-default-active:  #030303FF;
+  --surface-accent-hover:  #0C8ADFFF;
+  --surface-accent-active:  #0A78C2FF;
+  --surface-positive-hover:  #1DAF37FF;
+  --surface-positive-active:  #18952FFF;
+  --surface-warning-hover:  #FB7223FF;
+  --surface-warning-active:  #F05B05FF;
+  --surface-negative-hover:  #EA1A2FFF;
+  --surface-negative-active:  #D21427FF;
+  --surface-transparent-secondary-hover:  #0808081F;
+  --surface-transparent-secondary-active:  #0808080A;
+  --on-light-surface-solid-default-hover:  #0D0D0DFF;
+  --on-light-surface-solid-default-active:  #030303FF;
+  --on-dark-surface-solid-default-hover:  #FFFFFFFF;
+  --on-dark-surface-solid-default-active:  #FFFFFFFF;
+  --on-light-surface-transparent-deep-hover: #080808C2;
+  --on-light-surface-transparent-deep-active: #08080894;
+  --on-light-surface-transparent-deep: rgba(8, 8, 8, 0.64);
+  --surface-skeleton-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.08) 6.25%, rgba(255, 255, 255, 0.05) 12.5%, rgba(255, 255, 255, 0.01) 25%, rgba(255, 255, 255, 0.05) 37.5%, rgba(255, 255, 255, 0.08) 43.75%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.05) 62.5%, rgba(255, 255, 255, 0.01) 75%, rgba(255, 255, 255, 0.05) 87.5%, rgba(255, 255, 255, 0.08) 93.75%, rgba(255, 255, 255, 0.09) 100% );
+  --surface-skeleton-deep-gradient: linear-gradient( 90deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0.32) 6.25%, rgba(255, 255, 255, 0.20) 12.5%, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.20) 37.5%, rgba(255, 255, 255, 0.32) 43.75%, rgba(255, 255, 255, 0.36) 50%, rgba(255, 255, 255, 0.08) 56.25%, rgba(255, 255, 255, 0.20) 62.5%, rgba(255, 255, 255, 0.04) 75%, rgba(255, 255, 255, 0.20) 87.5%, rgba(255, 255, 255, 0.32) 93.75%, rgba(255, 255, 255, 0.36) 100% );
+  --plasma-colors-white-primary: var(--on-dark-text-primary);
+  --plasma-colors-white-secondary: var(--on-dark-text-secondary);
+  --plasma-colors-white-tertiary: var(--on-dark-text-tertiary);
+  --plasma-colors-black-primary: var(--on-light-text-primary);
+  --plasma-colors-black-secondary: var(--on-light-text-secondary);
+  --plasma-colors-black-tertiary: var(--on-light-text-tertiary);
+  --plasma-colors-button-black: var(--on-light-surface-solid-default);
+  --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary);
+  --plasma-colors-button-white: var(--on-dark-surface-solid-default);
+  --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary);
+  --plasma-colors-text: var(--text-primary);
+  --plasma-colors-primary: var(--text-primary);
+  --plasma-colors-secondary: var(--text-secondary);
+  --plasma-colors-tertiary: var(--text-tertiary);
+  --plasma-colors-paragraph: var(--text-paragraph);
+  --plasma-colors-background: var(--background-primary);
+  --plasma-colors-accent: var(--text-accent);
+  --plasma-colors-success: var(--text-positive);
+  --plasma-colors-warning: var(--text-warning);
+  --plasma-colors-critical: var(--text-negative);
+  --plasma-colors-overlay: var(--overlay-soft);
+  --plasma-colors-surface-liquid01: var(--surface-transparent-primary);
+  --plasma-colors-surface-liquid02: var(--surface-transparent-secondary);
+  --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary);
+  --plasma-colors-surface-solid01: var(--surface-solid-primary);
+  --plasma-colors-surface-solid02: var(--surface-solid-secondary);
+  --plasma-colors-surface-solid03: var(--surface-solid-tertiary);
+  --plasma-colors-surface-card: var(--surface-transparent-card);
+  --plasma-colors-button-secondary: var(--surface-transparent-secondary);
+  --plasma-colors-button-accent: var(--text-accent);
+  --plasma-colors-button-success: var(--surface-positive);
+  --plasma-colors-button-warning: var(--surface-warning);
+  --plasma-colors-button-critical: var(--surface-negative);
+  color: var(--text-primary);
+  background-color: var(--background-primary);
+}
+
+.light {
+  --overlay-soft: rgba(0, 0, 0, 0.56);
+  --overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-dark-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-dark-overlay-hard: rgba(0, 0, 0, 0.9);
+  --on-light-overlay-soft: rgba(0, 0, 0, 0.56);
+  --on-light-overlay-hard: rgba(0, 0, 0, 0.9);
+  --inverse-overlay-soft: rgba(0, 0, 0, 0.56);
+  --inverse-overlay-hard: rgba(0, 0, 0, 0.9);
+  --text-primary: rgba(23, 23, 23, 0.96);
+  --text-secondary: rgba(23, 23, 23, 0.56);
+  --text-tertiary: rgba(23, 23, 23, 0.4);
+  --text-paragraph: rgba(23, 23, 23, 0.8);
+  --text-accent: #0C72B6;
+  --text-accent-gradient: linear-gradient(45.00deg, rgb(30, 44, 108) 0%,rgb(43, 101, 185) 100%);
+  --text-positive: #108E25;
+  --text-warning: #E85702;
+  --text-negative: #F31B31;
+  --on-dark-text-primary: rgba(245, 245, 245, 0.96);
+  --on-dark-text-secondary: rgba(245, 245, 245, 0.56);
+  --on-dark-text-tertiary: rgba(245, 245, 245, 0.4);
+  --on-dark-text-paragraph: rgba(245, 245, 245, 0.8);
+  --on-dark-text-accent: #FFFFFF;
+  --on-dark-text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-text-positive: #1A9E32;
+  --on-dark-text-warning: #FA5F05;
+  --on-dark-text-negative: #FF293E;
+  --on-light-text-primary: rgba(8, 8, 8, 0.96);
+  --on-light-text-secondary: rgba(8, 8, 8, 0.56);
+  --on-light-text-tertiary: rgba(8, 8, 8, 0.4);
+  --on-light-text-paragraph: rgba(8, 8, 8, 0.8);
+  --on-light-text-accent: #FFFFFF;
+  --on-light-text-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-text-positive: #108E25;
+  --on-light-text-warning: #E85702;
+  --on-light-text-negative: #F31B30;
+  --inverse-text-primary: rgba(245, 245, 245, 0.96);
+  --inverse-text-secondary: rgba(245, 245, 245, 0.56);
+  --inverse-text-tertiary: rgba(245, 245, 245, 0.4);
+  --inverse-text-paragraph: rgba(245, 245, 245, 0.8);
+  --inverse-text-accent: #FFFFFF;
+  --inverse-text-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --inverse-text-positive: #1A9E32;
+  --inverse-text-warning: #FA5F05;
+  --inverse-text-negative: #FF293E;
+  --surface-solid-default: #080808;
+  --surface-solid-primary: #F5F5F5;
+  --surface-solid-secondary: #ECECEC;
+  --surface-solid-tertiary: #DDDDDD;
+  --surface-solid-card: #FFFFFF;
+  --surface-transparent-default: #080808;
+  --surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --surface-transparent-card: #FFFFFF;
+  --surface-accent: #0B7ECB;
+  /* добавлены вручную */
+  --surface-accent-hover: #1383cf80;
+  /* добавлены вручную */
+  --surface-accent-gradient: linear-gradient(45.00deg, rgb(30, 44, 108) 0%,rgb(43, 101, 185) 100%);
+  --surface-positive: #1A9E32;
+  --surface-warning: #FA5F05;
+  --surface-negative: #DD1428;
+  /* добавлены вручную */
+  --surface-transparent-negative: #e3122712;
+  --surface-clear: rgba(0, 0, 0, 0);
+  --on-dark-surface-solid-default: #FFFFFF;
+  --on-dark-surface-solid-primary: #171717;
+  --on-dark-surface-solid-secondary: #262626;
+  --on-dark-surface-solid-tertiary: #363636;
+  --on-dark-surface-solid-card: #171717;
+  --on-dark-surface-transparent-default: #FFFFFF;
+  --on-dark-surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --on-dark-surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --on-dark-surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --on-dark-surface-accent: #FFFFFF;
+  --on-dark-surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --on-dark-surface-positive: #1A9E32;
+  --on-dark-surface-warning: #FA5F05;
+  --on-dark-surface-negative: #FF293E;
+  --on-dark-surface-clear: rgba(0, 0, 0, 0);
+  --on-light-surface-solid-default: #080808;
+  --on-light-surface-solid-primary: #F5F5F5;
+  --on-light-surface-solid-secondary: #ECECEC;
+  --on-light-surface-solid-tertiary: #DDDDDD;
+  --on-light-surface-solid-card: #F7F7F7;
+  --on-light-surface-transparent-default: #080808;
+  --on-light-surface-transparent-primary: rgba(8, 8, 8, 0.02);
+  --on-light-surface-transparent-secondary: rgba(8, 8, 8, 0.06);
+  --on-light-surface-transparent-tertiary: rgba(8, 8, 8, 0.12);
+  --on-light-surface-transparent-card: rgba(8, 8, 8, 0.06);
+  --on-light-surface-accent: #FFFFFF;
+  --on-light-surface-accent-gradient: linear-gradient(135deg, white 0%, #FFFFFF 100%);
+  --on-light-surface-positive: #108E25;
+  --on-light-surface-warning: #E85702;
+  --on-light-surface-negative: #F31B30;
+  --on-light-surface-clear: rgba(0, 0, 0, 0);
+  --inverse-surface-solid-default: #FFFFFF;
+  --inverse-surface-solid-primary: #171717;
+  --inverse-surface-solid-secondary: #262626;
+  --inverse-surface-solid-tertiary: #363636;
+  --inverse-surface-solid-card: #171717;
+  --inverse-surface-transparent-default: #FFFFFF;
+  --inverse-surface-transparent-primary: rgba(255, 255, 255, 0.06);
+  --inverse-surface-transparent-secondary: rgba(255, 255, 255, 0.12);
+  --inverse-surface-transparent-tertiary: rgba(255, 255, 255, 0.2);
+  --inverse-surface-transparent-card: rgba(255, 255, 255, 0.12);
+  --inverse-surface-accent: #FFFFFF;
+  --inverse-surface-accent-gradient: linear-gradient(135deg, black 0%, #FFFFFF 100%);
+  --inverse-surface-positive: #1A9E32;
+  --inverse-surface-warning: #FA5F05;
+  --inverse-surface-negative: #FF293E;
+  --inverse-surface-clear: rgba(0, 0, 0, 0);
+  --background-primary: #F9F9F9;
+  --background-secondary: #FFFFFF;
+  --background-tertiary: #FFFFFF;
+  --dark-background-primary: #000000;
+  --dark-background-secondary: #080808;
+  --dark-background-tertiary: #171717;
+  --light-background-primary: #FFFFFF;
+  --light-background-secondary: #FFFFFF;
+  --light-background-tertiary: #FFFFFF;
+  --inverse-background-primary: #000000;
+  --inverse-background-secondary: #080808;
+  --inverse-background-tertiary: #171717;
+  --text-primary-hover:  #17171793;
+  --text-primary-active:  #171717C4;
+  --surface-solid-default-hover:  #262626FF;
+  --surface-solid-default-active:  #030303FF;
+  --surface-accent-hover:  #0C8ADFFF;
+  --surface-accent-active:  #0A72B8FF;
+  --surface-positive-hover:  #1EB83AFF;
+  --surface-positive-active:  #178C2CFF;
+  --surface-warning-hover:  #FB782DFF;
+  --surface-warning-active:  #E65705FF;
+  --surface-negative-hover:  #EA1A2FFF;
+  --surface-negative-active:  #C91325FF;
+  --surface-transparent-secondary-hover:  #08080805;
+  --surface-transparent-secondary-active:  #0808081A;
+  --on-light-surface-solid-default-hover:  #262626FF;
+  --on-light-surface-solid-default-active:  #030303FF;
+  --on-dark-surface-solid-default-hover:  #FFFFFFFF;
+  --on-dark-surface-solid-default-active:  #FFFFFFFF;
+  --on-light-surface-transparent-deep-hover: #0808088F;
+  --on-light-surface-transparent-deep-active: #080808AD;
+  --on-light-surface-transparent-deep: rgba(8, 8, 8, 0.64);
+  --skeleton-gradient: linear-gradient( 90deg, rgba(8, 8, 8, 0.09) 0%, rgba(8, 8, 8, 0.08) 6.25%, rgba(8, 8, 8, 0.05) 12.5%, rgba(8, 8, 8, 0.01) 25%, rgba(8, 8, 8, 0.05) 37.5%, rgba(8, 8, 8, 0.08) 43.75%, rgba(8, 8, 8, 0.09) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.05) 62.5%, rgba(8, 8, 8, 0.01) 75%, rgba(8, 8, 8, 0.05) 87.5%, rgba(8, 8, 8, 0.08) 93.75%, rgba(8, 8, 8, 0.09) 100% );
+  --skeleton-gradient-lighter: linear-gradient( 90deg, rgba(8, 8, 8, 0.36) 0%, rgba(8, 8, 8, 0.32) 6.25%, rgba(8, 8, 8, 0.20) 12.5%, rgba(8, 8, 8, 0.04) 25%, rgba(8, 8, 8, 0.20) 37.5%, rgba(8, 8, 8, 0.32) 43.75%, rgba(8, 8, 8, 0.36) 50%, rgba(8, 8, 8, 0.08) 56.25%, rgba(8, 8, 8, 0.20) 62.5%, rgba(8, 8, 8, 0.04) 75%, rgba(8, 8, 8, 0.20) 87.5%, rgba(8, 8, 8, 0.32) 93.75%, rgba(8, 8, 8, 0.36) 100% );
+  --plasma-colors-white-primary: var(--on-dark-text-primary);
+  --plasma-colors-white-secondary: var(--on-dark-text-secondary);
+  --plasma-colors-white-tertiary: var(--on-dark-text-tertiary);
+  --plasma-colors-black-primary: var(--on-light-text-primary);
+  --plasma-colors-black-secondary: var(--on-light-text-secondary);
+  --plasma-colors-black-tertiary: var(--on-light-text-tertiary);
+  --plasma-colors-button-black: var(--on-light-surface-solid-default);
+  --plasma-colors-button-black-secondary: var(--on-light-surface-transparent-secondary);
+  --plasma-colors-button-white: var(--on-dark-surface-solid-default);
+  --plasma-colors-button-white-secondary: var(--on-dark-surface-transparent-secondary);
+  --plasma-colors-text: var(--text-primary);
+  --plasma-colors-primary: var(--text-primary);
+  --plasma-colors-secondary: var(--text-secondary);
+  --plasma-colors-tertiary: var(--text-tertiary);
+  --plasma-colors-paragraph: var(--text-paragraph);
+  --plasma-colors-background: var(--background-primary);
+  --plasma-colors-accent: var(--text-accent);
+  --plasma-colors-success: var(--text-positive);
+  --plasma-colors-warning: var(--text-warning);
+  --plasma-colors-critical: var(--text-negative);
+  --plasma-colors-overlay: var(--overlay-soft);
+  --plasma-colors-surface-liquid01: var(--surface-transparent-primary);
+  --plasma-colors-surface-liquid02: var(--surface-transparent-secondary);
+  --plasma-colors-surface-liquid03: var(--surface-transparent-tertiary);
+  --plasma-colors-surface-solid01: var(--surface-solid-primary);
+  --plasma-colors-surface-solid02: var(--surface-solid-secondary);
+  --plasma-colors-surface-solid03: var(--surface-solid-tertiary);
+  --plasma-colors-surface-card: var(--surface-transparent-card);
+  --plasma-colors-button-secondary: var(--surface-transparent-secondary);
+  --plasma-colors-button-accent: var(--text-accent);
+  --plasma-colors-button-success: var(--surface-positive);
+  --plasma-colors-button-warning: var(--surface-warning);
+  --plasma-colors-button-critical: var(--surface-negative);
+  color: var(--text-primary);
+  background-color: var(--background-primary);
+}

package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts

@@ -12,6 +12,9 @@ export declare const StyledTextField: import("@linaria/react").StyledMeta & impo
     contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     textBefore?: string | undefined;
     textAfter?: string | undefined;
+    optional?: boolean | undefined;
+    required?: boolean | undefined;
+    requiredPlacement?: "left" | "right" | undefined;
     onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
 } & {
     chips?: undefined;
@@ -31,6 +34,9 @@ export declare const StyledTextField: import("@linaria/react").StyledMeta & impo
     contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     textBefore?: string | undefined;
     textAfter?: string | undefined;
+    optional?: boolean | undefined;
+    required?: boolean | undefined;
+    requiredPlacement?: "left" | "right" | undefined;
     onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
 } & {
     enumerationType: "chip";

package/types/components/Autocomplete/ui/TextField/TextField.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/ui/TextField/TextField.styles.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4HA0D3B,CAAC"}
+{"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/ui/TextField/TextField.styles.ts"],"names":[],"mappings":";AASA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4HA0D3B,CAAC"}

package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts

@@ -13,6 +13,9 @@ export declare const StyledInput: import("@linaria/react").StyledMeta & import("
     contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     textBefore?: string | undefined;
     textAfter?: string | undefined;
+    optional?: boolean | undefined;
+    required?: boolean | undefined;
+    requiredPlacement?: "left" | "right" | undefined;
     onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
 } & {
     chips?: undefined;
@@ -32,6 +35,9 @@ export declare const StyledInput: import("@linaria/react").StyledMeta & import("
     contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     textBefore?: string | undefined;
     textAfter?: string | undefined;
+    optional?: boolean | undefined;
+    required?: boolean | undefined;
+    requiredPlacement?: "left" | "right" | undefined;
     onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
 } & {
     enumerationType: "chip";

package/types/components/DatePicker/SingleDate/SingleDate.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SingleDate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.styles.ts"],"names":[],"mappings":";AAcA,eAAO,MAAM,aAAa,4TAAoB,CAAC;AAG/C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4HAuEvB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAMhB,CAAC;AAEF,eAAO,MAAM,WAAW,8KAAiB,CAAC;AAE1C,eAAO,MAAM,UAAU,qKAAe,CAAC"}
+{"version":3,"file":"SingleDate.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/DatePicker/SingleDate/SingleDate.styles.ts"],"names":[],"mappings":";AAcA,eAAO,MAAM,aAAa,4TAAoB,CAAC;AAG/C,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4HAuEvB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAMhB,CAAC;AAEF,eAAO,MAAM,WAAW,8KAAiB,CAAC;AAE1C,eAAO,MAAM,UAAU,qKAAe,CAAC"}

package/types/components/Range/Range.styles.d.ts

@@ -12,6 +12,9 @@ export declare const StyledInput: import("@linaria/react").StyledMeta & import("
     contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     textBefore?: string | undefined;
     textAfter?: string | undefined;
+    optional?: boolean | undefined;
+    required?: boolean | undefined;
+    requiredPlacement?: "left" | "right" | undefined;
     onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
 } & {
     chips?: undefined;
@@ -31,6 +34,9 @@ export declare const StyledInput: import("@linaria/react").StyledMeta & import("
     contentRight?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     textBefore?: string | undefined;
     textAfter?: string | undefined;
+    optional?: boolean | undefined;
+    required?: boolean | undefined;
+    requiredPlacement?: "left" | "right" | undefined;
     onSearch?: ((value: string, event?: import("react").KeyboardEvent<HTMLInputElement> | undefined) => void) | undefined;
 } & {
     enumerationType: "chip";

package/types/components/Range/Range.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Range.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.styles.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4HA+DvB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAEhB,CAAC;AAEF,eAAO,MAAM,WAAW,8KAAiB,CAAC;AAE1C,eAAO,MAAM,UAAU,qKAAe,CAAC;AAEvC,eAAO,MAAM,cAAc,qKAG1B,CAAC;AAEF,eAAO,MAAM,aAAa,qKAAe,CAAC;AAE1C,eAAO,MAAM,iBAAiB,qKAE7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAAe,CAAC"}
+{"version":3,"file":"Range.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.styles.ts"],"names":[],"mappings":";AAYA,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;4HA+DvB,CAAC;AAEF,eAAO,MAAM,IAAI,0CAEhB,CAAC;AAEF,eAAO,MAAM,WAAW,8KAAiB,CAAC;AAE1C,eAAO,MAAM,UAAU,qKAAe,CAAC;AAEvC,eAAO,MAAM,cAAc,qKAG1B,CAAC;AAEF,eAAO,MAAM,aAAa,qKAAe,CAAC;AAE1C,eAAO,MAAM,iBAAiB,qKAE7B,CAAC;AAEF,eAAO,MAAM,kBAAkB,qKAAe,CAAC"}