@salutejs/plasma-new-hope 0.193.0-canary.1559.11833429721.0 → 0.194.0-canary.1560.11837986621.0

package/styled-components/cjs/examples/plasma_b2c/components/Switch/Switch.stories.tsx

@@ -9,7 +9,7 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 
 import { config } from './Switch.config';
-import { Switch } from './Switch';
+import { Switch, SwitchOutline } from './Switch';
 
 type SwitchProps = ComponentProps<typeof Switch>;
 
@@ -72,3 +72,35 @@ export const Default: StoryObj<SwitchProps> = {
     },
     render: (args) => <StoryDefault {...args} />,
 };
+
+const StoryOutline = (args: SwitchProps) => {
+    const value = 'yes';
+    const name = 'agree';
+    const [checked, setChecked] = useState(true);
+
+    return (
+        <StyledWrapper>
+            <SwitchOutline
+                value={value}
+                name={name}
+                checked={checked}
+                onChange={(event) => {
+                    setChecked(event.target.checked);
+                    onChange(event);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...args}
+            />
+        </StyledWrapper>
+    );
+};
+
+export const Outline: StoryObj<SwitchProps> = {
+    args: {
+        size: 'm',
+        toggleSize: 'l',
+        disabled: false,
+    },
+    render: (args) => <StoryOutline {...args} />,
+};

package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.config.js

@@ -25,7 +25,7 @@ var config = exports.config = {
       s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.thumbBackgroundColor, _Switch.switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":0rem;", ":transparent;", ":transparent;", ":transparent;", ":transparent;", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.trackBorderWidth, _Switch.switchTokens.trackBorderColorOff, _Switch.switchTokens.trackBorderColorOffHover, _Switch.switchTokens.trackBorderColorOn, _Switch.switchTokens.trackBorderColorOnHover, _Switch.switchTokens.thumbBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColorOn, _Switch.switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)

package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.js

@@ -3,9 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Switch = void 0;
+exports.SwitchOutline = exports.Switch = void 0;
 var _Switch = /*#__PURE__*/require("../../../../components/Switch");
 var _engines = /*#__PURE__*/require("../../../../engines");
 var _Switch2 = /*#__PURE__*/require("./Switch.config");
+var _SwitchOutline = /*#__PURE__*/require("./Switch.outline.config");
 var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Switch.switchConfig, _Switch2.config);
-var Switch = exports.Switch = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var Switch = exports.Switch = /*#__PURE__*/(0, _engines.component)(mergedConfig);
+var mergedOutlineConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_Switch.switchConfig, _SwitchOutline.config);
+var SwitchOutline = exports.SwitchOutline = /*#__PURE__*/(0, _engines.component)(mergedOutlineConfig);

package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.outline.config.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _Switch = /*#__PURE__*/require("../../../../components/Switch");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    toggleSize: 'l',
+    labelPosition: 'before',
+    focused: 'true'
+  },
+  variations: {
+    size: {
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset),
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], _Switch.switchTokens.fontFamily, _Switch.switchTokens.fontStyle, _Switch.switchTokens.fontWeight, _Switch.switchTokens.lineHeight, _Switch.switchTokens.fontSize, _Switch.switchTokens.letterSpacing, _Switch.switchTokens.descriptionFontFamily, _Switch.switchTokens.descriptionFontStyle, _Switch.switchTokens.descriptionFontWeight, _Switch.switchTokens.descriptionLineHeight, _Switch.switchTokens.descriptionFontSize, _Switch.switchTokens.descriptionLetterSpacing, _Switch.switchTokens.verticalGap, _Switch.switchTokens.labelOffset)
+    },
+    toggleSize: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], _Switch.switchTokens.trackWidth, _Switch.switchTokens.trackHeight, _Switch.switchTokens.trackBorderRadius, _Switch.switchTokens.trackHeight, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbBorderRadius, _Switch.switchTokens.thumbSize, _Switch.switchTokens.thumbOffset, _Switch.switchTokens.thumbPressScale)
+    },
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":transparent;", ":transparent;", ":transparent;", ":0.0625rem;", ":var(--outline-secondary);", ":var(--outline-secondary-hover);", ":var(--outline-accent);", ":var(--outline-accent-hover);", ":var(--text-tertiary);", ":var(--text-accent);", ":0 1px 1px rgba(0,0,0,0.11);"], _Switch.switchTokens.labelColor, _Switch.switchTokens.descriptionColor, _Switch.switchTokens.trackBackgroundColorOn, _Switch.switchTokens.trackBackgroundColorOnHover, _Switch.switchTokens.trackBackgroundColorOff, _Switch.switchTokens.trackBackgroundColorOffHover, _Switch.switchTokens.trackBorderWidth, _Switch.switchTokens.trackBorderColorOff, _Switch.switchTokens.trackBorderColorOffHover, _Switch.switchTokens.trackBorderColorOn, _Switch.switchTokens.trackBorderColorOnHover, _Switch.switchTokens.thumbBackgroundColorOff, _Switch.switchTokens.thumbBackgroundColorOn, _Switch.switchTokens.thumbBoxShadow)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _Switch.switchTokens.disabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-accent);"], _Switch.switchTokens.trackFocusColor)
+    }
+  }
+};

package/styled-components/cjs/examples/plasma_web/components/Switch/Switch.stories.tsx

@@ -9,7 +9,7 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 
 import { config } from './Switch.config';
-import { Switch } from './Switch';
+import { Switch, SwitchOutline } from './Switch';
 
 type SwitchProps = ComponentProps<typeof Switch>;
 
@@ -72,3 +72,35 @@ export const Default: StoryObj<SwitchProps> = {
     },
     render: (args) => <StoryDefault {...args} />,
 };
+
+const StoryOutline = (args: SwitchProps) => {
+    const value = 'yes';
+    const name = 'agree';
+    const [checked, setChecked] = useState(true);
+
+    return (
+        <StyledWrapper>
+            <SwitchOutline
+                value={value}
+                name={name}
+                checked={checked}
+                onChange={(event) => {
+                    setChecked(event.target.checked);
+                    onChange(event);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...args}
+            />
+        </StyledWrapper>
+    );
+};
+
+export const Outline: StoryObj<SwitchProps> = {
+    args: {
+        size: 'm',
+        toggleSize: 'l',
+        disabled: false,
+    },
+    render: (args) => <StoryOutline {...args} />,
+};

package/styled-components/es/components/Switch/Switch.tokens.js

@@ -23,6 +23,11 @@ export var tokens = {
   verticalGap: '--plasma-switch-vertical-gap',
   trackWidth: '--plasma-switch__track-width',
   trackHeight: '--plasma-switch__track-height',
+  trackBorderWidth: '--plasma-switch__track-border',
+  trackBorderColorOn: '--plasma-switch__track-checked_true-border-color',
+  trackBorderColorOnHover: '--plasma-switch__track-checked_true_hovered_true-border-color',
+  trackBorderColorOff: '--plasma-switch__track-checked_false-border-color',
+  trackBorderColorOffHover: '--plasma-switch__track-checked_false_hovered_true-border-color',
   trackBorderRadius: '--plasma-switch__track-border-radius',
   // NOTE: could be intersection with checked
   trackBackgroundColorOn: '--plasma-switch__track_checked_true-bg-color',
@@ -34,7 +39,8 @@ export var tokens = {
   thumbOffset: '--plasma-switch__thumb-offset',
   thumbBorderRadius: '--plasma-switch__thumb-border-radius',
   thumbPressScale: '--plasma-switch__thumb-scale',
-  thumbBackgroundColor: '--plasma-switch__thumb-bg-color',
+  thumbBackgroundColorOn: '--plasma-switch__thumb_checked_true-bg-color',
+  thumbBackgroundColorOff: '--plasma-switch__thumb-checked_false-bg-color',
   thumbBoxShadow: '--plasma-switch__thumb-box-shadow',
   thumbBoxShadowOn: '--plasma-switch__thumb-box-shadow_checked_true',
   labelOffsetPrivate: '--plasma_private-switch__label-offset'

package/styled-components/es/components/Switch/_toggleSize/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../Switch.tokens';
 import { StyledTrigger } from '../Switch.styles';
-export var base = /*#__PURE__*/css(["", "{flex:0 0 var(", ");width:var(", ");height:var(", ");border-radius:var(", ");&::after{width:var(", ");height:var(", ");border-radius:var(", ");margin:auto var(", ");}}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], StyledTrigger, tokens.trackWidth, tokens.trackWidth, tokens.trackHeight, tokens.trackBorderRadius, tokens.thumbSize, tokens.thumbSize, tokens.thumbBorderRadius, tokens.thumbOffset, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);
+export var base = /*#__PURE__*/css(["", "{--plasma_private-thumbSize:calc(var(", ") - (2 * var(", ")));box-sizing:border-box;flex:0 0 var(", ");border-style:solid;border-width:var(", ");border-radius:var(", ");width:var(", ");height:var(", ");&::after{width:var(--plasma_private-thumbSize);height:var(--plasma_private-thumbSize);border-radius:var(", ");margin:auto var(", ");}}:active:not([disabled]) ", "::after{width:calc(var(", ") * var(", ",1));}"], StyledTrigger, tokens.thumbSize, tokens.trackBorderWidth, tokens.trackWidth, tokens.trackBorderWidth, tokens.trackBorderRadius, tokens.trackWidth, tokens.trackHeight, tokens.thumbBorderRadius, tokens.thumbOffset, StyledTrigger, tokens.thumbSize, tokens.thumbPressScale);

package/styled-components/es/components/Switch/_view/base.js

@@ -1,4 +1,4 @@
 import { css } from 'styled-components';
 import { tokens } from '../Switch.tokens';
 import { StyledTrigger, StyledInput, StyledLabel, StyledDescription } from '../Switch.styles';
-export var base = /*#__PURE__*/css(["", "{background-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{box-shadow:var(", ",var(", "));}", "{color:var(", ");}", "{color:var(", ");}"], StyledTrigger, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, StyledTrigger, tokens.thumbBackgroundColor, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow, StyledLabel, tokens.labelColor, StyledDescription, tokens.descriptionColor);
+export var base = /*#__PURE__*/css(["", "{background-color:var(", ");border-color:var(", ");}", ":not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));border-color:var(", ",var(", "));}", ":checked ~ ", "{background-color:var(", ");border-color:var(", ");}", ":checked:not([disabled]) ~ ", ":hover{background-color:var(", ",var(", "));border-color:var(", ",var(", "));}", "::after{background-color:var(", ");box-shadow:var(", ");}", ":checked ~ ", "::after{background-color:var(", ");box-shadow:var(", ",var(", "));}", "{color:var(", ");}", "{color:var(", ");}"], StyledTrigger, tokens.trackBackgroundColorOff, tokens.trackBorderColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOffHover, tokens.trackBackgroundColorOff, tokens.trackBorderColorOffHover, tokens.trackBorderColorOff, StyledInput, StyledTrigger, tokens.trackBackgroundColorOn, tokens.trackBorderColorOn, StyledInput, StyledTrigger, tokens.trackBackgroundColorOnHover, tokens.trackBackgroundColorOn, tokens.trackBorderColorOnHover, tokens.trackBorderColorOn, StyledTrigger, tokens.thumbBackgroundColorOff, tokens.thumbBoxShadow, StyledInput, StyledTrigger, tokens.thumbBackgroundColorOn, tokens.thumbBoxShadowOn, tokens.thumbBoxShadow, StyledLabel, tokens.labelColor, StyledDescription, tokens.descriptionColor);

package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.config.js

@@ -19,7 +19,7 @@ export var config = {
       s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.thumbBackgroundColor, switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":0rem;", ":transparent;", ":transparent;", ":transparent;", ":transparent;", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.trackBorderWidth, switchTokens.trackBorderColorOff, switchTokens.trackBorderColorOffHover, switchTokens.trackBorderColorOn, switchTokens.trackBorderColorOnHover, switchTokens.thumbBackgroundColorOff, switchTokens.thumbBackgroundColorOn, switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)

package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.js

@@ -1,5 +1,8 @@
 import { switchConfig } from '../../../../components/Switch';
 import { component, mergeConfig } from '../../../../engines';
 import { config } from './Switch.config';
+import { config as outlineConfig } from './Switch.outline.config';
 var mergedConfig = /*#__PURE__*/mergeConfig(switchConfig, config);
-export var Switch = /*#__PURE__*/component(mergedConfig);
+export var Switch = /*#__PURE__*/component(mergedConfig);
+var mergedOutlineConfig = /*#__PURE__*/mergeConfig(switchConfig, outlineConfig);
+export var SwitchOutline = /*#__PURE__*/component(mergedOutlineConfig);

package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.outline.config.js

@@ -0,0 +1,31 @@
+import { css } from 'styled-components';
+import { switchTokens } from '../../../../components/Switch';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    toggleSize: 'l',
+    labelPosition: 'before',
+    focused: 'true'
+  },
+  variations: {
+    size: {
+      s: /*#__PURE__*/css(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset),
+      m: /*#__PURE__*/css(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset),
+      l: /*#__PURE__*/css(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset)
+    },
+    toggleSize: {
+      l: /*#__PURE__*/css(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale),
+      s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
+    },
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":transparent;", ":transparent;", ":transparent;", ":0.0625rem;", ":var(--outline-secondary);", ":var(--outline-secondary-hover);", ":var(--outline-accent);", ":var(--outline-accent-hover);", ":var(--text-tertiary);", ":var(--text-accent);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.trackBorderWidth, switchTokens.trackBorderColorOff, switchTokens.trackBorderColorOffHover, switchTokens.trackBorderColorOn, switchTokens.trackBorderColorOnHover, switchTokens.thumbBackgroundColorOff, switchTokens.thumbBackgroundColorOn, switchTokens.thumbBoxShadow)
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/css(["", ":var(--surface-accent);"], switchTokens.trackFocusColor)
+    }
+  }
+};

package/styled-components/es/examples/plasma_b2c/components/Switch/Switch.stories.tsx

@@ -9,7 +9,7 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 
 import { config } from './Switch.config';
-import { Switch } from './Switch';
+import { Switch, SwitchOutline } from './Switch';
 
 type SwitchProps = ComponentProps<typeof Switch>;
 
@@ -72,3 +72,35 @@ export const Default: StoryObj<SwitchProps> = {
     },
     render: (args) => <StoryDefault {...args} />,
 };
+
+const StoryOutline = (args: SwitchProps) => {
+    const value = 'yes';
+    const name = 'agree';
+    const [checked, setChecked] = useState(true);
+
+    return (
+        <StyledWrapper>
+            <SwitchOutline
+                value={value}
+                name={name}
+                checked={checked}
+                onChange={(event) => {
+                    setChecked(event.target.checked);
+                    onChange(event);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...args}
+            />
+        </StyledWrapper>
+    );
+};
+
+export const Outline: StoryObj<SwitchProps> = {
+    args: {
+        size: 'm',
+        toggleSize: 'l',
+        disabled: false,
+    },
+    render: (args) => <StoryOutline {...args} />,
+};

package/styled-components/es/examples/plasma_web/components/Switch/Switch.config.js

@@ -19,7 +19,7 @@ export var config = {
       s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
     },
     view: {
-      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.thumbBackgroundColor, switchTokens.thumbBoxShadow)
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--surface-accent-hover);", ":var(--surface-transparent-tertiary);", ":var(--surface-transparent-tertiary-hover);", ":0rem;", ":transparent;", ":transparent;", ":transparent;", ":transparent;", ":var(--on-dark-surface-solid-default);", ":var(--on-dark-surface-solid-default);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.trackBorderWidth, switchTokens.trackBorderColorOff, switchTokens.trackBorderColorOffHover, switchTokens.trackBorderColorOn, switchTokens.trackBorderColorOnHover, switchTokens.thumbBackgroundColorOff, switchTokens.thumbBackgroundColorOn, switchTokens.thumbBoxShadow)
     },
     disabled: {
       "true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)

package/styled-components/es/examples/plasma_web/components/Switch/Switch.js

@@ -1,5 +1,8 @@
 import { switchConfig } from '../../../../components/Switch';
 import { component, mergeConfig } from '../../../../engines';
 import { config } from './Switch.config';
+import { config as outlineConfig } from './Switch.outline.config';
 var mergedConfig = /*#__PURE__*/mergeConfig(switchConfig, config);
-export var Switch = /*#__PURE__*/component(mergedConfig);
+export var Switch = /*#__PURE__*/component(mergedConfig);
+var mergedOutlineConfig = /*#__PURE__*/mergeConfig(switchConfig, outlineConfig);
+export var SwitchOutline = /*#__PURE__*/component(mergedOutlineConfig);

package/styled-components/es/examples/plasma_web/components/Switch/Switch.outline.config.js

@@ -0,0 +1,31 @@
+import { css } from 'styled-components';
+import { switchTokens } from '../../../../components/Switch';
+export var config = {
+  defaults: {
+    view: 'default',
+    size: 'm',
+    toggleSize: 'l',
+    labelPosition: 'before',
+    focused: 'true'
+  },
+  variations: {
+    size: {
+      s: /*#__PURE__*/css(["", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-xs-font-family);", ":var(--plasma-typo-body-xs-font-style);", ":var(--plasma-typo-body-xs-font-weight);", ":var(--plasma-typo-body-xs-line-height);", ":var(--plasma-typo-body-xs-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset),
+      m: /*#__PURE__*/css(["", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset),
+      l: /*#__PURE__*/css(["", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-line-height);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-m-font-family);", ":var(--plasma-typo-body-m-font-style);", ":var(--plasma-typo-body-m-font-weight);", ":var(--plasma-typo-body-m-line-height);", ":var(--plasma-typo-body-m-font-size);", ":var(--plasma-typo-body-xs-letter-spacing);", ":0.25rem;", ":0.75rem;"], switchTokens.fontFamily, switchTokens.fontStyle, switchTokens.fontWeight, switchTokens.lineHeight, switchTokens.fontSize, switchTokens.letterSpacing, switchTokens.descriptionFontFamily, switchTokens.descriptionFontStyle, switchTokens.descriptionFontWeight, switchTokens.descriptionLineHeight, switchTokens.descriptionFontSize, switchTokens.descriptionLetterSpacing, switchTokens.verticalGap, switchTokens.labelOffset)
+    },
+    toggleSize: {
+      l: /*#__PURE__*/css(["", ":2.75rem;", ":1.75rem;", ":calc(var(", ") / 2);", ":1.5rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale),
+      s: /*#__PURE__*/css(["", ":2rem;", ":1.25rem;", ":calc(var(", ") / 2);", ":1rem;", ":calc(var(", ") / 2);", ":0.125rem;", ":1.25;"], switchTokens.trackWidth, switchTokens.trackHeight, switchTokens.trackBorderRadius, switchTokens.trackHeight, switchTokens.thumbSize, switchTokens.thumbBorderRadius, switchTokens.thumbSize, switchTokens.thumbOffset, switchTokens.thumbPressScale)
+    },
+    view: {
+      "default": /*#__PURE__*/css(["", ":var(--text-primary);", ":var(--text-secondary);", ":transparent;", ":transparent;", ":transparent;", ":transparent;", ":0.0625rem;", ":var(--outline-secondary);", ":var(--outline-secondary-hover);", ":var(--outline-accent);", ":var(--outline-accent-hover);", ":var(--text-tertiary);", ":var(--text-accent);", ":0 1px 1px rgba(0,0,0,0.11);"], switchTokens.labelColor, switchTokens.descriptionColor, switchTokens.trackBackgroundColorOn, switchTokens.trackBackgroundColorOnHover, switchTokens.trackBackgroundColorOff, switchTokens.trackBackgroundColorOffHover, switchTokens.trackBorderWidth, switchTokens.trackBorderColorOff, switchTokens.trackBorderColorOffHover, switchTokens.trackBorderColorOn, switchTokens.trackBorderColorOnHover, switchTokens.thumbBackgroundColorOff, switchTokens.thumbBackgroundColorOn, switchTokens.thumbBoxShadow)
+    },
+    disabled: {
+      "true": /*#__PURE__*/css(["", ":0.4;"], switchTokens.disabledOpacity)
+    },
+    focused: {
+      "true": /*#__PURE__*/css(["", ":var(--surface-accent);"], switchTokens.trackFocusColor)
+    }
+  }
+};

package/styled-components/es/examples/plasma_web/components/Switch/Switch.stories.tsx

@@ -9,7 +9,7 @@ import { mergeConfig } from '../../../../engines';
 import { WithTheme, argTypesFromConfig } from '../../../_helpers';
 
 import { config } from './Switch.config';
-import { Switch } from './Switch';
+import { Switch, SwitchOutline } from './Switch';
 
 type SwitchProps = ComponentProps<typeof Switch>;
 
@@ -72,3 +72,35 @@ export const Default: StoryObj<SwitchProps> = {
     },
     render: (args) => <StoryDefault {...args} />,
 };
+
+const StoryOutline = (args: SwitchProps) => {
+    const value = 'yes';
+    const name = 'agree';
+    const [checked, setChecked] = useState(true);
+
+    return (
+        <StyledWrapper>
+            <SwitchOutline
+                value={value}
+                name={name}
+                checked={checked}
+                onChange={(event) => {
+                    setChecked(event.target.checked);
+                    onChange(event);
+                }}
+                onFocus={onFocus}
+                onBlur={onBlur}
+                {...args}
+            />
+        </StyledWrapper>
+    );
+};
+
+export const Outline: StoryObj<SwitchProps> = {
+    args: {
+        size: 'm',
+        toggleSize: 'l',
+        disabled: false,
+    },
+    render: (args) => <StoryOutline {...args} />,
+};

package/types/components/Switch/Switch.tokens.d.ts

@@ -20,6 +20,11 @@ export declare const tokens: {
     verticalGap: string;
     trackWidth: string;
     trackHeight: string;
+    trackBorderWidth: string;
+    trackBorderColorOn: string;
+    trackBorderColorOnHover: string;
+    trackBorderColorOff: string;
+    trackBorderColorOffHover: string;
     trackBorderRadius: string;
     trackBackgroundColorOn: string;
     trackBackgroundColorOnHover: string;
@@ -30,7 +35,8 @@ export declare const tokens: {
     thumbOffset: string;
     thumbBorderRadius: string;
     thumbPressScale: string;
-    thumbBackgroundColor: string;
+    thumbBackgroundColorOn: string;
+    thumbBackgroundColorOff: string;
     thumbBoxShadow: string;
     thumbBoxShadowOn: string;
     labelOffsetPrivate: string;

package/types/components/Switch/Switch.tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;IAwBf,6DAA6D;;;;;;;;;;;;;;;;;;;CA0BhE,CAAC;AAEF,eAAO,MAAM,OAAO;;;CAGnB,CAAC"}
+{"version":3,"file":"Switch.tokens.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tokens.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;IAwBf,6DAA6D;;;;;;;;;;;;;;;;;;;;;;;;;CAiChE,CAAC;AAEF,eAAO,MAAM,OAAO;;;CAGnB,CAAC"}

package/types/components/Switch/_toggleSize/base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/_toggleSize/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAkBhB,CAAC"}
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/_toggleSize/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAyBhB,CAAC"}

package/types/components/Switch/_view/base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/_view/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAiChB,CAAC"}
+{"version":3,"file":"base.d.ts","sourceRoot":"","sources":["../../../../src/components/Switch/_view/base.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,IAAI,0CAsChB,CAAC"}

package/types/examples/plasma_b2c/components/Switch/Switch.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Switch/Switch.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGlB,CAAC"}
+{"version":3,"file":"Switch.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Switch/Switch.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GlB,CAAC"}

package/types/examples/plasma_b2c/components/Switch/Switch.d.ts

@@ -19,4 +19,24 @@ export declare const Switch: import("react").FunctionComponent<import("../../../
         true: import("@linaria/core").LinariaClassName;
     };
 }> & import("../../../../components/Switch").SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const SwitchOutline: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
+    size: {
+        s: import("@linaria/core").LinariaClassName;
+        m: import("@linaria/core").LinariaClassName;
+        l: import("@linaria/core").LinariaClassName;
+    };
+    toggleSize: {
+        l: import("@linaria/core").LinariaClassName;
+        s: import("@linaria/core").LinariaClassName;
+    };
+    view: {
+        default: import("@linaria/core").LinariaClassName;
+    };
+    disabled: {
+        true: import("@linaria/core").LinariaClassName;
+    };
+    focused: {
+        true: import("@linaria/core").LinariaClassName;
+    };
+}> & import("../../../../components/Switch").SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Switch.d.ts.map

package/types/examples/plasma_b2c/components/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Switch/Switch.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;2GAA0B,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Switch/Switch.ts"],"names":[],"mappings":";AAQA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;2GAA0B,CAAC;AAI9C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;2GAAiC,CAAC"}

package/types/examples/plasma_b2c/components/Switch/Switch.outline.config.d.ts

@@ -0,0 +1,30 @@
+export declare const config: {
+    defaults: {
+        view: string;
+        size: string;
+        toggleSize: string;
+        labelPosition: string;
+        focused: string;
+    };
+    variations: {
+        size: {
+            s: import("@linaria/core").LinariaClassName;
+            m: import("@linaria/core").LinariaClassName;
+            l: import("@linaria/core").LinariaClassName;
+        };
+        toggleSize: {
+            l: import("@linaria/core").LinariaClassName;
+            s: import("@linaria/core").LinariaClassName;
+        };
+        view: {
+            default: import("@linaria/core").LinariaClassName;
+        };
+        disabled: {
+            true: import("@linaria/core").LinariaClassName;
+        };
+        focused: {
+            true: import("@linaria/core").LinariaClassName;
+        };
+    };
+};
+//# sourceMappingURL=Switch.outline.config.d.ts.map

package/types/examples/plasma_b2c/components/Switch/Switch.outline.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.outline.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_b2c/components/Switch/Switch.outline.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GlB,CAAC"}

package/types/examples/plasma_web/components/Switch/Switch.config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Switch/Switch.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsGlB,CAAC"}
+{"version":3,"file":"Switch.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Switch/Switch.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GlB,CAAC"}

package/types/examples/plasma_web/components/Switch/Switch.d.ts

@@ -19,4 +19,24 @@ export declare const Switch: import("react").FunctionComponent<import("../../../
         true: import("@linaria/core").LinariaClassName;
     };
 }> & import("../../../../components/Switch").SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const SwitchOutline: import("react").FunctionComponent<import("../../../../engines/types").PropsType<{
+    size: {
+        s: import("@linaria/core").LinariaClassName;
+        m: import("@linaria/core").LinariaClassName;
+        l: import("@linaria/core").LinariaClassName;
+    };
+    toggleSize: {
+        l: import("@linaria/core").LinariaClassName;
+        s: import("@linaria/core").LinariaClassName;
+    };
+    view: {
+        default: import("@linaria/core").LinariaClassName;
+    };
+    disabled: {
+        true: import("@linaria/core").LinariaClassName;
+    };
+    focused: {
+        true: import("@linaria/core").LinariaClassName;
+    };
+}> & import("../../../../components/Switch").SwitchProps & import("react").RefAttributes<HTMLInputElement>>;
 //# sourceMappingURL=Switch.d.ts.map

package/types/examples/plasma_web/components/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Switch/Switch.ts"],"names":[],"mappings":";AAOA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;2GAA0B,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Switch/Switch.ts"],"names":[],"mappings":";AAQA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;2GAA0B,CAAC;AAI9C,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;2GAAiC,CAAC"}

package/types/examples/plasma_web/components/Switch/Switch.outline.config.d.ts

@@ -0,0 +1,30 @@
+export declare const config: {
+    defaults: {
+        view: string;
+        size: string;
+        toggleSize: string;
+        labelPosition: string;
+        focused: string;
+    };
+    variations: {
+        size: {
+            s: import("@linaria/core").LinariaClassName;
+            m: import("@linaria/core").LinariaClassName;
+            l: import("@linaria/core").LinariaClassName;
+        };
+        toggleSize: {
+            l: import("@linaria/core").LinariaClassName;
+            s: import("@linaria/core").LinariaClassName;
+        };
+        view: {
+            default: import("@linaria/core").LinariaClassName;
+        };
+        disabled: {
+            true: import("@linaria/core").LinariaClassName;
+        };
+        focused: {
+            true: import("@linaria/core").LinariaClassName;
+        };
+    };
+};
+//# sourceMappingURL=Switch.outline.config.d.ts.map

package/types/examples/plasma_web/components/Switch/Switch.outline.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.outline.config.d.ts","sourceRoot":"","sources":["../../../../../src/examples/plasma_web/components/Switch/Switch.outline.config.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4GlB,CAAC"}

package/cjs/components/Switch/_toggleSize/base_6i0904.css

@@ -1 +0,0 @@
-.b1wld3h3 .s2cs3kf{-webkit-flex:0 0 var(--plasma-switch__track-width);-ms-flex:0 0 var(--plasma-switch__track-width);flex:0 0 var(--plasma-switch__track-width);width:var(--plasma-switch__track-width);height:var(--plasma-switch__track-height);border-radius:var(--plasma-switch__track-border-radius);}.b1wld3h3 .s2cs3kf::after{width:var(--plasma-switch__thumb-size);height:var(--plasma-switch__thumb-size);border-radius:var(--plasma-switch__thumb-border-radius);margin:auto var(--plasma-switch__thumb-offset);}.b1wld3h3:active:not([disabled]) .s2cs3kf::after{width:calc(var(--plasma-switch__thumb-size) * var(--plasma-switch__thumb-scale,1));}

package/cjs/components/Switch/_view/base_yxkf3s.css

@@ -1 +0,0 @@
-.b1g0jmh3 .s2cs3kf{background-color:var(--plasma-switch__track_checked_false-bg-color);}.b1g0jmh3 .ssthlx1:not([disabled]) ~ .s2cs3kf:hover{background-color:var(--plasma-switch__track_checked_false_hovered_true-bg-color,var(--plasma-switch__track_checked_false-bg-color));}.b1g0jmh3 .ssthlx1:checked ~ .s2cs3kf{background-color:var(--plasma-switch__track_checked_true-bg-color);}.b1g0jmh3 .ssthlx1:checked:not([disabled]) ~ .s2cs3kf:hover{background-color:var(--plasma-switch__track_checked_true_hovered_true-bg-color,var(--plasma-switch__track_checked_true-bg-color));}.b1g0jmh3 .s2cs3kf::after{background-color:var(--plasma-switch__thumb-bg-color);box-shadow:var(--plasma-switch__thumb-box-shadow);}.b1g0jmh3 .ssthlx1:checked ~ .s2cs3kf::after{box-shadow:var(--plasma-switch__thumb-box-shadow_checked_true,var(--plasma-switch__thumb-box-shadow));}.b1g0jmh3 .s1ilr5eq{color:var(--plasma-switch__label-color);}.b1g0jmh3 .sdjnckq{color:var(--plasma-switch__description-color);}