react-cosmos-ui 7.3.0 → 7.3.1-canary.238df28.0

package/dist/components/KeyBox.js

@@ -22,7 +22,7 @@ const Container = styled.span `
   border-radius: 5px;
   text-align: center;
 
-  :first-child {
+  &:first-child {
     margin-left: 0;
   }
 `;

package/dist/components/SidePanel.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-export declare const SidePanelContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SidePanelHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SidePanelContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const SidePanelHeader: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 type TitleProps = {
     label: string;
     componentName?: string;
 };
 export declare function SidePanelTitle({ label, componentName }: TitleProps): React.JSX.Element;
-export declare const SidePanelActions: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const SidePanelBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SidePanelActions: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const SidePanelBody: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export {};

package/dist/components/SidePanel.js

@@ -4,7 +4,7 @@ import { grey128, grey160, grey32 } from '../style/colors.js';
 export const SidePanelContainer = styled.div `
   background: ${grey32};
 
-  :first-child {
+  &:first-child {
     border-top: none;
   }
 `;

package/dist/components/ValueInputTree/ValueInput/BooleanValueInput.js

@@ -22,11 +22,11 @@ const BooleanButton = styled.button `
   outline: none;
   user-select: none;
 
-  :focus {
+  &:focus {
     box-shadow: 0 0 0.5px 1px ${blue};
   }
 
-  ::-moz-focus-inner {
+  &::-moz-focus-inner {
     border: 0;
   }
 `;

package/dist/components/ValueInputTree/ValueInput/NullValueInput.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Label, UneditableInput, ValueDataContainer } from './shared.js';
 export function NullValueInput({ name }) {
     return (React.createElement(React.Fragment, null,
-        React.createElement(Label, { title: name, disabled: true }, name),
+        React.createElement(Label, { title: name, $disabled: true }, name),
         React.createElement(ValueDataContainer, null,
             React.createElement(UneditableInput, null,
                 React.createElement("em", null, "null")))));

package/dist/components/ValueInputTree/ValueInput/StringValueInput.js

@@ -25,8 +25,8 @@ export function StringValueInput({ id, name, data, onChange }) {
     return (React.createElement(React.Fragment, null,
         React.createElement(Label, { title: name, htmlFor: id }, name),
         React.createElement(ValueDataContainer, null,
-            React.createElement(TextInputContainer, { focused: focused, focusedBg: grey8, focusedBoxShadow: `0 0 0.5px 1px ${blue}` },
+            React.createElement(TextInputContainer, { $focused: focused, $focusedBg: grey8, $focusedBoxShadow: `0 0 0.5px 1px ${blue}` },
                 React.createElement(TextContainer, null,
-                    React.createElement(TextMirror, { minWidth: 64, focused: focused }, localData.length > 0 || focused ? mirrorText : React.createElement("em", null, "empty")),
-                    React.createElement(TextField, { rows: 1, id: id, value: localData, focused: focused, color: grey248, onChange: onInputChange, onFocus: onFocus, onBlur: onBlur }))))));
+                    React.createElement(TextMirror, { $minWidth: 64, $focused: focused }, localData.length > 0 || focused ? mirrorText : React.createElement("em", null, "empty")),
+                    React.createElement(TextField, { rows: 1, id: id, value: localData, $focused: focused, $color: grey248, onChange: onInputChange, onFocus: onFocus, onBlur: onBlur }))))));
 }

package/dist/components/ValueInputTree/ValueInput/UndefinedValueInput.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Label, UneditableInput, ValueDataContainer } from './shared.js';
 export function UndefinedValueInput({ name }) {
     return (React.createElement(React.Fragment, null,
-        React.createElement(Label, { title: name, disabled: true }, name),
+        React.createElement(Label, { title: name, $disabled: true }, name),
         React.createElement(ValueDataContainer, null,
             React.createElement(UneditableInput, null,
                 React.createElement("em", null, "undefined")))));

package/dist/components/ValueInputTree/ValueInput/UnserializableValueInput.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { Label, UneditableInput, ValueDataContainer } from './shared.js';
 export function UnserializableValueInput({ name, data }) {
     return (React.createElement(React.Fragment, null,
-        React.createElement(Label, { title: name, disabled: true }, name),
+        React.createElement(Label, { title: name, $disabled: true }, name),
         React.createElement(ValueDataContainer, null,
             React.createElement(UneditableInput, { title: data }, trimMultilineValue(data)))));
 }

package/dist/components/ValueInputTree/ValueInput/ValueInput.js

@@ -10,7 +10,7 @@ import { UndefinedValueInput } from './UndefinedValueInput.js';
 import { UnserializableValueInput } from './UnserializableValueInput.js';
 export function ValueInput({ value, name, id, indentLevel, onChange }) {
     return (React.createElement(ValueInputSlot, { slotProps: { id, name, value, indentLevel, onChange } },
-        React.createElement(ValueTreeItem, { indentLevel: indentLevel },
+        React.createElement(ValueTreeItem, { $indentLevel: indentLevel },
             React.createElement(ValueInputContainer, null, getInput(id, name, value, onChange)))));
 }
 function getInput(id, name, value, onChange) {

package/dist/components/ValueInputTree/ValueInput/shared.d.ts

@@ -1,6 +1,8 @@
-export declare const Label: import("styled-components").StyledComponent<"label", any, {
-    disabled?: boolean;
-}, never>;
-export declare const ValueInputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ValueDataContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const UneditableInput: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Label: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "$disabled"> & {
+    $disabled?: boolean;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "$disabled"> & {
+    $disabled?: boolean;
+}, never>>> & string;
+export declare const ValueInputContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ValueDataContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const UneditableInput: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;

package/dist/components/ValueInputTree/ValueInputDir.js

@@ -4,13 +4,13 @@ import { blue, disabledColors, grey128, grey160, grey224, } from '../../style/co
 import { ChevronDownIcon, ChevronRightIcon } from '../icons/index.js';
 import { ValueTreeItem } from './shared.js';
 export function ValueInputDir({ name, childrenText, disabled, expanded, indentLevel, onToggle, }) {
-    return (React.createElement(ValueTreeItem, { indentLevel: indentLevel },
+    return (React.createElement(ValueTreeItem, { $indentLevel: indentLevel },
         React.createElement(ButtonContainer, null,
             React.createElement(Button, { disabled: disabled, onClick: onToggle },
                 React.createElement(React.Fragment, null,
                     !disabled && (React.createElement(ChevronContainer, null, expanded ? React.createElement(ChevronDownIcon, null) : React.createElement(ChevronRightIcon, null))),
                     React.createElement(Text, null,
-                        React.createElement(DirName, { disabled: disabled }, name),
+                        React.createElement(DirName, { $disabled: disabled }, name),
                         React.createElement(ChildrenInfo, null, childrenText)))))));
 }
 const ButtonContainer = styled.div `
@@ -33,11 +33,11 @@ const Button = styled.button `
   outline: none;
   white-space: nowrap;
 
-  :focus {
+  &:focus {
     box-shadow: 0 0 0.5px 1px ${blue};
   }
 
-  ::-moz-focus-inner {
+  &::-moz-focus-inner {
     border: 0;
   }
 `;
@@ -57,7 +57,7 @@ const Text = styled.span `
 `;
 const DirName = styled.span `
   color: ${disabledColors(grey224, grey128)};
-  padding: 0 0 0 ${props => (props.disabled ? 16 : 0)}px;
+  padding: 0 0 0 ${props => (props.$disabled ? 16 : 0)}px;
 `;
 const ChildrenInfo = styled.span `
   padding: 0 0 0 6px;

package/dist/components/ValueInputTree/shared.d.ts

@@ -9,8 +9,8 @@ export type ValueNodeData = {
 };
 export type ValueNode = TreeNode<ValueNodeData>;
 type ValueTreeItemProps = {
-    indentLevel: number;
+    $indentLevel: number;
 };
-export declare const ValueTreeItem: import("styled-components").StyledComponent<"div", any, ValueTreeItemProps, never>;
+export declare const ValueTreeItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$indentLevel"> & ValueTreeItemProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$indentLevel"> & ValueTreeItemProps, never>>> & string;
 export declare function stringifyElementId(elementId: FixtureElementId): string;
 export {};

package/dist/components/ValueInputTree/shared.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 export const ValueTreeItem = styled.div `
-  padding: 0 0 0 ${props => getLeftPadding(props.indentLevel)}px;
+  padding: 0 0 0 ${props => getLeftPadding(props.$indentLevel)}px;
 `;
 export function stringifyElementId(elementId) {
     const { decoratorId, elPath } = elementId;

package/dist/components/buttons/Button32.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { grey160, grey176, grey224, grey24, grey248, grey32, grey8, } from '../../style/colors.js';
 import { Label, StyledButton, StyledIcon } from './shared.js';
 export function Button32({ icon, label, title, disabled = false, selected = false, onClick, }) {
-    return (React.createElement(StyledButton, { bg: grey32, bgSelect: grey8, bgHover: grey24, color: grey224, colorSelect: grey248, title: title, selected: selected, disabled: disabled, onClick: onClick },
-        icon && (React.createElement(StyledIcon, { color: selected ? grey176 : grey160 }, icon)),
+    return (React.createElement(StyledButton, { $bg: grey32, $bgSelect: grey8, $bgHover: grey24, $color: grey224, $colorSelect: grey248, title: title, $selected: selected, disabled: disabled, onClick: onClick },
+        icon && (React.createElement(StyledIcon, { $color: selected ? grey176 : grey160 }, icon)),
         React.createElement(Label, null, label)));
 }

package/dist/components/buttons/Button8.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { grey144, grey176, grey216, grey24, grey248, grey32, grey8, } from '../../style/colors.js';
 import { Label, StyledButton, StyledIcon } from './shared.js';
 export function Button8({ icon, label, title, disabled = false, selected = false, onClick, }) {
-    return (React.createElement(StyledButton, { bg: grey8, bgSelect: grey32, bgHover: grey24, color: grey216, colorSelect: grey248, title: title, selected: selected, disabled: disabled, onClick: onClick },
-        icon && (React.createElement(StyledIcon, { color: selected ? grey176 : grey144 }, icon)),
+    return (React.createElement(StyledButton, { $bg: grey8, $bgSelect: grey32, $bgHover: grey24, $color: grey216, $colorSelect: grey248, title: title, $selected: selected, disabled: disabled, onClick: onClick },
+        icon && (React.createElement(StyledIcon, { $color: selected ? grey176 : grey144 }, icon)),
         React.createElement(Label, null, label)));
 }

package/dist/components/buttons/IconButton32.js

@@ -2,6 +2,6 @@ import React from 'react';
 import { grey160, grey176, grey224, grey24, grey248, grey32, grey8, } from '../../style/colors.js';
 import { StyledButton, StyledIcon } from './shared.js';
 export function IconButton32({ icon, title, disabled = false, selected = false, onClick, }) {
-    return (React.createElement(StyledButton, { bg: grey32, bgSelect: grey8, bgHover: grey24, color: grey224, colorSelect: grey248, title: title, selected: selected, disabled: disabled, onClick: onClick },
-        React.createElement(StyledIcon, { color: selected ? grey176 : grey160 }, icon)));
+    return (React.createElement(StyledButton, { $bg: grey32, $bgSelect: grey8, $bgHover: grey24, $color: grey224, $colorSelect: grey248, title: title, $selected: selected, disabled: disabled, onClick: onClick },
+        React.createElement(StyledIcon, { $color: selected ? grey176 : grey160 }, icon)));
 }

package/dist/components/buttons/IconButton8.js

@@ -2,6 +2,6 @@ import React from 'react';
 import { grey144, grey176, grey216, grey24, grey248, grey32, grey8, } from '../../style/colors.js';
 import { StyledButton, StyledIcon } from './shared.js';
 export function IconButton8({ icon, title, disabled = false, selected = false, onClick, }) {
-    return (React.createElement(StyledButton, { bg: grey8, bgSelect: grey32, bgHover: grey24, color: grey216, colorSelect: grey248, title: title, selected: selected, disabled: disabled, onClick: onClick },
-        React.createElement(StyledIcon, { color: selected ? grey176 : grey144 }, icon)));
+    return (React.createElement(StyledButton, { $bg: grey8, $bgSelect: grey32, $bgHover: grey24, $color: grey216, $colorSelect: grey248, title: title, $selected: selected, disabled: disabled, onClick: onClick },
+        React.createElement(StyledIcon, { $color: selected ? grey176 : grey144 }, icon)));
 }

package/dist/components/buttons/shared.d.ts

@@ -1,16 +1,24 @@
 type StyledButtonProps = {
-    bg: string;
-    bgSelect: string;
-    bgHover: string;
-    color: string;
-    colorSelect: string;
-    selected: boolean;
+    $bg: string;
+    $bgSelect: string;
+    $bgHover: string;
+    $color: string;
+    $colorSelect: string;
+    $selected: boolean;
     disabled: boolean;
 };
-export declare const StyledButton: import("styled-components").StyledComponent<"button", any, StyledButtonProps, never>;
-export declare const StyledLink: import("styled-components").StyledComponent<"a", any, StyledButtonProps, never>;
-export declare const StyledIcon: import("styled-components").StyledComponent<"span", any, {
-    color: string;
-}, never>;
-export declare const Label: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const StyledButton: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof StyledButtonProps> & StyledButtonProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof StyledButtonProps> & StyledButtonProps, never>>> & string;
+export declare const StyledLink: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof StyledButtonProps> & StyledButtonProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof StyledButtonProps> & StyledButtonProps, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, keyof import("react").ClassAttributes<HTMLAnchorElement> | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "as"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof StyledButtonProps> & StyledButtonProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof StyledButtonProps> & StyledButtonProps, never>> & {
+    as?: import("styled-components").WebTarget | undefined;
+    forwardedAs?: import("styled-components").WebTarget | undefined;
+}, keyof import("react").ClassAttributes<HTMLAnchorElement> | keyof import("react").AnchorHTMLAttributes<HTMLAnchorElement>> & import("react").ClassAttributes<HTMLAnchorElement> & import("react").AnchorHTMLAttributes<HTMLAnchorElement>, "as">>> & string;
+export declare const StyledIcon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color"> & {
+    $color: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$color"> & {
+    $color: string;
+}, never>>> & string;
+export declare const Label: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>> & string;
 export {};

package/dist/components/buttons/shared.js

@@ -9,8 +9,8 @@ export const StyledButton = styled.button `
   height: 32px;
   border: 0;
   border-radius: 3px;
-  background: ${props => (props.selected ? props.bgSelect : props.bg)};
-  color: ${props => (props.selected ? props.colorSelect : props.color)};
+  background: ${props => (props.$selected ? props.$bgSelect : props.$bg)};
+  color: ${props => (props.$selected ? props.$colorSelect : props.$color)};
   white-space: nowrap;
   user-select: none;
   outline: none;
@@ -19,25 +19,25 @@ export const StyledButton = styled.button `
     color ${quick}s,
     opacity ${quick}s;
 
-  :hover {
-    background: ${props => (props.selected ? props.bgSelect : props.bgHover)};
+  &:hover {
+    background: ${props => props.$selected ? props.$bgSelect : props.$bgHover};
   }
 
-  :focus {
+  &:focus {
     box-shadow: 0 0 0.5px 1px ${blue};
   }
 
-  :disabled {
-    background: ${props => (props.selected ? props.bgSelect : props.bg)};
+  &:disabled {
+    background: ${props => (props.$selected ? props.$bgSelect : props.$bg)};
     cursor: default;
     opacity: 0.5;
   }
 
-  ::-moz-focus-inner {
+  &::-moz-focus-inner {
     border: 0;
   }
 `;
-export const StyledLink = styled(StyledButton.withComponent('a')) `
+export const StyledLink = styled(StyledButton).attrs({ as: 'a' }) `
   text-decoration: none;
 `;
 const iconSize = 16;
@@ -45,14 +45,14 @@ export const StyledIcon = styled.span `
   width: ${iconSize}px;
   height: ${iconSize}px;
   padding: 2px 0 0 0;
-  color: ${props => props.color};
+  color: ${props => props.$color};
   transition: color ${quick}s;
 `;
 export const Label = styled.span `
   padding-left: 6px;
   line-height: 14px;
 
-  :first-child {
+  &:first-child {
     padding-left: 0;
   }
 `;

package/dist/components/inputs/NumberInput.js

@@ -72,8 +72,8 @@ export function NumberInput({ id, value, minValue = -maxNumber, maxValue = maxNu
                 return increment(getStep(), -1);
         }
     }
-    return (React.createElement(TextInputContainer, { focused: focused, focusedBg: styles.focusedBg, focusedBoxShadow: styles.focusedBoxShadow },
+    return (React.createElement(TextInputContainer, { $focused: focused, $focusedBg: styles.focusedBg, $focusedBoxShadow: styles.focusedBoxShadow },
         React.createElement(TextContainer, null,
-            React.createElement(TextMirror, { minWidth: 8, focused: focused }, rawValue),
-            React.createElement(TextField, { rows: 1, id: id, value: rawValue, focused: focused, color: styles.focusedColor, onChange: handleChange, onFocus: onFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }))));
+            React.createElement(TextMirror, { $minWidth: 8, $focused: focused }, rawValue),
+            React.createElement(TextField, { rows: 1, id: id, value: rawValue, $focused: focused, $color: styles.focusedColor, onChange: handleChange, onFocus: onFocus, onBlur: handleBlur, onKeyDown: handleKeyDown }))));
 }

package/dist/components/inputs/Select.js

@@ -17,10 +17,10 @@ export function Select({ id, testId, options, value, color, height, padding, onC
     const renderOption = (option) => (React.createElement("option", { key: option.value, value: option.value }, option.label));
     const selectedOption = findOption(options, value);
     const selectedLabel = selectedOption ? selectedOption.label : CUSTOM_LABEL;
-    return (React.createElement(Container, { focused: focused, bg: grey32 },
-        React.createElement(VisibleButton, { height: height, padding: padding },
-            React.createElement(Label, { height: height, color: color }, selectedLabel),
-            React.createElement(IconContainer, { color: color },
+    return (React.createElement(Container, { $focused: focused, $bg: grey32 },
+        React.createElement(VisibleButton, { $height: height, $padding: padding },
+            React.createElement(Label, { $height: height, $color: color }, selectedLabel),
+            React.createElement(IconContainer, { $color: color },
                 React.createElement(ChevronDownIcon, null))),
         React.createElement(SelectInput, { id: id, "data-testid": testId, value: value, onFocus: onFocus, onBlur: onBlur, onChange: onInputChange },
             !selectedOption && (React.createElement("option", { key: "custom-option", value: value }, CUSTOM_LABEL)),
@@ -36,20 +36,20 @@ function findOption(options, targetValue) {
 const Container = styled.div `
   position: relative;
   border-radius: 3px;
-  background: ${props => props.bg};
-  box-shadow: ${props => (props.focused ? `0 0 0.5px 1px ${blue}` : 'none')};
+  background: ${props => props.$bg};
+  box-shadow: ${props => (props.$focused ? `0 0 0.5px 1px ${blue}` : 'none')};
   overflow: hidden;
 `;
 const VisibleButton = styled.div `
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 0 ${props => props.padding - 2}px 0 ${props => props.padding}px;
-  height: ${props => props.height}px;
+  padding: 0 ${props => props.$padding - 2}px 0 ${props => props.$padding}px;
+  height: ${props => props.$height}px;
 `;
 const Label = styled.span `
-  color: ${props => props.color};
-  line-height: ${props => props.height}px;
+  color: ${props => props.$color};
+  line-height: ${props => props.$height}px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
@@ -60,7 +60,7 @@ const IconContainer = styled.span `
   width: ${iconSize}px;
   height: ${iconSize}px;
   padding: 2px 0 0 2px;
-  color: ${props => props.color};
+  color: ${props => props.$color};
   opacity: 0.7;
 `;
 const SelectInput = styled.select `

package/dist/components/inputs/shared.d.ts

@@ -1,14 +1,24 @@
-export declare const TextInputContainer: import("styled-components").StyledComponent<"div", any, {
-    focused: boolean;
-    focusedBg: string;
-    focusedBoxShadow: string;
-}, never>;
-export declare const TextContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const TextField: import("styled-components").StyledComponent<"textarea", any, {
-    focused: boolean;
-    color: string;
-}, never>;
-export declare const TextMirror: import("styled-components").StyledComponent<"div", any, {
-    focused: boolean;
-    minWidth: number;
-}, never>;
+export declare const TextInputContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$focused" | "$focusedBg" | "$focusedBoxShadow"> & {
+    $focused: boolean;
+    $focusedBg: string;
+    $focusedBoxShadow: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$focused" | "$focusedBg" | "$focusedBoxShadow"> & {
+    $focused: boolean;
+    $focusedBg: string;
+    $focusedBoxShadow: string;
+}, never>>> & string;
+export declare const TextContainer: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const TextField: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "$color" | "$focused"> & {
+    $focused: boolean;
+    $color: string;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "$color" | "$focused"> & {
+    $focused: boolean;
+    $color: string;
+}, never>>> & string;
+export declare const TextMirror: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$focused" | "$minWidth"> & {
+    $focused: boolean;
+    $minWidth: number;
+}, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$focused" | "$minWidth"> & {
+    $focused: boolean;
+    $minWidth: number;
+}, never>>> & string;

package/dist/components/inputs/shared.js

@@ -5,8 +5,8 @@ export const TextInputContainer = styled.div `
   max-width: 100%;
   padding: 2px 5px;
   border-radius: 3px;
-  background: ${props => (props.focused ? props.focusedBg : 'transparent')};
-  box-shadow: ${props => (props.focused ? props.focusedBoxShadow : 'none')};
+  background: ${props => (props.$focused ? props.$focusedBg : 'transparent')};
+  box-shadow: ${props => (props.$focused ? props.$focusedBoxShadow : 'none')};
 `;
 export const TextContainer = styled.div `
   position: relative;
@@ -21,19 +21,19 @@ export const TextField = styled.textarea `
   padding: 0;
   border: 0;
   background: none;
-  color: ${props => props.color};
+  color: ${props => props.$color};
   font-size: 14px;
   line-height: 20px;
   white-space: pre;
   overflow: hidden;
   outline: none;
   resize: none;
-  opacity: ${props => (props.focused ? 1 : 0)};
+  opacity: ${props => (props.$focused ? 1 : 0)};
 `;
 export const TextMirror = styled.div `
   color: ${lightBlue};
-  opacity: ${props => (props.focused ? 0 : 1)};
-  min-width: ${props => props.minWidth}px;
+  opacity: ${props => (props.$focused ? 0 : 1)};
+  min-width: ${props => props.$minWidth}px;
   min-height: 20px;
   font-size: 14px;
   line-height: 20px;