@salutejs/plasma-new-hope 0.187.0-canary.1551.11740641367.0 → 0.187.1-canary.1517.11744378817.0

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

@@ -0,0 +1,108 @@
+import React, { ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { WithTheme } from '../../../_helpers';
+
+import { NumberInput } from './NumberInput';
+
+const onChange = action('onChange');
+const onDecrement = action('onDecrement');
+const onIncrement = action('onIncrement');
+
+const views = ['default', 'secondary', 'accent', 'clear'];
+const sizes = ['l', 'm', 's', 'xs'];
+const shapes = ['cornered', 'pilled'];
+const inputBackgroundTypes = ['fill', 'clear'];
+const segmentation = ['default', 'segmented', 'solid'];
+
+const meta: Meta<typeof NumberInput> = {
+    title: 'plasma_b2c/NumberInput',
+    component: NumberInput,
+    decorators: [WithTheme],
+    argTypes: {
+        min: {
+            control: {
+                type: 'number',
+            },
+        },
+        max: {
+            control: {
+                type: 'number',
+            },
+        },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        shape: {
+            options: shapes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        inputBackgroundType: {
+            options: inputBackgroundTypes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        segmentation: {
+            options: segmentation,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof NumberInput>;
+
+const StoryDefault = (args: StoryPropsDefault) => {
+    const [value, setValue] = useState(5);
+
+    const handleChange = (_: any, newValue: number) => {
+        setValue(newValue);
+        onChange(newValue);
+    };
+
+    return (
+        <NumberInput
+            {...args}
+            value={value}
+            onChange={handleChange}
+            onDecrement={onDecrement}
+            onIncrement={onIncrement}
+        />
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'l',
+        shape: 'cornered',
+        inputBackgroundType: 'fill',
+        segmentation: 'default',
+        min: 0,
+        max: 9,
+        step: 1,
+        width: 188,
+        isManualInput: false,
+        textBefore: '',
+        textAfter: '',
+        isLoading: false,
+        disabled: false,
+    },
+    render: StoryDefault,
+};

package/styled-components/cjs/examples/plasma_b2c/components/Steps/Steps.config.js

@@ -13,7 +13,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.disabledOpacity)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":var(--surface-accent);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.focusColor, _Steps.stepsTokens.disabledOpacity)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":2.25rem;", ":0.5rem;", ":1rem;", ":0.75rem;", ":0.375rem;", ":2rem;", ":1.0625rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":1.5rem;", ":1.25rem;", ":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);", ":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);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":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.125rem;"], _Steps.stepsTokens.indicatorSize, _Steps.stepsTokens.activeIndicatorSize, _Steps.stepsTokens.bulletSize, _Steps.stepsTokens.activeBulletSize, _Steps.stepsTokens.titlePaddingTop, _Steps.stepsTokens.contentPaddingTop, _Steps.stepsTokens.contentSidePadding, _Steps.stepsTokens.contentVerticalPadding, _Steps.stepsTokens.verticalContentPaddingLeft, _Steps.stepsTokens.smallIndicatorIndentHeight, _Steps.stepsTokens.largeIndicatorIndentHeight, _Steps.stepsTokens.smallBulletIndentHeight, _Steps.stepsTokens.largeBulletIndentHeight, _Steps.stepsTokens.indicatorFontFamily, _Steps.stepsTokens.indicatorFontSize, _Steps.stepsTokens.indicatorFontStyle, _Steps.stepsTokens.indicatorFontWeight, _Steps.stepsTokens.indicatorLetterSpacing, _Steps.stepsTokens.indicatorLineHeight, _Steps.stepsTokens.activeIndicatorFontFamily, _Steps.stepsTokens.activeIndicatorFontSize, _Steps.stepsTokens.activeIndicatorFontStyle, _Steps.stepsTokens.activeIndicatorFontWeight, _Steps.stepsTokens.activeIndicatorLetterSpacing, _Steps.stepsTokens.activeIndicatorLineHeight, _Steps.stepsTokens.titleFontFamily, _Steps.stepsTokens.titleFontSize, _Steps.stepsTokens.titleFontStyle, _Steps.stepsTokens.titleFontWeight, _Steps.stepsTokens.titleLetterSpacing, _Steps.stepsTokens.titleLineHeight, _Steps.stepsTokens.contentFontFamily, _Steps.stepsTokens.contentFontSize, _Steps.stepsTokens.contentFontStyle, _Steps.stepsTokens.contentFontWeight, _Steps.stepsTokens.contentLetterSpacing, _Steps.stepsTokens.contentLineHeight, _Steps.stepsTokens.dividerThickness),

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

@@ -118,7 +118,7 @@ const DefaultStory = (args) => {
     };
 
     return (
-        <div style={{ maxWidth, height: '400px' }}>
+        <div style={{ maxWidth, height: '600px' }}>
             <Steps
                 size={size}
                 items={items}

package/styled-components/cjs/examples/plasma_b2c/components/TextField/TextField.config.js

@@ -14,10 +14,10 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-primary-hover);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.clearColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.placeholderColorFocus, _TextField.textFieldTokens.clearPlaceholderColor, _TextField.textFieldTokens.clearPlaceholderColorFocus, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorHover, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.titleCaptionColor, _TextField.textFieldTokens.hintIconColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.dividerColor, _TextField.textFieldTokens.dividerColorHover, _TextField.textFieldTokens.dividerColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
-      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-hover);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.clearColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.placeholderColorFocus, _TextField.textFieldTokens.clearPlaceholderColor, _TextField.textFieldTokens.clearPlaceholderColorFocus, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorHover, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.titleCaptionColor, _TextField.textFieldTokens.hintIconColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.dividerColor, _TextField.textFieldTokens.dividerColorHover, _TextField.textFieldTokens.dividerColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
-      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-hover);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.clearColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.placeholderColorFocus, _TextField.textFieldTokens.clearPlaceholderColor, _TextField.textFieldTokens.clearPlaceholderColorFocus, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorHover, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.titleCaptionColor, _TextField.textFieldTokens.hintIconColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.dividerColor, _TextField.textFieldTokens.dividerColorHover, _TextField.textFieldTokens.dividerColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
-      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-hover);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.clearColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.placeholderColorFocus, _TextField.textFieldTokens.clearPlaceholderColor, _TextField.textFieldTokens.clearPlaceholderColorFocus, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorHover, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.titleCaptionColor, _TextField.textFieldTokens.hintIconColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.dividerColor, _TextField.textFieldTokens.dividerColorHover, _TextField.textFieldTokens.dividerColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--surface-transparent-primary);", ":var(--surface-transparent-secondary);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.clearColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.placeholderColorFocus, _TextField.textFieldTokens.clearPlaceholderColor, _TextField.textFieldTokens.clearPlaceholderColorFocus, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.titleCaptionColor, _TextField.textFieldTokens.hintIconColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.dividerColor, _TextField.textFieldTokens.dividerColorHover, _TextField.textFieldTokens.dividerColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
+      positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-positive);", ":var(--text-positive);", ":var(--surface-transparent-positive);", ":var(--surface-transparent-positive-active);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-positive);", ":var(--surface-positive);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.clearColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.placeholderColorFocus, _TextField.textFieldTokens.clearPlaceholderColor, _TextField.textFieldTokens.clearPlaceholderColorFocus, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.titleCaptionColor, _TextField.textFieldTokens.hintIconColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.dividerColor, _TextField.textFieldTokens.dividerColorHover, _TextField.textFieldTokens.dividerColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
+      warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-warning);", ":var(--text-warning);", ":var(--surface-transparent-warning);", ":var(--surface-transparent-warning-active);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-warning);", ":var(--surface-warning);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.clearColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.placeholderColorFocus, _TextField.textFieldTokens.clearPlaceholderColor, _TextField.textFieldTokens.clearPlaceholderColorFocus, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.titleCaptionColor, _TextField.textFieldTokens.hintIconColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.dividerColor, _TextField.textFieldTokens.dividerColorHover, _TextField.textFieldTokens.dividerColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor),
+      negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-tertiary);", ":var(--text-negative);", ":var(--text-negative);", ":var(--surface-transparent-negative);", ":var(--surface-transparent-negative-active);", ":var(--text-accent);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--text-primary);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary-active);", ":var(--surface-negative);", ":var(--surface-negative);", ":var(--surface-accent);", ":var(--text-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--surface-transparent-secondary-active);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":0.72;", ":var(--text-accent);", ":var(--surface-negative);", ":var(--text-tertiary);"], _TextField.textFieldTokens.color, _TextField.textFieldTokens.clearColor, _TextField.textFieldTokens.placeholderColor, _TextField.textFieldTokens.placeholderColorFocus, _TextField.textFieldTokens.clearPlaceholderColor, _TextField.textFieldTokens.clearPlaceholderColorFocus, _TextField.textFieldTokens.backgroundColor, _TextField.textFieldTokens.backgroundColorFocus, _TextField.textFieldTokens.caretColor, _TextField.textFieldTokens.textBeforeColor, _TextField.textFieldTokens.textAfterColor, _TextField.textFieldTokens.labelColor, _TextField.textFieldTokens.leftHelperColor, _TextField.textFieldTokens.titleCaptionColor, _TextField.textFieldTokens.hintIconColor, _TextField.textFieldTokens.contentSlotColor, _TextField.textFieldTokens.contentSlotColorHover, _TextField.textFieldTokens.contentSlotColorActive, _TextField.textFieldTokens.dividerColor, _TextField.textFieldTokens.dividerColorHover, _TextField.textFieldTokens.dividerColorFocus, _TextField.textFieldTokens.chipCloseIconColor, _TextField.textFieldTokens.chipColor, _TextField.textFieldTokens.chipBackground, _TextField.textFieldTokens.chipColorHover, _TextField.textFieldTokens.chipBackgroundHover, _TextField.textFieldTokens.chipColorActive, _TextField.textFieldTokens.chipBackgroundActive, _TextField.textFieldTokens.chipBackgroundReadOnly, _TextField.textFieldTokens.chipColorReadOnly, _TextField.textFieldTokens.chipBackgroundReadOnlyHover, _TextField.textFieldTokens.chipColorReadOnlyHover, _TextField.textFieldTokens.chipOpacityReadonly, _TextField.textFieldTokens.focusColor, _TextField.textFieldTokens.indicatorColor, _TextField.textFieldTokens.optionalColor)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":3.5rem;", ":1.0625rem 1.125rem 1.0625rem 1.125rem;", ":0.375rem;", ":0.875rem;", ":0.0625rem;", ":-0.0625rem 0.5rem -0.0625rem -0.125rem;", ":-0.0625rem -0.125rem -0.0625rem 0.75rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.75rem;", ":0.25rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":-0.688rem -0.5rem;", ":2.375rem;", ":-0.751rem -2rem auto auto;", ":0.562rem -2.063rem auto auto;", ":0.25rem;", ":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;", ":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.5625rem 0 0.125rem 0;", ":1.5625rem 0 0.5625rem 0;", ":0.25rem;", ":0.5rem;", ":auto;", ":2.75rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":0rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.5rem;", ":0.375rem;", ":0 0 0 0;", ":0.5rem auto auto -0.75rem;", ":0 0 auto auto;", ":0.25rem -0.625rem auto auto;", ":1.5rem auto auto -0.875rem;", ":1.5rem -0.875rem auto auto;", ":1.5rem -2.25rem auto auto;"], _TextField.textFieldTokens.height, _TextField.textFieldTokens.padding, _TextField.textFieldTokens.paddingWithChips, _TextField.textFieldTokens.borderRadius, _TextField.textFieldTokens.borderWidth, _TextField.textFieldTokens.leftContentMargin, _TextField.textFieldTokens.rightContentMargin, _TextField.textFieldTokens.fontFamily, _TextField.textFieldTokens.fontSize, _TextField.textFieldTokens.fontStyle, _TextField.textFieldTokens.fontWeight, _TextField.textFieldTokens.letterSpacing, _TextField.textFieldTokens.lineHeight, _TextField.textFieldTokens.labelOffset, _TextField.textFieldTokens.clearLabelOffset, _TextField.textFieldTokens.labelFontFamily, _TextField.textFieldTokens.labelFontSize, _TextField.textFieldTokens.labelFontStyle, _TextField.textFieldTokens.labelFontWeight, _TextField.textFieldTokens.labelLetterSpacing, _TextField.textFieldTokens.labelLineHeight, _TextField.textFieldTokens.hintMargin, _TextField.textFieldTokens.hintTargetSize, _TextField.textFieldTokens.hintInnerLabelPlacementOffset, _TextField.textFieldTokens.clearHintInnerLabelPlacementOffset, _TextField.textFieldTokens.titleCaptionInnerLabelOffset, _TextField.textFieldTokens.titleCaptionFontFamily, _TextField.textFieldTokens.titleCaptionFontSize, _TextField.textFieldTokens.titleCaptionFontStyle, _TextField.textFieldTokens.titleCaptionFontWeight, _TextField.textFieldTokens.titleCaptionLetterSpacing, _TextField.textFieldTokens.titleCaptionLineHeight, _TextField.textFieldTokens.leftHelperOffset, _TextField.textFieldTokens.leftHelperFontFamily, _TextField.textFieldTokens.leftHelperFontSize, _TextField.textFieldTokens.leftHelperFontStyle, _TextField.textFieldTokens.leftHelperFontWeight, _TextField.textFieldTokens.leftHelperLetterSpacing, _TextField.textFieldTokens.leftHelperLineHeight, _TextField.textFieldTokens.labelInnerPadding, _TextField.textFieldTokens.contentLabelInnerPadding, _TextField.textFieldTokens.chipGap, _TextField.textFieldTokens.chipBorderRadius, _TextField.textFieldTokens.chipWidth, _TextField.textFieldTokens.chipHeight, _TextField.textFieldTokens.chipPaddingRight, _TextField.textFieldTokens.chipPaddingLeft, _TextField.textFieldTokens.chipClearContentMarginLeft, _TextField.textFieldTokens.chipClearContentMarginRight, _TextField.textFieldTokens.chipCloseIconSize, _TextField.textFieldTokens.chipFontFamily, _TextField.textFieldTokens.chipFontSize, _TextField.textFieldTokens.chipFontStyle, _TextField.textFieldTokens.chipFontWeight, _TextField.textFieldTokens.chipLetterSpacing, _TextField.textFieldTokens.chipLineHeight, _TextField.textFieldTokens.indicatorSizeInner, _TextField.textFieldTokens.indicatorSizeOuter, _TextField.textFieldTokens.indicatorLabelPlacementInner, _TextField.textFieldTokens.indicatorLabelPlacementOuter, _TextField.textFieldTokens.indicatorLabelPlacementInnerRight, _TextField.textFieldTokens.indicatorLabelPlacementOuterRight, _TextField.textFieldTokens.clearIndicatorLabelPlacementInner, _TextField.textFieldTokens.clearIndicatorLabelPlacementInnerRight, _TextField.textFieldTokens.clearIndicatorHintInnerRight),

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.config = void 0;
+var _styledComponents = /*#__PURE__*/require("styled-components");
+var _NumberInput = /*#__PURE__*/require("../../../../components/NumberInput");
+var config = exports.config = {
+  defaults: {
+    view: 'default',
+    size: 'l',
+    shape: 'cornered',
+    inputBackgroundType: 'fill'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--text-negative);", ":var(--surface-negative);", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-tertiary);", ":var(--inverse-text-tertiary);", ":var(--surface-accent);", ":var(--surface-accent);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--surface-solid-default-hover);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-active);", ":var(--surface-solid-default-active);", ":0.4;", ":inherit;", ":inherit;"], _NumberInput.numberInputTokens.caretColor, _NumberInput.numberInputTokens.errorColor, _NumberInput.numberInputTokens.borderErrorColor, _NumberInput.numberInputTokens.color, _NumberInput.numberInputTokens.colorSolid, _NumberInput.numberInputTokens.additionalTextColor, _NumberInput.numberInputTokens.additionalTextColorSolid, _NumberInput.numberInputTokens.borderColorFocus, _NumberInput.numberInputTokens.borderColorSolidFocus, _NumberInput.numberInputTokens.backgroundColorSolid, _NumberInput.numberInputTokens.iconButtonColor, _NumberInput.numberInputTokens.iconButtonBackgroundColor, _NumberInput.numberInputTokens.iconButtonColorHover, _NumberInput.numberInputTokens.iconButtonColorSolidHover, _NumberInput.numberInputTokens.iconButtonBackgroundColorHover, _NumberInput.numberInputTokens.iconButtonColorActive, _NumberInput.numberInputTokens.iconButtonColorSolidActive, _NumberInput.numberInputTokens.iconButtonBackgroundColorActive, _NumberInput.numberInputTokens.actionButtonDisabledOpacity, _NumberInput.numberInputTokens.loaderSpinnerColor, _NumberInput.numberInputTokens.loaderSpinnerColorSolid),
+      secondary: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--text-negative);", ":var(--surface-negative);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--surface-accent);", ":var(--surface-accent);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":var(--text-primary);", ":var(--text-primary-hover);", ":var(--surface-transparent-secondary-hover);", ":var(--text-primary);", ":var(--text-primary-active);", ":var(--surface-transparent-secondary-active);", ":0.4;", ":inherit;", ":inherit;"], _NumberInput.numberInputTokens.caretColor, _NumberInput.numberInputTokens.errorColor, _NumberInput.numberInputTokens.borderErrorColor, _NumberInput.numberInputTokens.color, _NumberInput.numberInputTokens.colorSolid, _NumberInput.numberInputTokens.additionalTextColor, _NumberInput.numberInputTokens.additionalTextColorSolid, _NumberInput.numberInputTokens.borderColorFocus, _NumberInput.numberInputTokens.borderColorSolidFocus, _NumberInput.numberInputTokens.backgroundColorSolid, _NumberInput.numberInputTokens.iconButtonColor, _NumberInput.numberInputTokens.iconButtonBackgroundColor, _NumberInput.numberInputTokens.iconButtonColorHover, _NumberInput.numberInputTokens.iconButtonColorSolidHover, _NumberInput.numberInputTokens.iconButtonBackgroundColorHover, _NumberInput.numberInputTokens.iconButtonColorActive, _NumberInput.numberInputTokens.iconButtonColorSolidActive, _NumberInput.numberInputTokens.iconButtonBackgroundColorActive, _NumberInput.numberInputTokens.actionButtonDisabledOpacity, _NumberInput.numberInputTokens.loaderSpinnerColor, _NumberInput.numberInputTokens.loaderSpinnerColorSolid),
+      accent: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--inverse-text-primary);", ":var(--text-negative);", ":var(--surface-negative);", ":var(--text-primary);", ":var(--inverse-text-primary);", ":var(--text-tertiary);", ":var(--inverse-text-tertiary);", ":var(--surface-accent);", ":var(--light-background-primary);", ":var(--surface-accent);", ":var(--inverse-text-primary);", ":var(--surface-accent);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-hover);", ":var(--surface-accent-hover);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary-active);", ":var(--surface-accent-active);", ":0.4;", ":inherit;", ":inherit;"], _NumberInput.numberInputTokens.caretColor, _NumberInput.numberInputTokens.caretColorSolid, _NumberInput.numberInputTokens.errorColor, _NumberInput.numberInputTokens.borderErrorColor, _NumberInput.numberInputTokens.color, _NumberInput.numberInputTokens.colorSolid, _NumberInput.numberInputTokens.additionalTextColor, _NumberInput.numberInputTokens.additionalTextColorSolid, _NumberInput.numberInputTokens.borderColorFocus, _NumberInput.numberInputTokens.borderColorSolidFocus, _NumberInput.numberInputTokens.backgroundColorSolid, _NumberInput.numberInputTokens.iconButtonColor, _NumberInput.numberInputTokens.iconButtonBackgroundColor, _NumberInput.numberInputTokens.iconButtonColorHover, _NumberInput.numberInputTokens.iconButtonColorSolidHover, _NumberInput.numberInputTokens.iconButtonBackgroundColorHover, _NumberInput.numberInputTokens.iconButtonColorActive, _NumberInput.numberInputTokens.iconButtonColorSolidActive, _NumberInput.numberInputTokens.iconButtonBackgroundColorActive, _NumberInput.numberInputTokens.actionButtonDisabledOpacity, _NumberInput.numberInputTokens.loaderSpinnerColor, _NumberInput.numberInputTokens.loaderSpinnerColorSolid),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-accent);", ":var(--text-negative);", ":var(--surface-negative);", ":var(--text-primary);", ":var(--text-primary);", ":var(--text-tertiary);", ":var(--text-tertiary);", ":var(--surface-accent);", ":var(--surface-accent);", ":transparent;", ":var(--text-primary);", ":transparent;", ":var(--text-primary);", ":var(--text-primary-hover);", ":transparent;", ":var(--text-primary);", ":var(--surface-transparent-secondary);", ":transparent;", ":0.4;", ":inherit;", ":inherit;"], _NumberInput.numberInputTokens.caretColor, _NumberInput.numberInputTokens.errorColor, _NumberInput.numberInputTokens.borderErrorColor, _NumberInput.numberInputTokens.color, _NumberInput.numberInputTokens.colorSolid, _NumberInput.numberInputTokens.additionalTextColor, _NumberInput.numberInputTokens.additionalTextColorSolid, _NumberInput.numberInputTokens.borderColorFocus, _NumberInput.numberInputTokens.borderColorSolidFocus, _NumberInput.numberInputTokens.backgroundColorSolid, _NumberInput.numberInputTokens.iconButtonColor, _NumberInput.numberInputTokens.iconButtonBackgroundColor, _NumberInput.numberInputTokens.iconButtonColorHover, _NumberInput.numberInputTokens.iconButtonColorSolidHover, _NumberInput.numberInputTokens.iconButtonBackgroundColorHover, _NumberInput.numberInputTokens.iconButtonColorActive, _NumberInput.numberInputTokens.backgroundColorFocus, _NumberInput.numberInputTokens.iconButtonBackgroundColorActive, _NumberInput.numberInputTokens.actionButtonDisabledOpacity, _NumberInput.numberInputTokens.loaderSpinnerColor, _NumberInput.numberInputTokens.loaderSpinnerColorSolid)
+    },
+    size: {
+      l: /*#__PURE__*/(0, _styledComponents.css)(["", ":11.75rem;", ":3.5rem;", ":3.5rem;", ":1.5rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-bold-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.875rem;", ":0.375rem;", ":0 0.125rem;", ":0.875rem;", ":3.5rem;", ":0.063rem;", ":1.063rem 1.125rem;", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":0.25rem;", ":0.25rem;", ":1.375rem;"], _NumberInput.numberInputTokens.rootMinWidth, _NumberInput.numberInputTokens.iconButtonHeight, _NumberInput.numberInputTokens.iconButtonWidth, _NumberInput.numberInputTokens.iconButtonPadding, _NumberInput.numberInputTokens.iconButtonFontFamily, _NumberInput.numberInputTokens.iconButtonFontSize, _NumberInput.numberInputTokens.iconButtonFontStyle, _NumberInput.numberInputTokens.iconButtonFontWeight, _NumberInput.numberInputTokens.iconButtonLetterSpacing, _NumberInput.numberInputTokens.iconButtonLineHeight, _NumberInput.numberInputTokens.iconButtonRadius, _NumberInput.numberInputTokens.iconButtonSegmentationRadius, _NumberInput.numberInputTokens.inputWrapperMargin, _NumberInput.numberInputTokens.inputWrapperBorderRadius, _NumberInput.numberInputTokens.textWrapperHeight, _NumberInput.numberInputTokens.inputWrapperBorderWidth, _NumberInput.numberInputTokens.textWrapperPadding, _NumberInput.numberInputTokens.fontFamily, _NumberInput.numberInputTokens.fontSize, _NumberInput.numberInputTokens.fontStyle, _NumberInput.numberInputTokens.fontWeight, _NumberInput.numberInputTokens.letterSpacing, _NumberInput.numberInputTokens.lineHeight, _NumberInput.numberInputTokens.textBeforeMarginRight, _NumberInput.numberInputTokens.textAfterMarginLeft, _NumberInput.numberInputTokens.loaderSpinnerSize),
+      m: /*#__PURE__*/(0, _styledComponents.css)(["", ":10.25rem;", ":3rem;", ":3rem;", ":1.25rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-m-letter-spacing);", ":var(--plasma-typo-body-m-line-height);", ":0.75rem;", ":0.25rem;", ":0 0.125rem;", ":0.75rem;", ":3rem;", ":0.063rem;", ":0.875rem 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.25rem;", ":0.25rem;", ":1.375rem;"], _NumberInput.numberInputTokens.rootMinWidth, _NumberInput.numberInputTokens.iconButtonHeight, _NumberInput.numberInputTokens.iconButtonWidth, _NumberInput.numberInputTokens.iconButtonPadding, _NumberInput.numberInputTokens.iconButtonFontFamily, _NumberInput.numberInputTokens.iconButtonFontSize, _NumberInput.numberInputTokens.iconButtonFontStyle, _NumberInput.numberInputTokens.iconButtonFontWeight, _NumberInput.numberInputTokens.iconButtonLetterSpacing, _NumberInput.numberInputTokens.iconButtonLineHeight, _NumberInput.numberInputTokens.iconButtonRadius, _NumberInput.numberInputTokens.iconButtonSegmentationRadius, _NumberInput.numberInputTokens.inputWrapperMargin, _NumberInput.numberInputTokens.inputWrapperBorderRadius, _NumberInput.numberInputTokens.textWrapperHeight, _NumberInput.numberInputTokens.inputWrapperBorderWidth, _NumberInput.numberInputTokens.textWrapperPadding, _NumberInput.numberInputTokens.fontFamily, _NumberInput.numberInputTokens.fontSize, _NumberInput.numberInputTokens.fontStyle, _NumberInput.numberInputTokens.fontWeight, _NumberInput.numberInputTokens.letterSpacing, _NumberInput.numberInputTokens.lineHeight, _NumberInput.numberInputTokens.textBeforeMarginRight, _NumberInput.numberInputTokens.textAfterMarginLeft, _NumberInput.numberInputTokens.loaderSpinnerSize),
+      s: /*#__PURE__*/(0, _styledComponents.css)(["", ":8.75rem;", ":2.5rem;", ":2.5rem;", ":1rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":0.625rem;", ":0.25rem;", ":0 0.125rem;", ":0.625rem;", ":2.5rem;", ":0.063rem;", ":0.688rem 0.875rem;", ":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.25rem;", ":0.25rem;", ":1.375rem;"], _NumberInput.numberInputTokens.rootMinWidth, _NumberInput.numberInputTokens.iconButtonHeight, _NumberInput.numberInputTokens.iconButtonWidth, _NumberInput.numberInputTokens.iconButtonPadding, _NumberInput.numberInputTokens.iconButtonFontFamily, _NumberInput.numberInputTokens.iconButtonFontSize, _NumberInput.numberInputTokens.iconButtonFontStyle, _NumberInput.numberInputTokens.iconButtonFontWeight, _NumberInput.numberInputTokens.iconButtonLetterSpacing, _NumberInput.numberInputTokens.iconButtonLineHeight, _NumberInput.numberInputTokens.iconButtonRadius, _NumberInput.numberInputTokens.iconButtonSegmentationRadius, _NumberInput.numberInputTokens.inputWrapperMargin, _NumberInput.numberInputTokens.inputWrapperBorderRadius, _NumberInput.numberInputTokens.textWrapperHeight, _NumberInput.numberInputTokens.inputWrapperBorderWidth, _NumberInput.numberInputTokens.textWrapperPadding, _NumberInput.numberInputTokens.fontFamily, _NumberInput.numberInputTokens.fontSize, _NumberInput.numberInputTokens.fontStyle, _NumberInput.numberInputTokens.fontWeight, _NumberInput.numberInputTokens.letterSpacing, _NumberInput.numberInputTokens.lineHeight, _NumberInput.numberInputTokens.textBeforeMarginRight, _NumberInput.numberInputTokens.textAfterMarginLeft, _NumberInput.numberInputTokens.loaderSpinnerSize),
+      xs: /*#__PURE__*/(0, _styledComponents.css)(["", ":6.875rem;", ":2rem;", ":2rem;", ":0.75rem;", ":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-bold-font-weight);", ":var(--plasma-typo-body-xs-letter-spacing);", ":var(--plasma-typo-body-xs-line-height);", ":0.5rem;", ":0.125rem;", ":0 0.125rem;", ":0.5rem;", ":2rem;", ":0.063rem;", ":0.563rem 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.25rem;", ":1rem;"], _NumberInput.numberInputTokens.rootMinWidth, _NumberInput.numberInputTokens.iconButtonHeight, _NumberInput.numberInputTokens.iconButtonWidth, _NumberInput.numberInputTokens.iconButtonPadding, _NumberInput.numberInputTokens.iconButtonFontFamily, _NumberInput.numberInputTokens.iconButtonFontSize, _NumberInput.numberInputTokens.iconButtonFontStyle, _NumberInput.numberInputTokens.iconButtonFontWeight, _NumberInput.numberInputTokens.iconButtonLetterSpacing, _NumberInput.numberInputTokens.iconButtonLineHeight, _NumberInput.numberInputTokens.iconButtonRadius, _NumberInput.numberInputTokens.iconButtonSegmentationRadius, _NumberInput.numberInputTokens.inputWrapperMargin, _NumberInput.numberInputTokens.inputWrapperBorderRadius, _NumberInput.numberInputTokens.textWrapperHeight, _NumberInput.numberInputTokens.inputWrapperBorderWidth, _NumberInput.numberInputTokens.textWrapperPadding, _NumberInput.numberInputTokens.fontFamily, _NumberInput.numberInputTokens.fontSize, _NumberInput.numberInputTokens.fontStyle, _NumberInput.numberInputTokens.fontWeight, _NumberInput.numberInputTokens.letterSpacing, _NumberInput.numberInputTokens.lineHeight, _NumberInput.numberInputTokens.textBeforeMarginRight, _NumberInput.numberInputTokens.textAfterMarginLeft, _NumberInput.numberInputTokens.loaderSpinnerSize)
+    },
+    shape: {
+      cornered: /*#__PURE__*/(0, _styledComponents.css)([""]),
+      pilled: /*#__PURE__*/(0, _styledComponents.css)(["", ":50%;"], _NumberInput.numberInputTokens.iconButtonRadius)
+    },
+    inputBackgroundType: {
+      fill: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--surface-transparent-tertiary);", ":var(--text-secondary);"], _NumberInput.numberInputTokens.borderColor, _NumberInput.numberInputTokens.borderColorHover),
+      clear: /*#__PURE__*/(0, _styledComponents.css)(["", ":transparent;", ":transparent;"], _NumberInput.numberInputTokens.borderColor, _NumberInput.numberInputTokens.borderColorHover)
+    },
+    segmentation: {
+      "default": /*#__PURE__*/(0, _styledComponents.css)([""]),
+      segmented: /*#__PURE__*/(0, _styledComponents.css)([""]),
+      solid: /*#__PURE__*/(0, _styledComponents.css)(["", ":0;"], _NumberInput.numberInputTokens.iconButtonSegmentationRadius)
+    },
+    disabled: {
+      "true": /*#__PURE__*/(0, _styledComponents.css)(["", ":0.4;"], _NumberInput.numberInputTokens.disabledOpacity)
+    }
+  }
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberInput = void 0;
+var _NumberInput = /*#__PURE__*/require("../../../../components/NumberInput");
+var _engines = /*#__PURE__*/require("../../../../engines");
+var _NumberInput2 = /*#__PURE__*/require("./NumberInput.config");
+var mergedConfig = /*#__PURE__*/(0, _engines.mergeConfig)(_NumberInput.numberInputConfig, _NumberInput2.config);
+var NumberInput = exports.NumberInput = /*#__PURE__*/(0, _engines.component)(mergedConfig);

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

@@ -0,0 +1,108 @@
+import React, { ComponentProps, useState } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+import { WithTheme } from '../../../_helpers';
+
+import { NumberInput } from './NumberInput';
+
+const onChange = action('onChange');
+const onDecrement = action('onDecrement');
+const onIncrement = action('onIncrement');
+
+const views = ['default', 'secondary', 'accent', 'clear'];
+const sizes = ['l', 'm', 's', 'xs'];
+const shapes = ['cornered', 'pilled'];
+const inputBackgroundTypes = ['fill', 'clear'];
+const segmentation = ['default', 'segmented', 'solid'];
+
+const meta: Meta<typeof NumberInput> = {
+    title: 'plasma_web/NumberInput',
+    component: NumberInput,
+    decorators: [WithTheme],
+    argTypes: {
+        min: {
+            control: {
+                type: 'number',
+            },
+        },
+        max: {
+            control: {
+                type: 'number',
+            },
+        },
+        view: {
+            options: views,
+            control: {
+                type: 'select',
+            },
+        },
+        size: {
+            options: sizes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        shape: {
+            options: shapes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        inputBackgroundType: {
+            options: inputBackgroundTypes,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        segmentation: {
+            options: segmentation,
+            control: {
+                type: 'select',
+            },
+        },
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof NumberInput>;
+
+const StoryDefault = (args: StoryPropsDefault) => {
+    const [value, setValue] = useState(5);
+
+    const handleChange = (_: any, newValue: number) => {
+        setValue(newValue);
+        onChange(newValue);
+    };
+
+    return (
+        <NumberInput
+            {...args}
+            value={value}
+            onChange={handleChange}
+            onDecrement={onDecrement}
+            onIncrement={onIncrement}
+        />
+    );
+};
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        view: 'default',
+        size: 'l',
+        shape: 'cornered',
+        inputBackgroundType: 'fill',
+        segmentation: 'default',
+        min: 0,
+        max: 9,
+        step: 1,
+        width: 188,
+        isManualInput: false,
+        textBefore: '',
+        textAfter: '',
+        isLoading: false,
+        disabled: false,
+    },
+    render: StoryDefault,
+};

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

@@ -13,7 +13,7 @@ var config = exports.config = {
   },
   variations: {
     view: {
-      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.disabledOpacity)
+      "default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-primary);", ":var(--text-primary-hover);", ":solid var(--surface-solid-default);", ":var(--text-primary);", ":var(--surface-clear);", ":var(--inverse-text-primary);", ":var(--inverse-text-primary);", ":var(--surface-solid-default);", ":var(--surface-solid-default-hover);", ":var(--text-secondary);", ":var(--text-secondary-hover);", ":var(--text-secondary);", ":var(--text-secondary);", ":var(--surface-transparent-secondary);", ":var(--surface-transparent-secondary-hover);", ":var(--text-secondary);", ":var(--surface-accent);", ":0.4;"], _Steps.stepsTokens.activeTitleColor, _Steps.stepsTokens.activeTitleColorHover, _Steps.stepsTokens.activeIndicatorBorder, _Steps.stepsTokens.activeIndicatorColor, _Steps.stepsTokens.activeIndicatorBackground, _Steps.stepsTokens.completedIndicatorColor, _Steps.stepsTokens.completedIndicatorColorHover, _Steps.stepsTokens.completedIndicatorBackground, _Steps.stepsTokens.completedIndicatorBackgroundHover, _Steps.stepsTokens.inactiveTitleColor, _Steps.stepsTokens.inactiveTitleColorHover, _Steps.stepsTokens.inactiveIndicatorColor, _Steps.stepsTokens.inactiveIndicatorColorHover, _Steps.stepsTokens.inactiveIndicatorBackground, _Steps.stepsTokens.inactiveIndicatorBackgroundHover, _Steps.stepsTokens.contentColor, _Steps.stepsTokens.focusColor, _Steps.stepsTokens.disabledOpacity)
     },
     size: {
       l: /*#__PURE__*/(0, _styledComponents.css)(["", ":1.5rem;", ":2.25rem;", ":0.5rem;", ":1rem;", ":0.75rem;", ":0.375rem;", ":2rem;", ":1.0625rem;", ":0.75rem;", ":1rem;", ":0.625rem;", ":1.5rem;", ":1.25rem;", ":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);", ":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);", ":var(--plasma-typo-body-l-font-family);", ":var(--plasma-typo-body-l-font-size);", ":var(--plasma-typo-body-l-font-style);", ":var(--plasma-typo-body-l-font-weight);", ":var(--plasma-typo-body-l-letter-spacing);", ":var(--plasma-typo-body-l-line-height);", ":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.125rem;"], _Steps.stepsTokens.indicatorSize, _Steps.stepsTokens.activeIndicatorSize, _Steps.stepsTokens.bulletSize, _Steps.stepsTokens.activeBulletSize, _Steps.stepsTokens.titlePaddingTop, _Steps.stepsTokens.contentPaddingTop, _Steps.stepsTokens.contentSidePadding, _Steps.stepsTokens.contentVerticalPadding, _Steps.stepsTokens.verticalContentPaddingLeft, _Steps.stepsTokens.smallIndicatorIndentHeight, _Steps.stepsTokens.largeIndicatorIndentHeight, _Steps.stepsTokens.smallBulletIndentHeight, _Steps.stepsTokens.largeBulletIndentHeight, _Steps.stepsTokens.indicatorFontFamily, _Steps.stepsTokens.indicatorFontSize, _Steps.stepsTokens.indicatorFontStyle, _Steps.stepsTokens.indicatorFontWeight, _Steps.stepsTokens.indicatorLetterSpacing, _Steps.stepsTokens.indicatorLineHeight, _Steps.stepsTokens.activeIndicatorFontFamily, _Steps.stepsTokens.activeIndicatorFontSize, _Steps.stepsTokens.activeIndicatorFontStyle, _Steps.stepsTokens.activeIndicatorFontWeight, _Steps.stepsTokens.activeIndicatorLetterSpacing, _Steps.stepsTokens.activeIndicatorLineHeight, _Steps.stepsTokens.titleFontFamily, _Steps.stepsTokens.titleFontSize, _Steps.stepsTokens.titleFontStyle, _Steps.stepsTokens.titleFontWeight, _Steps.stepsTokens.titleLetterSpacing, _Steps.stepsTokens.titleLineHeight, _Steps.stepsTokens.contentFontFamily, _Steps.stepsTokens.contentFontSize, _Steps.stepsTokens.contentFontStyle, _Steps.stepsTokens.contentFontWeight, _Steps.stepsTokens.contentLetterSpacing, _Steps.stepsTokens.contentLineHeight, _Steps.stepsTokens.dividerThickness),

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

@@ -118,7 +118,7 @@ const DefaultStory = (args) => {
     };
 
     return (
-        <div style={{ maxWidth, height: '400px' }}>
+        <div style={{ maxWidth, height: '600px' }}>
             <Steps
                 size={size}
                 items={items}

package/styled-components/cjs/index.js

@@ -684,4 +684,15 @@ Object.keys(_ViewContainer).forEach(function (key) {
       return _ViewContainer[key];
     }
   });
+});
+var _NumberInput = /*#__PURE__*/require("./components/NumberInput");
+Object.keys(_NumberInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NumberInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _NumberInput[key];
+    }
+  });
 });