@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/Chip/Chip.config.js

@@ -0,0 +1,22 @@
+import { css } from 'styled-components';
+import { chipTokens } from '../../../../components/Chip';
+export var config = {
+  defaults: {
+    view: 'primary',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      primary: /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":rgba(12,143,230,0.11);", ":var(--text-primary);", ":rgba(12,143,230,0.11);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.colorActive, chipTokens.backgroundActive)
+    },
+    size: {
+      m: /*#__PURE__*/css(["", ":2.5rem;", ":auto;", ":2.5rem;", ":1rem;", ":1rem;", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.5rem;", ":-0.25rem;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.closeIconSize),
+      s: /*#__PURE__*/css(["", ":2.5rem;", ":auto;", ":1.75rem;", ":0.75rem;", ":0.75rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.5rem;", ":-0.25rem;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.closeIconSize),
+      xs: /*#__PURE__*/css(["", ":2.5rem;", ":auto;", ":1.25rem;", ":0.625rem;", ":0.625rem;", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.25rem;", ":-0.125rem;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.closeIconSize),
+      xxs: /*#__PURE__*/css(["", ":0.375rem;", ":auto;", ":0.875rem;", ":0.5rem;", ":0.5rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);", ":0.25rem;", ":-0.125rem;", ":1rem;"], chipTokens.borderRadius, chipTokens.width, chipTokens.height, chipTokens.paddingRight, chipTokens.paddingLeft, chipTokens.fontFamily, chipTokens.fontSize, chipTokens.fontStyle, chipTokens.fontWeight, chipTokens.letterSpacing, chipTokens.lineHeight, chipTokens.clearContentMarginLeft, chipTokens.clearContentMarginRight, chipTokens.closeIconSize)
+    },
+    readOnly: {
+      "true": /*#__PURE__*/css(["", ":var(--text-accent);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":rgba(12,143,230,0.11);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":rgba(12,143,230,0.11);", ":var(--text-accent);"], chipTokens.color, chipTokens.background, chipTokens.colorHover, chipTokens.backgroundHover, chipTokens.backgroundReadOnly, chipTokens.colorReadOnly, chipTokens.backgroundReadOnlyHover, chipTokens.colorReadOnlyHover)
+    }
+  }
+};

package/styled-components/es/examples/sds_engineer/components/Chip/Chip.js

@@ -0,0 +1,5 @@
+import { chipConfig } from '../../../../components/Chip';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Chip.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(chipConfig, config);
+export var Chip = /*#__PURE__*/component(mergedConfig);

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

@@ -0,0 +1,37 @@
+import { action } from '@storybook/addon-actions';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { chipConfig } from '../../../../components/Chip';
+import { mergeConfig } from '../../../../engines';
+import { WithTheme, argTypesFromConfig } from '../../../_helpers';
+
+import { config } from './Chip.config';
+import { Chip } from './Chip';
+
+const onClear = action('onClear');
+
+const meta: Meta<typeof Chip> = {
+    title: 'sds_engineer/Chip',
+    component: Chip,
+    decorators: [WithTheme],
+    argTypes: {
+        ...argTypesFromConfig(mergeConfig(chipConfig, config)),
+        ...disableProps(['onClear', 'disabled', 'contentLeft']),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Chip>;
+
+export const Default: Story = {
+    args: {
+        text: 'Hello',
+        view: 'primary',
+        size: 'm',
+        hasClear: true,
+        readOnly: false,
+        onClear,
+    },
+};

package/styled-components/es/examples/sds_engineer/components/Counter/Counter.config.js

@@ -0,0 +1,23 @@
+import { css } from 'styled-components';
+import { counterTokens } from '../../../../components/Counter';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'xs'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--inverse-text-primary);", ":var(--surface-solid-default);"], counterTokens.color, counterTokens.background),
+      accent: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-accent);"], counterTokens.color, counterTokens.background),
+      positive: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-positive);"], counterTokens.color, counterTokens.background),
+      warning: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-warning);"], counterTokens.color, counterTokens.background),
+      negative: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--surface-negative);"], counterTokens.color, counterTokens.background),
+      dark: /*#__PURE__*/css(["", ":var(--on-dark-text-primary);", ":var(--on-light-surface-solid-default);"], counterTokens.color, counterTokens.background),
+      light: /*#__PURE__*/css(["", ":var(--on-light-text-primary);", ":var(--on-dark-surface-solid-default);"], counterTokens.color, counterTokens.background)
+    },
+    size: {
+      xs: /*#__PURE__*/css(["", ":0.5rem;", ":1rem;", ":0.25rem;", ":0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], counterTokens.borderRadius, counterTokens.height, counterTokens.paddingRight, counterTokens.paddingLeft, counterTokens.fontFamily, counterTokens.fontSize, counterTokens.fontStyle, counterTokens.fontWeight, counterTokens.letterSpacing, counterTokens.lineHeight),
+      xxs: /*#__PURE__*/css(["", ":0.5rem;", ":0.75rem;", ":0.25rem;", ":0.25rem;", ":var(--plasma-typo-body-xxs-font-family);", ":var(--plasma-typo-body-xxs-font-size);", ":var(--plasma-typo-body-xxs-font-style);", ":var(--plasma-typo-body-xxs-font-weight);", ":var(--plasma-typo-body-xxs-letter-spacing);", ":var(--plasma-typo-body-xxs-line-height);"], counterTokens.borderRadius, counterTokens.height, counterTokens.paddingRight, counterTokens.paddingLeft, counterTokens.fontFamily, counterTokens.fontSize, counterTokens.fontStyle, counterTokens.fontWeight, counterTokens.letterSpacing, counterTokens.lineHeight)
+    }
+  }
+};

package/styled-components/es/examples/sds_engineer/components/Counter/Counter.js

@@ -0,0 +1,5 @@
+import { counterConfig } from '../../../../components/Counter';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Counter.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(counterConfig, config);
+export var Counter = /*#__PURE__*/component(mergedConfig);

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

@@ -0,0 +1,41 @@
+import React from 'react';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Counter } from './Counter';
+
+const meta: Meta<typeof Counter> = {
+    title: 'sds_engineer/Counter',
+    component: Counter,
+    decorators: [WithTheme],
+    argTypes: {
+        size: {
+            options: ['xs', 'xxs'],
+            control: {
+                type: 'select',
+            },
+        },
+        view: {
+            options: ['default', 'accent', 'positive', 'warning', 'negative', 'dark', 'light'],
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['contentLeft', 'contentRight']),
+    },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Counter>;
+
+export const Default: Story = {
+    args: {
+        count: 25,
+        maxCount: 100,
+        view: 'default',
+        size: 'xs',
+    },
+};

package/styled-components/es/examples/sds_engineer/components/Divider/Divider.config.js

@@ -0,0 +1,25 @@
+import { css } from 'styled-components';
+import { dividerTokens } from '../../../../components/Divider';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    orientation: 'horizontal'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--surface-transparent-tertiary);"], dividerTokens.background),
+      dark: /*#__PURE__*/css(["", ":var(--on-dark-surface-transparent-tertiary);"], dividerTokens.background),
+      light: /*#__PURE__*/css(["", ":var(--on-light-surface-transparent-tertiary);"], dividerTokens.background),
+      // TODO поменять на корректный токен --inverse-surface-transparent-tertiary когда он появится
+      inverse: /*#__PURE__*/css(["", ":var(--inverse-text-tertiary);"], dividerTokens.background)
+    },
+    size: {
+      m: /*#__PURE__*/css(["", ":0.0625rem;"], dividerTokens.borderRadius)
+    },
+    orientation: {
+      horizontal: /*#__PURE__*/css(["", ":0.0625rem;"], dividerTokens.baseSideSize),
+      vertical: /*#__PURE__*/css(["", ":0.0625rem;"], dividerTokens.baseSideSize)
+    }
+  }
+};

package/styled-components/es/examples/sds_engineer/components/Divider/Divider.js

@@ -0,0 +1,5 @@
+import { dividerConfig } from '../../../../components/Divider';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Divider.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(dividerConfig, config);
+export var Divider = /*#__PURE__*/component(mergedConfig);

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import type { ComponentProps } from 'react';
+import styled from 'styled-components';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { bodyS } from '../../../../mixins';
+
+import { Divider } from './Divider';
+
+const meta: Meta<typeof Divider> = {
+    title: 'sds_engineer/Divider',
+    decorators: [WithTheme],
+    argTypes: {
+        orientation: {
+            options: ['horizontal', 'vertical'],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'horizontal' } },
+        },
+        view: {
+            options: ['default', 'dark', 'light', 'inverse'],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'default' } },
+        },
+    },
+};
+
+export default meta;
+
+const StyledWrapper = styled.div<{ orientation?: string }>`
+    display: inline-flex;
+    gap: 0.5rem;
+    padding: 1rem;
+    background: #aab1e9;
+    align-items: center;
+    justify-content: center;
+    flex-direction: ${(props) => (props.orientation === 'horizontal' ? 'column' : 'row')};
+`;
+
+const StyledBody = styled.div`
+    ${bodyS};
+`;
+
+export const Default: StoryObj<ComponentProps<typeof Divider>> = {
+    args: {
+        view: 'default',
+        orientation: 'horizontal',
+        length: '100%',
+    },
+    render: (args) => (
+        <StyledWrapper orientation={args.orientation}>
+            <StyledBody>Before</StyledBody>
+            <Divider {...args} />
+            <StyledBody>After</StyledBody>
+        </StyledWrapper>
+    ),
+};

package/styled-components/es/examples/sds_engineer/components/Drawer/Drawer.config.js

@@ -0,0 +1,20 @@
+import { css } from 'styled-components';
+import { drawerTokens } from '../../../../components/Drawer';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--surface-solid-card);", ":0 3.75rem 7rem -0.5rem rgba(0,0,0,0.08);", ":var(--surface-transparent-primary);", ":var(--overlay-blur);", ":var(--overlay-soft);"], drawerTokens.background, drawerTokens.shadow, drawerTokens.contentBackgroundColor, drawerTokens.drawerOverlayWithBlurColor, drawerTokens.drawerOverlayColor)
+    },
+    size: {
+      m: /*#__PURE__*/css(["", ":1.5rem;"], drawerTokens.padding)
+    },
+    borderRadius: {
+      none: /*#__PURE__*/css(["", ":0;"], drawerTokens.borderRadius),
+      "default": /*#__PURE__*/css(["", ":1.25rem;"], drawerTokens.borderRadius)
+    }
+  }
+};

package/styled-components/es/examples/sds_engineer/components/Drawer/Drawer.js

@@ -0,0 +1,12 @@
+import { drawerContentConfig, drawerFooterConfig, drawerHeaderConfig } from '../../../../components/Drawer';
+import { drawerConfig } from '../../../../components/Drawer/Drawer';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Drawer.config';
+var mergedConfig = /*#__PURE__*/mergeConfig(drawerConfig, config);
+export var Drawer = /*#__PURE__*/component(mergedConfig);
+var mergedContentConfig = /*#__PURE__*/mergeConfig(drawerContentConfig);
+export var DrawerContent = /*#__PURE__*/component(mergedContentConfig);
+var mergedHeaderConfig = /*#__PURE__*/mergeConfig(drawerHeaderConfig);
+export var DrawerHeader = /*#__PURE__*/component(mergedHeaderConfig);
+var mergedFooterConfig = /*#__PURE__*/mergeConfig(drawerFooterConfig);
+export var DrawerFooter = /*#__PURE__*/component(mergedFooterConfig);

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

@@ -0,0 +1,218 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { Button } from '../Button/Button';
+import { WithTheme } from '../../../_helpers';
+import { Heading } from '../../../typograpy/components/Heading/Heading';
+import { IconDone } from '../../../../components/_Icon';
+import { SSRProvider } from '../../../../components/SSRProvider';
+import { PopupProvider } from '../Popup/Popup';
+import type { ClosePlacementType } from '../../../../components/Drawer';
+
+import { Drawer, DrawerContent, DrawerFooter, DrawerHeader } from './Drawer';
+
+export default {
+    title: 'sds_engineer/Drawer',
+    decorators: [WithTheme],
+    argTypes: {
+        placement: {
+            options: ['top', 'bottom', 'right', 'left'],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'center' } },
+        },
+        offsetX: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        offsetY: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        closeOnEsc: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        closeOnOverlayClick: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        withBlur: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: false } },
+        },
+        showHeader: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        showFooter: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        showActions: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        closePlacement: {
+            options: ['right', 'left'],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'right' } },
+        },
+        borderRadius: {
+            options: ['none', 'default'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+} as Meta;
+
+type StoryDrawerProps = ComponentProps<typeof Drawer> & {
+    placement: string;
+    offsetX: number;
+    offsetY: number;
+    closeOnEsc: boolean;
+    closeOnOverlayClick: boolean;
+    showHeader: boolean;
+    showFooter: boolean;
+    showActions: boolean;
+    closePlacement: string;
+    hasClose: boolean;
+    asModal: boolean;
+};
+
+const StyledWrapper = styled.div`
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+`;
+
+const StyledContentWrapper = styled.div`
+    height: 80%;
+    display: flex;
+    flex-grow: 1;
+`;
+
+const StyledContent = styled.div`
+    background: #a8a875;
+    flex-grow: 1;
+    height: 100%;
+`;
+
+const StyledSection = styled.div`
+    background: #808080;
+    min-height: 20%;
+`;
+
+const StyledIconButton = styled(Button)`
+    position: relative;
+    width: 1.5rem;
+    height: 1.5rem;
+`;
+
+const StoryDrawerDemo = ({
+    showHeader,
+    showFooter,
+    showActions,
+    closePlacement,
+    offsetX,
+    offsetY,
+    ...rest
+}: StoryDrawerProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <SSRProvider>
+            <PopupProvider>
+                <StyledWrapper>
+                    <StyledSection>
+                        <Button text="Открыть панель" onClick={() => setIsOpen(true)} />
+                    </StyledSection>
+                    <StyledContentWrapper>
+                        <Drawer
+                            frame="theme-root"
+                            opened={isOpen}
+                            offset={[offsetX, offsetY]}
+                            onClose={() => setIsOpen(false)}
+                            {...rest}
+                        >
+                            <DrawerHeader
+                                closePlacement={closePlacement as ClosePlacementType}
+                                actions={
+                                    showActions && (
+                                        <StyledIconButton size="s" view="clear">
+                                            <IconDone size="s" />
+                                        </StyledIconButton>
+                                    )
+                                }
+                                onClose={() => setIsOpen(false)}
+                            >
+                                {showHeader && <Heading size="h3">Header</Heading>}
+                            </DrawerHeader>
+                            <DrawerContent>Content</DrawerContent>
+                            {showFooter && (
+                                <DrawerFooter>
+                                    <Heading size="h3">Footer</Heading>
+                                </DrawerFooter>
+                            )}
+                        </Drawer>
+                        <StyledContent>
+                            <Heading style={{ margin: '2rem' }} size="h2">
+                                Some basic content
+                            </Heading>
+                        </StyledContent>
+                    </StyledContentWrapper>
+                    <StyledSection />
+                </StyledWrapper>
+                <StyledContent>
+                    <Heading style={{ margin: '2rem' }} size="h2">
+                        Some basic content
+                    </Heading>
+                </StyledContent>
+            </PopupProvider>
+        </SSRProvider>
+    );
+};
+
+export const DrawerDemo: StoryObj<StoryDrawerProps> = {
+    args: {
+        placement: 'right',
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+        showHeader: true,
+        showFooter: true,
+        showActions: true,
+        hasClose: true,
+        asModal: true,
+        closePlacement: 'right',
+        width: '25vw',
+        height: '100dvh',
+        borderRadius: 'none',
+    },
+    render: (args) => <StoryDrawerDemo {...args} />,
+};

package/styled-components/es/examples/sds_engineer/components/Grid/Grid.config.js

@@ -0,0 +1,16 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { css } from 'styled-components';
+import { getBaseGridView, gridTokens } from '../../../../components/Grid';
+export var config = {
+  defaults: {
+    view: 'default'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css(["", ";", ":6;", ":0.5rem;", ":1rem;", ":0;", ":12;", ":0.5rem;", ":1.25rem;", ":35rem;", ":18;", ":0.5rem;", ":1.75rem;", ":49.125rem;", ":24;", ":0.5rem;", ":2.5rem;", ":60rem;", ":30;", ":0.5rem;", ":4rem;", ":75rem;"], /*#__PURE__*/getBaseGridView( /*#__PURE__*/_defineProperty( /*#__PURE__*/_defineProperty( /*#__PURE__*/_defineProperty( /*#__PURE__*/_defineProperty( /*#__PURE__*/_defineProperty({}, gridTokens.smallMMinWidth, 0), gridTokens.mediumSMinWidth, '35rem'), gridTokens.mediumMMinWidth, '49.125rem'), gridTokens.largeSMinWidth, '60rem'), gridTokens.largeMMinWidth, '75rem'), 'default'), gridTokens.smallMColsCount, gridTokens.smallMGap, gridTokens.smallMMargin, gridTokens.smallMMinWidth, gridTokens.mediumSColsCount, gridTokens.mediumSGap, gridTokens.mediumSMargin, gridTokens.mediumSMinWidth, gridTokens.mediumMColsCount, gridTokens.mediumMGap, gridTokens.mediumMMargin, gridTokens.mediumMMinWidth, gridTokens.largeSColsCount, gridTokens.largeSGap, gridTokens.largeSMargin, gridTokens.largeSMinWidth, gridTokens.largeMColsCount, gridTokens.largeMGap, gridTokens.largeMMargin, gridTokens.largeMMinWidth)
+    }
+  }
+};

package/styled-components/es/examples/sds_engineer/components/Grid/Grid.js

@@ -0,0 +1,6 @@
+import { gridConfig } from '../../../../components/Grid';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Grid.config';
+export { Row, Col } from '../../../../components/Grid';
+var mergedConfig = /*#__PURE__*/mergeConfig(gridConfig, config);
+export var Grid = /*#__PURE__*/component(mergedConfig);

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

@@ -0,0 +1,122 @@
+import React from 'react';
+import styled from 'styled-components';
+import type { Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Col, Grid, Row } from './Grid';
+
+const meta: Meta = {
+    title: 'sds_engineer/Grid',
+    decorators: [WithTheme],
+};
+
+export default meta;
+
+const StyledContent = styled.div`
+    height: 10rem;
+    width: 100%;
+    background: #f5f5dc;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--inverse-text-primary);
+`;
+
+export const Default = {
+    args: {
+        colsCount: 6,
+    },
+    render: ({ colsCount }) => (
+        <>
+            <Grid>
+                <Row>
+                    {Array(colsCount)
+                        .fill(true)
+                        .map((_, i) => (
+                            <Col size={1} key={colsCount + i}>
+                                <StyledContent>{i + 1}</StyledContent>
+                            </Col>
+                        ))}
+                </Row>
+            </Grid>
+        </>
+    ),
+};
+
+export const CustomColsPosition = {
+    render: () => (
+        <Grid>
+            <Row>
+                <Col
+                    smallM={{
+                        size: 1,
+                    }}
+                    mediumS={{
+                        size: 2,
+                    }}
+                    mediumM={{
+                        size: 3,
+                        offset: 1,
+                    }}
+                    largeS={{
+                        size: 4,
+                        offset: 1,
+                    }}
+                    largeM={{
+                        size: 5,
+                        offset: 2,
+                    }}
+                >
+                    <StyledContent>1</StyledContent>
+                </Col>
+                <Col
+                    smallM={{
+                        size: 1,
+                        offset: 1,
+                    }}
+                    mediumS={{
+                        size: 2,
+                        offset: 1,
+                    }}
+                    mediumM={{
+                        size: 4,
+                    }}
+                    largeS={{
+                        size: 4,
+                        offset: 3,
+                    }}
+                    largeM={{
+                        size: 5,
+                        offset: 1,
+                    }}
+                >
+                    <StyledContent>2</StyledContent>
+                </Col>
+                <Col
+                    smallM={{
+                        size: 1,
+                    }}
+                    mediumS={{
+                        size: 2,
+                        offset: 1,
+                    }}
+                    mediumM={{
+                        size: 2,
+                        offset: 2,
+                    }}
+                    largeS={{
+                        size: 3,
+                        offset: 4,
+                    }}
+                    largeM={{
+                        size: 6,
+                        offset: 3,
+                    }}
+                >
+                    <StyledContent>3</StyledContent>
+                </Col>
+            </Row>
+        </Grid>
+    ),
+};

package/styled-components/es/examples/sds_engineer/components/Image/Image.js

@@ -0,0 +1,4 @@
+import { imageConfig } from '../../../../components/Image';
+import { component, mergeConfig } from '../../../../engines';
+var mergedConfig = /*#__PURE__*/mergeConfig(imageConfig);
+export var Image = /*#__PURE__*/component(mergedConfig);