@mrshmllw/smores-react 16.2.16 → 16.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/Box/Box.d.ts +3 -1
  2. package/dist/Button/Button.d.ts +3 -0
  3. package/dist/Button/Button.js +25 -4
  4. package/dist/Button/Button.js.map +1 -1
  5. package/dist/Icon/iconFiles/CaretUp.d.ts +2 -4
  6. package/dist/Icon/iconsList.d.ts +2 -4
  7. package/dist/Table/components/commonComponents.d.ts +18 -6
  8. package/dist/Tooltip/Tooltip.d.ts +4 -5
  9. package/dist/fields/components/CommonInput.d.ts +25 -47
  10. package/dist/fields/components/CommonInput.js +1 -1
  11. package/dist/fields/components/CommonInput.js.map +1 -1
  12. package/dist/sharedStyles/shared.styles.d.ts +4 -5
  13. package/package.json +29 -29
package/dist/Box/Box.d.ts CHANGED
@@ -11,4 +11,6 @@ export declare const Box: import("react").ForwardRefExoticComponent<MarginProps
11
11
  as?: ElementType;
12
12
  forwardedAs?: ElementType;
13
13
  } & import("react").RefAttributes<HTMLDivElement>>;
14
- export declare const CustomBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$alignContent" | "$alignItems" | "$columnGap" | "$direction" | "$flex" | "$flow" | "$gap" | "$height" | "$justifyContent" | "$m" | "$maxHeight" | "$maxWidth" | "$mb" | "$minHeight" | "$minWidth" | "$ml" | "$mr" | "$mt" | "$mx" | "$my" | "$p" | "$pb" | "$pl" | "$pr" | "$pt" | "$px" | "$py" | "$rowGap" | "$width" | "$wrap"> & import("..").TransientProps<MarginProps> & import("..").TransientProps<PaddingProps> & import("..").TransientProps<FlexProps> & import("..").TransientProps<MeasureProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$alignContent" | "$alignItems" | "$columnGap" | "$direction" | "$flex" | "$flow" | "$gap" | "$height" | "$justifyContent" | "$m" | "$maxHeight" | "$maxWidth" | "$mb" | "$minHeight" | "$minWidth" | "$ml" | "$mr" | "$mt" | "$mx" | "$my" | "$p" | "$pb" | "$pl" | "$pr" | "$pt" | "$px" | "$py" | "$rowGap" | "$width" | "$wrap"> & import("..").TransientProps<MarginProps> & import("..").TransientProps<PaddingProps> & import("..").TransientProps<FlexProps> & import("..").TransientProps<MeasureProps>, never>>> & string;
14
+ export declare const CustomBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
15
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
16
+ }, TransientBoxProps>> & string;
package/dist/Button/Button.d.ts CHANGED
@@ -10,7 +10,10 @@ type Props = {
10
10
  loading?: boolean;
11
11
  primary?: boolean;
12
12
  secondary?: boolean;
13
+ /** Low-emphasis, text-only action, e.g. "Skip" or "Cancel" */
14
+ tertiary?: boolean;
13
15
  fallbackStyle?: boolean;
16
+ /** Legacy underlined text style. Prefer `tertiary` for new low-emphasis actions */
14
17
  textBtn?: boolean;
15
18
  smallButton?: boolean;
16
19
  icon?: Icons;
package/dist/Button/Button.js CHANGED
@@ -7,12 +7,14 @@ import { Icon as IconComponent } from '../Icon';
7
7
  import { Loader } from '../Loader';
8
8
  import { focusOutlineStyle } from '../utils/focusOutline';
9
9
  export const Button = forwardRef((props, ref) => {
10
- const { children, id, className = '', disabled = false, handleClick, loading = false, primary = false, secondary = false, fallbackStyle = false, textBtn = false, smallButton = false, icon, iconComponent, trailingIcon = false, forcedWidth = '', form, type, ...otherProps } = props;
11
- const iconToRender = iconComponent ? (_jsx(CommonIconContainer, { $size: smallButton ? 16 : 24, children: iconComponent })) : icon ? (_jsx(IconContainer, { $trailingIcon: trailingIcon, render: icon, size: smallButton ? 16 : 24, color: "color.icon.base" })) : null;
12
- return (_jsxs(Container, { forwardedAs: "button", id: id, className: className, disabled: disabled || loading, onClick: handleClick, $loading: loading, $primary: primary, $secondary: secondary, $fallbackStyle: fallbackStyle, $textBtn: textBtn, $smallButton: smallButton, $trailingIcon: trailingIcon, $forcedWidth: forcedWidth, ...(form ? { form } : {}), type: type, ...otherProps, ref: ref, children: [loading && (_jsx(LoaderContainer, { children: _jsx(Loader, { color: "color.icon.base", height: "16" }) })), _jsxs(ContentContainer, { $hasIcon: !!iconToRender, $loading: loading, children: [!trailingIcon && iconToRender ? iconToRender : null, _jsx(ChildrenContainer, { className: "childrenContainer", children: children }), trailingIcon && iconToRender && textBtn ? iconToRender : null] })] }));
10
+ const { children, id, className = '', disabled = false, handleClick, loading = false, primary = false, secondary = false, tertiary = false, fallbackStyle = false, textBtn = false, smallButton = false, icon, iconComponent, trailingIcon = false, forcedWidth = '', form, type, ...otherProps } = props;
11
+ const iconToRender = iconComponent ? (_jsx(CommonIconContainer, { $size: smallButton ? 16 : 24, children: iconComponent })) : icon ? (_jsx(IconContainer, { $trailingIcon: trailingIcon, render: icon, size: smallButton ? 16 : 24,
12
+ // Tertiary dims by colour rather than opacity when disabled
13
+ color: tertiary && disabled ? 'color.icon.nonEssential' : 'color.icon.base' })) : null;
14
+ return (_jsxs(Container, { forwardedAs: "button", id: id, className: className, disabled: disabled || loading, onClick: handleClick, $loading: loading, $primary: primary, $secondary: secondary, $tertiary: tertiary, $fallbackStyle: fallbackStyle, $textBtn: textBtn, $smallButton: smallButton, $trailingIcon: trailingIcon, $forcedWidth: forcedWidth, ...(form ? { form } : {}), type: type, ...otherProps, ref: ref, children: [loading && (_jsx(LoaderContainer, { children: _jsx(Loader, { color: "color.icon.base", height: "16" }) })), _jsxs(ContentContainer, { $hasIcon: !!iconToRender, $loading: loading, children: [!trailingIcon && iconToRender ? iconToRender : null, _jsx(ChildrenContainer, { className: "childrenContainer", children: children }), trailingIcon && iconToRender && textBtn ? iconToRender : null] })] }));
13
15
  });
14
16
  Button.displayName = 'Button';
15
- const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $forcedWidth, $fallbackStyle, $textBtn, $smallButton, }) => css `
17
+ const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $tertiary, $forcedWidth, $fallbackStyle, $textBtn, $smallButton, }) => css `
16
18
  position: relative;
17
19
  background-color: ${({ theme }) => theme.color.interactive.primary.base};
18
20
  box-shadow: none;
@@ -50,6 +52,25 @@ const Container = styled(Box)(({ disabled, $loading, $primary, $secondary, $forc
50
52
  background-color: ${({ theme }) => theme.color.interactive.secondary.selected};
51
53
  }
52
54
  `}
55
+ ${$tertiary &&
56
+ css `
57
+ background-color: transparent;
58
+ opacity: 1;
59
+
60
+ &:hover {
61
+ background-color: ${({ theme }) => !(disabled || $loading) &&
62
+ theme.color.interactive.neutral.subtle.hover};
63
+ }
64
+ &:active {
65
+ background-color: ${({ theme }) => !(disabled || $loading) &&
66
+ theme.color.interactive.neutral.subtle.pressed};
67
+ }
68
+
69
+ ${disabled &&
70
+ css `
71
+ color: ${({ theme }) => theme.color.text.nonEssential};
72
+ `}
73
+ `}
53
74
  ${$fallbackStyle &&
54
75
  css `
55
76
  background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.base};
package/dist/Button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonHTMLAttributes,\n FC,\n FormEvent,\n ReactNode,\n forwardRef,\n} from 'react'\nimport styled, { css } from 'styled-components'\nimport { IconContainer as CommonIconContainer } from '../sharedStyles/shared.styles'\n\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon as IconComponent, Icons } from '../Icon'\n\nimport { Loader } from '../Loader'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ntype Props = {\n children: ReactNode\n id?: string\n className?: string\n disabled?: boolean\n handleClick?: (e: FormEvent<HTMLButtonElement>) => void\n loading?: boolean\n primary?: boolean\n secondary?: boolean\n fallbackStyle?: boolean\n textBtn?: boolean\n smallButton?: boolean\n icon?: Icons\n iconComponent?: ReactNode\n trailingIcon?: boolean\n forcedWidth?: string\n form?: string\n}\n\nexport type ButtonProps = Props &\n MarginProps &\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>\n\nexport const Button: FC<ButtonProps> = forwardRef<\n HTMLButtonElement,\n ButtonProps\n>((props, ref) => {\n const {\n children,\n id,\n className = '',\n disabled = false,\n handleClick,\n loading = false,\n primary = false,\n secondary = false,\n fallbackStyle = false,\n textBtn = false,\n smallButton = false,\n icon,\n iconComponent,\n trailingIcon = false,\n forcedWidth = '',\n form,\n type,\n ...otherProps\n } = props\n\n const iconToRender = iconComponent ? (\n <CommonIconContainer $size={smallButton ? 16 : 24}>\n {iconComponent}\n </CommonIconContainer>\n ) : icon ? (\n <IconContainer\n $trailingIcon={trailingIcon}\n render={icon}\n size={smallButton ? 16 : 24}\n color=\"color.icon.base\"\n />\n ) : null\n\n return (\n <Container\n forwardedAs=\"button\"\n id={id}\n className={className}\n disabled={disabled || loading}\n onClick={handleClick}\n $loading={loading}\n $primary={primary}\n $secondary={secondary}\n $fallbackStyle={fallbackStyle}\n $textBtn={textBtn}\n $smallButton={smallButton}\n $trailingIcon={trailingIcon}\n $forcedWidth={forcedWidth}\n {...(form ? { form } : {})}\n type={type}\n {...otherProps}\n ref={ref}\n >\n {loading && (\n <LoaderContainer>\n <Loader color=\"color.icon.base\" height=\"16\" />\n </LoaderContainer>\n )}\n <ContentContainer $hasIcon={!!iconToRender} $loading={loading}>\n {!trailingIcon && iconToRender ? iconToRender : null}\n <ChildrenContainer className=\"childrenContainer\">\n {children}\n </ChildrenContainer>\n {trailingIcon && iconToRender && textBtn ? iconToRender : null}\n </ContentContainer>\n </Container>\n )\n})\n\nButton.displayName = 'Button'\n\ntype IButton = TransientProps<\n Required<\n Pick<\n ButtonProps,\n | 'primary'\n | 'secondary'\n | 'forcedWidth'\n | 'fallbackStyle'\n | 'textBtn'\n | 'trailingIcon'\n | 'smallButton'\n >\n >\n> & {\n $loading: NonNullable<ButtonProps['loading']>\n disabled: boolean\n}\n\nconst Container = styled(Box)<IButton>(\n ({\n disabled,\n $loading,\n $primary,\n $secondary,\n $forcedWidth,\n $fallbackStyle,\n $textBtn,\n $smallButton,\n }) => css`\n position: relative;\n background-color: ${({ theme }) => theme.color.interactive.primary.base};\n box-shadow: none;\n color: ${({ theme }) => theme.color.text.base};\n padding: 0 20px;\n outline: none;\n border-radius: 10000px;\n font-weight: ${({ theme }) => theme.fontWeight[500]};\n cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};\n line-height: 100%;\n font-size: 16px;\n opacity: ${disabled ? '0.5' : '1'};\n width: ${$forcedWidth ? $forcedWidth : 'auto'};\n\n ${focusOutlineStyle}\n\n ${\n $primary &&\n css`\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.primary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.primary.selected};\n }\n `\n }\n\n ${\n $secondary &&\n css`\n background-color: ${({ theme }) =>\n theme.color.interactive.secondary.base};\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.secondary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.secondary.selected};\n }\n `\n }\n ${\n $fallbackStyle &&\n css`\n background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.base};\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) &&\n theme.color.interactive.neutral.subtle.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.neutral.subtle.selected};\n }\n `\n }\n ${\n $smallButton &&\n css`\n padding: 0 10px;\n min-width: 54px;\n font-size: 14px;\n\n .childrenContainer {\n padding: 9px 0;\n }\n\n span {\n margin: 0 5px 0 0;\n }\n `\n }\n ${\n $textBtn &&\n css`\n background-color: transparent;\n padding: 0;\n border-radius: 0;\n text-decoration: underline;\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.primary.hover};\n }\n &:active {\n background-color: transparent;\n color: ${({ theme }) => theme.color.text.subtle};\n }\n `\n }\n `,\n)\n\nconst LoaderContainer = styled.div`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst ContentContainer = styled.div<{ $loading: boolean; $hasIcon?: boolean }>`\n display: flex;\n align-items: center;\n justify-content: ${({ $hasIcon }) => ($hasIcon ? 'space-evenly' : 'center')};\n opacity: ${({ $loading }) => ($loading ? '0' : '1')};\n`\n\nconst IconContainer = styled(IconComponent)<\n TransientProps<Pick<ButtonProps, 'trailingIcon'>>\n>(\n ({ $trailingIcon }) => css`\n margin: ${$trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};\n `,\n)\n\nconst ChildrenContainer = styled.div`\n padding: 16px 0;\n flex-grow: 1;\n`\n"]}
1
+ {"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n ButtonHTMLAttributes,\n FC,\n FormEvent,\n ReactNode,\n forwardRef,\n} from 'react'\nimport styled, { css } from 'styled-components'\nimport { IconContainer as CommonIconContainer } from '../sharedStyles/shared.styles'\n\nimport { TransientProps } from '../utils/utilTypes'\nimport { Box } from '../Box'\nimport { Icon as IconComponent, Icons } from '../Icon'\n\nimport { Loader } from '../Loader'\nimport { focusOutlineStyle } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ntype Props = {\n children: ReactNode\n id?: string\n className?: string\n disabled?: boolean\n handleClick?: (e: FormEvent<HTMLButtonElement>) => void\n loading?: boolean\n primary?: boolean\n secondary?: boolean\n /** Low-emphasis, text-only action, e.g. \"Skip\" or \"Cancel\" */\n tertiary?: boolean\n fallbackStyle?: boolean\n /** Legacy underlined text style. Prefer `tertiary` for new low-emphasis actions */\n textBtn?: boolean\n smallButton?: boolean\n icon?: Icons\n iconComponent?: ReactNode\n trailingIcon?: boolean\n forcedWidth?: string\n form?: string\n}\n\nexport type ButtonProps = Props &\n MarginProps &\n Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>\n\nexport const Button: FC<ButtonProps> = forwardRef<\n HTMLButtonElement,\n ButtonProps\n>((props, ref) => {\n const {\n children,\n id,\n className = '',\n disabled = false,\n handleClick,\n loading = false,\n primary = false,\n secondary = false,\n tertiary = false,\n fallbackStyle = false,\n textBtn = false,\n smallButton = false,\n icon,\n iconComponent,\n trailingIcon = false,\n forcedWidth = '',\n form,\n type,\n ...otherProps\n } = props\n\n const iconToRender = iconComponent ? (\n <CommonIconContainer $size={smallButton ? 16 : 24}>\n {iconComponent}\n </CommonIconContainer>\n ) : icon ? (\n <IconContainer\n $trailingIcon={trailingIcon}\n render={icon}\n size={smallButton ? 16 : 24}\n // Tertiary dims by colour rather than opacity when disabled\n color={\n tertiary && disabled ? 'color.icon.nonEssential' : 'color.icon.base'\n }\n />\n ) : null\n\n return (\n <Container\n forwardedAs=\"button\"\n id={id}\n className={className}\n disabled={disabled || loading}\n onClick={handleClick}\n $loading={loading}\n $primary={primary}\n $secondary={secondary}\n $tertiary={tertiary}\n $fallbackStyle={fallbackStyle}\n $textBtn={textBtn}\n $smallButton={smallButton}\n $trailingIcon={trailingIcon}\n $forcedWidth={forcedWidth}\n {...(form ? { form } : {})}\n type={type}\n {...otherProps}\n ref={ref}\n >\n {loading && (\n <LoaderContainer>\n <Loader color=\"color.icon.base\" height=\"16\" />\n </LoaderContainer>\n )}\n <ContentContainer $hasIcon={!!iconToRender} $loading={loading}>\n {!trailingIcon && iconToRender ? iconToRender : null}\n <ChildrenContainer className=\"childrenContainer\">\n {children}\n </ChildrenContainer>\n {trailingIcon && iconToRender && textBtn ? iconToRender : null}\n </ContentContainer>\n </Container>\n )\n})\n\nButton.displayName = 'Button'\n\ntype IButton = TransientProps<\n Required<\n Pick<\n ButtonProps,\n | 'primary'\n | 'secondary'\n | 'tertiary'\n | 'forcedWidth'\n | 'fallbackStyle'\n | 'textBtn'\n | 'trailingIcon'\n | 'smallButton'\n >\n >\n> & {\n $loading: NonNullable<ButtonProps['loading']>\n disabled: boolean\n}\n\nconst Container = styled(Box)<IButton>(\n ({\n disabled,\n $loading,\n $primary,\n $secondary,\n $tertiary,\n $forcedWidth,\n $fallbackStyle,\n $textBtn,\n $smallButton,\n }) => css`\n position: relative;\n background-color: ${({ theme }) => theme.color.interactive.primary.base};\n box-shadow: none;\n color: ${({ theme }) => theme.color.text.base};\n padding: 0 20px;\n outline: none;\n border-radius: 10000px;\n font-weight: ${({ theme }) => theme.fontWeight[500]};\n cursor: ${disabled || $loading ? 'not-allowed' : 'pointer'};\n line-height: 100%;\n font-size: 16px;\n opacity: ${disabled ? '0.5' : '1'};\n width: ${$forcedWidth ? $forcedWidth : 'auto'};\n\n ${focusOutlineStyle}\n\n ${\n $primary &&\n css`\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.primary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.primary.selected};\n }\n `\n }\n\n ${\n $secondary &&\n css`\n background-color: ${({ theme }) =>\n theme.color.interactive.secondary.base};\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.secondary.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.secondary.selected};\n }\n `\n }\n ${\n $tertiary &&\n css`\n background-color: transparent;\n opacity: 1;\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) &&\n theme.color.interactive.neutral.subtle.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n !(disabled || $loading) &&\n theme.color.interactive.neutral.subtle.pressed};\n }\n\n ${\n disabled &&\n css`\n color: ${({ theme }) => theme.color.text.nonEssential};\n `\n }\n `\n }\n ${\n $fallbackStyle &&\n css`\n background-color: ${({ theme }) => theme.color.interactive.neutral.subtle.base};\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) &&\n theme.color.interactive.neutral.subtle.hover};\n }\n &:active {\n background-color: ${({ theme }) =>\n theme.color.interactive.neutral.subtle.selected};\n }\n `\n }\n ${\n $smallButton &&\n css`\n padding: 0 10px;\n min-width: 54px;\n font-size: 14px;\n\n .childrenContainer {\n padding: 9px 0;\n }\n\n span {\n margin: 0 5px 0 0;\n }\n `\n }\n ${\n $textBtn &&\n css`\n background-color: transparent;\n padding: 0;\n border-radius: 0;\n text-decoration: underline;\n\n &:hover {\n background-color: ${({ theme }) =>\n !(disabled || $loading) && theme.color.interactive.primary.hover};\n }\n &:active {\n background-color: transparent;\n color: ${({ theme }) => theme.color.text.subtle};\n }\n `\n }\n `,\n)\n\nconst LoaderContainer = styled.div`\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n`\n\nconst ContentContainer = styled.div<{ $loading: boolean; $hasIcon?: boolean }>`\n display: flex;\n align-items: center;\n justify-content: ${({ $hasIcon }) => ($hasIcon ? 'space-evenly' : 'center')};\n opacity: ${({ $loading }) => ($loading ? '0' : '1')};\n`\n\nconst IconContainer = styled(IconComponent)<\n TransientProps<Pick<ButtonProps, 'trailingIcon'>>\n>(\n ({ $trailingIcon }) => css`\n margin: ${$trailingIcon ? '0 0 0 10px' : '0 10px 0 0'};\n `,\n)\n\nconst ChildrenContainer = styled.div`\n padding: 16px 0;\n flex-grow: 1;\n`\n"]}
package/dist/Icon/iconFiles/CaretUp.d.ts CHANGED
@@ -1,7 +1,5 @@
1
1
  import Caret from './Caret';
2
- declare const CaretUp: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<{
2
+ declare const CaretUp: import("styled-components/dist/types").IStyledComponentBase<"web", {
3
3
  className?: string;
4
- }, never> & Partial<Pick<{
5
- className?: string;
6
- }, never>>> & string & Omit<typeof Caret, keyof import("react").Component<any, {}, any>>;
4
+ }> & string & Omit<typeof Caret, keyof import("react").Component<any, {}, any>>;
7
5
  export default CaretUp;
package/dist/Icon/iconsList.d.ts CHANGED
@@ -237,11 +237,9 @@ export declare const iconList: {
237
237
  'car-repairs': typeof CarRepairs;
238
238
  'car-replacement': typeof CarReplacement;
239
239
  'car-usage': typeof CarUsage;
240
- 'caret-up': import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<{
240
+ 'caret-up': import("styled-components/dist/types").IStyledComponentBase<"web", {
241
241
  className?: string;
242
- }, never> & Partial<Pick<{
243
- className?: string;
244
- }, never>>> & string & Omit<typeof Caret, keyof import("react").Component<any, {}, any>>;
242
+ }> & string & Omit<typeof Caret, keyof import("react").Component<any, {}, any>>;
245
243
  'chat-bubble': typeof ChatBubble;
246
244
  'checkout-with-text': typeof CheckoutWithText;
247
245
  'circle-tick': typeof CircleTick;
package/dist/Table/components/commonComponents.d.ts CHANGED
@@ -3,10 +3,18 @@ import { TableStylesProps, type TableProps } from '../types';
3
3
  type StyledTableProps = {
4
4
  $roundedTable: TableProps<unknown>['roundedTable'];
5
5
  };
6
- export declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "$roundedTable"> & StyledTableProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "$roundedTable"> & StyledTableProps, never>>> & string;
7
- export declare const StyledHeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "$clickableRow" | "$columnPadding" | "$fixedHeader" | "$hasKeyline" | "$headerColor" | "$headerHeight" | "$hideOverflow" | "$maxWidth" | "$minWidth" | "$noRowBorderColor" | "$noWrapContent" | "$rowActionsBgColor" | "$rowBorderColor" | "$rowColor" | "$rowPadding" | "$stickyCell" | "$stripedColor" | "$truncateContent" | "$width"> & TransientProps<TableStylesProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "$clickableRow" | "$columnPadding" | "$fixedHeader" | "$hasKeyline" | "$headerColor" | "$headerHeight" | "$hideOverflow" | "$maxWidth" | "$minWidth" | "$noRowBorderColor" | "$noWrapContent" | "$rowActionsBgColor" | "$rowBorderColor" | "$rowColor" | "$rowPadding" | "$stickyCell" | "$stripedColor" | "$truncateContent" | "$width"> & TransientProps<TableStylesProps>, never>>> & string;
8
- export declare const StyledCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "$clickableRow" | "$columnPadding" | "$fixedHeader" | "$hasKeyline" | "$headerColor" | "$headerHeight" | "$hideOverflow" | "$maxWidth" | "$minWidth" | "$noRowBorderColor" | "$noWrapContent" | "$rowActionsBgColor" | "$rowBorderColor" | "$rowColor" | "$rowPadding" | "$stickyCell" | "$stripedColor" | "$truncateContent" | "$width"> & TransientProps<TableStylesProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "$clickableRow" | "$columnPadding" | "$fixedHeader" | "$hasKeyline" | "$headerColor" | "$headerHeight" | "$hideOverflow" | "$maxWidth" | "$minWidth" | "$noRowBorderColor" | "$noWrapContent" | "$rowActionsBgColor" | "$rowBorderColor" | "$rowColor" | "$rowPadding" | "$stickyCell" | "$stripedColor" | "$truncateContent" | "$width"> & TransientProps<TableStylesProps>, never>>> & string;
9
- export declare const StyledRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$clickableRow" | "$columnPadding" | "$fixedHeader" | "$hasKeyline" | "$headerColor" | "$headerHeight" | "$hideOverflow" | "$maxWidth" | "$minWidth" | "$noRowBorderColor" | "$noWrapContent" | "$rowActionsBgColor" | "$rowBorderColor" | "$rowColor" | "$rowPadding" | "$stickyCell" | "$stripedColor" | "$truncateContent" | "$width"> & TransientProps<TableStylesProps>, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "$clickableRow" | "$columnPadding" | "$fixedHeader" | "$hasKeyline" | "$headerColor" | "$headerHeight" | "$hideOverflow" | "$maxWidth" | "$minWidth" | "$noRowBorderColor" | "$noWrapContent" | "$rowActionsBgColor" | "$rowBorderColor" | "$rowColor" | "$rowPadding" | "$stickyCell" | "$stripedColor" | "$truncateContent" | "$width"> & TransientProps<TableStylesProps>, never>>> & string;
6
+ export declare const StyledTable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "style"> & {
7
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
8
+ }, StyledTableProps>> & string;
9
+ export declare const StyledHeaderCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>, "style"> & {
10
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
11
+ }, TransientProps<TableStylesProps>>> & string;
12
+ export declare const StyledCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "style"> & {
13
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
14
+ }, TransientProps<TableStylesProps>>> & string;
15
+ export declare const StyledRow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>, "style"> & {
16
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
17
+ }, TransientProps<TableStylesProps>>> & string;
10
18
  type StyledSubTableCellProps = {
11
19
  $bgColor?: string;
12
20
  $padding?: string | undefined;
@@ -15,6 +23,10 @@ type StyledSubTableCellProps = {
15
23
  type StyledSubInnerCellProps = {
16
24
  $padding?: string | undefined;
17
25
  };
18
- export declare const StyledSubTableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof StyledSubTableCellProps> & StyledSubTableCellProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, keyof StyledSubTableCellProps> & StyledSubTableCellProps, never>>> & string;
19
- export declare const StyledSubInnerCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$padding"> & StyledSubInnerCellProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$padding"> & StyledSubInnerCellProps, never>>> & string;
26
+ export declare const StyledSubTableCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "style"> & {
27
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
28
+ }, StyledSubTableCellProps>> & string;
29
+ export declare const StyledSubInnerCell: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
30
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
31
+ }, StyledSubInnerCellProps>> & string;
20
32
  export {};
package/dist/Tooltip/Tooltip.d.ts CHANGED
@@ -27,10 +27,9 @@ export interface TooltipProps {
27
27
  }
28
28
  export type TooltipVariant = 'primary' | 'fallback' | 'bubblegum';
29
29
  export declare const Tooltip: FC<TooltipProps>;
30
- export declare const Tip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$background" | "$maxWidth"> & {
30
+ export declare const Tip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "style"> & {
31
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
32
+ }, {
31
33
  $maxWidth?: number;
32
34
  $background: string;
33
- }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$background" | "$maxWidth"> & {
34
- $maxWidth?: number;
35
- $background: string;
36
- }, never>>> & string;
35
+ }>> & string;
package/dist/fields/components/CommonInput.d.ts CHANGED
@@ -12,69 +12,47 @@ interface IInput {
12
12
  interface SIcon {
13
13
  $disabled?: boolean;
14
14
  }
15
- export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof IInput> & IInput, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, keyof IInput> & IInput, never>>> & string;
16
- export declare const InputLeadingIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
15
+ export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "style"> & {
16
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
17
+ }, IInput>> & string;
18
+ export declare const InputLeadingIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
19
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
20
+ }, {
17
21
  $size: import("../../types").IconSize;
18
22
  $iconColor?: string;
19
- }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
20
- $size: import("../../types").IconSize;
21
- $iconColor?: string;
22
- }, never>>, "as" | "forwardedAs"> & {
23
+ }>, "as" | "forwardedAs"> & {
23
24
  as?: import("styled-components").WebTarget | undefined;
24
25
  forwardedAs?: import("styled-components").WebTarget | undefined;
25
- }, "$disabled"> & SIcon, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
26
- $size: import("../../types").IconSize;
27
- $iconColor?: string;
28
- }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
29
- $size: import("../../types").IconSize;
30
- $iconColor?: string;
31
- }, never>>, "as" | "forwardedAs"> & {
32
- as?: import("styled-components").WebTarget | undefined;
33
- forwardedAs?: import("styled-components").WebTarget | undefined;
34
- }, "$disabled"> & SIcon, never>>> & string;
35
- export declare const StyledFrontIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<{
36
- className?: string;
37
- render: Icons;
38
- size?: number;
39
- color?: import("../..").ColorTypes;
40
- rotate?: number;
41
- } & import("../..").MarginProps, "$disabled"> & SIcon, never> & Partial<Pick<import("styled-components").FastOmit<{
26
+ }, "style"> & {
27
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
28
+ [key: `--${string}`]: string | number | undefined;
29
+ }) | undefined;
30
+ }, SIcon>> & string;
31
+ export declare const StyledFrontIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<{
42
32
  className?: string;
43
33
  render: Icons;
44
34
  size?: number;
45
35
  color?: import("../..").ColorTypes;
46
36
  rotate?: number;
47
- } & import("../..").MarginProps, "$disabled"> & SIcon, never>>> & string & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
48
- export declare const StyledTrailingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<{
37
+ } & import("../..").MarginProps, SIcon>> & string & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
38
+ export declare const StyledTrailingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<{
49
39
  className?: string;
50
40
  render: Icons;
51
41
  size?: number;
52
42
  color?: import("../..").ColorTypes;
53
43
  rotate?: number;
54
- } & import("../..").MarginProps, "$disabled"> & SIcon, never> & Partial<Pick<import("styled-components").FastOmit<{
55
- className?: string;
56
- render: Icons;
57
- size?: number;
58
- color?: import("../..").ColorTypes;
59
- rotate?: number;
60
- } & import("../..").MarginProps, "$disabled"> & SIcon, never>>> & string & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
61
- export declare const InputTrailingIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
62
- $size: import("../../types").IconSize;
63
- $iconColor?: string;
64
- }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
65
- $size: import("../../types").IconSize;
66
- $iconColor?: string;
67
- }, never>>, "as" | "forwardedAs"> & {
68
- as?: import("styled-components").WebTarget | undefined;
69
- forwardedAs?: import("styled-components").WebTarget | undefined;
70
- }, "$disabled"> & SIcon, never> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
71
- $size: import("../../types").IconSize;
72
- $iconColor?: string;
73
- }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
44
+ } & import("../..").MarginProps, SIcon>> & string & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
45
+ export declare const InputTrailingIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("styled-components").FastOmit<import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
46
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
47
+ }, {
74
48
  $size: import("../../types").IconSize;
75
49
  $iconColor?: string;
76
- }, never>>, "as" | "forwardedAs"> & {
50
+ }>, "as" | "forwardedAs"> & {
77
51
  as?: import("styled-components").WebTarget | undefined;
78
52
  forwardedAs?: import("styled-components").WebTarget | undefined;
79
- }, "$disabled"> & SIcon, never>>> & string;
53
+ }, "style"> & {
54
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | (import("react").CSSProperties & {
55
+ [key: `--${string}`]: string | number | undefined;
56
+ }) | undefined;
57
+ }, SIcon>> & string;
80
58
  export {};
package/dist/fields/components/CommonInput.js CHANGED
@@ -68,7 +68,7 @@ export const Input = styled.input `
68
68
  export const InputLeadingIconContainer = styled(IconContainer) `
69
69
  position: relative;
70
70
  left: 36px;
71
- margin-left: -24px;
71
+ margin-left: ${({ $size }) => -$size}px;
72
72
  z-index: 1;
73
73
  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};
74
74
  color: ${({ theme }) => theme.color.text.base};
package/dist/fields/components/CommonInput.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"CommonInput.js","sourceRoot":"","sources":["../../../src/fields/components/CommonInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components'\nimport { Icon, Icons } from '../../Icon'\nimport { IconContainer } from '../../sharedStyles/shared.styles'\n\ninterface IInput {\n $error?: boolean\n disabled?: boolean\n selected?: boolean\n step?: number\n value?: string\n $frontIcon?: boolean\n $trailingIcon?: Icons\n $fallbackStyle?: boolean\n}\n\ninterface SIcon {\n $disabled?: boolean\n}\n\nexport const Input = styled.input<IInput>`\n border: none;\n color: ${({ $error, theme }) =>\n $error ? theme.color.feedback.negative[200] : theme.color.text.base};\n font-size: 16px;\n width: 100%;\n outline: none;\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};\n opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};\n padding: 18px 14px;\n background-color: ${({ $fallbackStyle, theme }) =>\n $fallbackStyle\n ? theme.color.surface.base[300]\n : theme.color.background['000']};\n border: 2px solid\n ${({ $error, theme }) =>\n $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};\n\n ${({ disabled, $error, theme }) =>\n !disabled &&\n !$error &&\n css`\n &:hover,\n &:focus-within {\n border-color: ${theme.color.border.base};\n }\n `}\n\n border-radius: 12px;\n height: auto;\n\n ${({ $frontIcon }) =>\n $frontIcon &&\n `\n padding-left: 42px;\n `}\n\n ${({ $trailingIcon }) =>\n $trailingIcon &&\n `\n padding-right: 42px;\n `}\n\n /* Remove the spinner on Firefox and Webkit browsers */\n -moz-appearance: textfield;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ${({ theme }) => theme.color.text.subtle};\n }\n\n &:-webkit-autofill {\n animation-name: onAutoFillStart;\n animation-duration: 2s;\n }\n\n @keyframes onAutoFillStart {\n from {\n background-color: inherit;\n }\n to {\n background-color: inherit;\n }\n }\n`\n\nexport const InputLeadingIconContainer = styled(IconContainer)<SIcon>`\n position: relative;\n left: 36px;\n margin-left: -24px;\n z-index: 1;\n opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const StyledFrontIcon = styled(Icon)<SIcon>`\n position: relative;\n left: 36px;\n margin-left: -24px;\n z-index: 1;\n opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const StyledTrailingIcon = styled(Icon)<SIcon>`\n position: relative;\n right: 36px;\n margin-right: -36px;\n opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const InputTrailingIconContainer = styled(IconContainer)<SIcon>`\n position: relative;\n right: 36px;\n margin-right: -36px;\n opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n color: ${({ theme }) => theme.color.text.base};\n`\n"]}
1
+ {"version":3,"file":"CommonInput.js","sourceRoot":"","sources":["../../../src/fields/components/CommonInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components'\nimport { Icon, Icons } from '../../Icon'\nimport { IconContainer } from '../../sharedStyles/shared.styles'\n\ninterface IInput {\n $error?: boolean\n disabled?: boolean\n selected?: boolean\n step?: number\n value?: string\n $frontIcon?: boolean\n $trailingIcon?: Icons\n $fallbackStyle?: boolean\n}\n\ninterface SIcon {\n $disabled?: boolean\n}\n\nexport const Input = styled.input<IInput>`\n border: none;\n color: ${({ $error, theme }) =>\n $error ? theme.color.feedback.negative[200] : theme.color.text.base};\n font-size: 16px;\n width: 100%;\n outline: none;\n cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};\n opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};\n padding: 18px 14px;\n background-color: ${({ $fallbackStyle, theme }) =>\n $fallbackStyle\n ? theme.color.surface.base[300]\n : theme.color.background['000']};\n border: 2px solid\n ${({ $error, theme }) =>\n $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};\n\n ${({ disabled, $error, theme }) =>\n !disabled &&\n !$error &&\n css`\n &:hover,\n &:focus-within {\n border-color: ${theme.color.border.base};\n }\n `}\n\n border-radius: 12px;\n height: auto;\n\n ${({ $frontIcon }) =>\n $frontIcon &&\n `\n padding-left: 42px;\n `}\n\n ${({ $trailingIcon }) =>\n $trailingIcon &&\n `\n padding-right: 42px;\n `}\n\n /* Remove the spinner on Firefox and Webkit browsers */\n -moz-appearance: textfield;\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n &::placeholder {\n color: ${({ theme }) => theme.color.text.subtle};\n }\n\n &:-webkit-autofill {\n animation-name: onAutoFillStart;\n animation-duration: 2s;\n }\n\n @keyframes onAutoFillStart {\n from {\n background-color: inherit;\n }\n to {\n background-color: inherit;\n }\n }\n`\n\nexport const InputLeadingIconContainer = styled(IconContainer)<SIcon>`\n position: relative;\n left: 36px;\n margin-left: ${({ $size }) => -$size}px;\n z-index: 1;\n opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const StyledFrontIcon = styled(Icon)<SIcon>`\n position: relative;\n left: 36px;\n margin-left: -24px;\n z-index: 1;\n opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const StyledTrailingIcon = styled(Icon)<SIcon>`\n position: relative;\n right: 36px;\n margin-right: -36px;\n opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const InputTrailingIconContainer = styled(IconContainer)<SIcon>`\n position: relative;\n right: 36px;\n margin-right: -36px;\n opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n color: ${({ theme }) => theme.color.text.base};\n`\n"]}
package/dist/sharedStyles/shared.styles.d.ts CHANGED
@@ -1,8 +1,7 @@
1
1
  import { IconSize } from '../types';
2
- export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
2
+ export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Merged<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "style"> & {
3
+ style?: import("react").CSSProperties | import("styled-components/dist/types").CSSPropertiesWithVars | undefined;
4
+ }, {
3
5
  $size: IconSize;
4
6
  $iconColor?: string;
5
- }, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$iconColor" | "$size"> & {
6
- $size: IconSize;
7
- $iconColor?: string;
8
- }, never>>> & string;
7
+ }>> & string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mrshmllw/smores-react",
3
- "version": "16.2.16",
3
+ "version": "16.3.0",
4
4
  "description": "Collection of React components used by Marshmallow Technology",
5
5
  "main": "./dist/index.js",
6
6
  "type": "module",
@@ -52,54 +52,54 @@
52
52
  "@floating-ui/react": "0.27.20",
53
53
  "@fortawesome/fontawesome-svg-core": "^7.1.0",
54
54
  "@fortawesome/react-fontawesome": "^3.1.1",
55
- "@lexical/code-core": "^0.49.0",
56
- "@lexical/code-shiki": "^0.49.0",
57
- "@lexical/react": "^0.49.0",
58
- "@lexical/selection": "^0.49.0",
59
- "@lexical/utils": "^0.49.0",
60
- "@mrshmllw/smores-foundations": "^1.1.1",
55
+ "@lexical/code-core": "^0.52.0",
56
+ "@lexical/code-shiki": "^0.52.0",
57
+ "@lexical/react": "^0.52.0",
58
+ "@lexical/selection": "^0.52.0",
59
+ "@lexical/utils": "^0.52.0",
60
+ "@mrshmllw/smores-foundations": "^1.2.0",
61
61
  "body-scroll-lock": "^4.0.0-beta.0",
62
62
  "date-fns": "^4.4.0",
63
- "dompurify": "^3.4.13",
63
+ "dompurify": "^3.4.16",
64
64
  "fuse.js": "^7.5.0",
65
- "lexical": "^0.49.0",
65
+ "lexical": "^0.52.0",
66
66
  "polished": "^4.3.1"
67
67
  },
68
68
  "devDependencies": {
69
- "@commitlint/cli": "^21.2.1",
69
+ "@commitlint/cli": "^21.2.3",
70
70
  "@mrshmllw/campfire": "^7.1.0",
71
- "@snyk/protect": "^1.1306.3",
72
- "@storybook/addon-a11y": "^10.5.7",
71
+ "@snyk/protect": "^1.1307.4",
72
+ "@storybook/addon-a11y": "^10.6.1",
73
73
  "@storybook/addon-coverage": "^3.0.2",
74
- "@storybook/addon-docs": "^10.5.7",
75
- "@storybook/addon-links": "^10.5.7",
76
- "@storybook/react-vite": "^10.5.7",
77
- "@storybook/test-runner": "^0.24.4",
74
+ "@storybook/addon-docs": "^10.6.1",
75
+ "@storybook/addon-links": "^10.6.1",
76
+ "@storybook/react-vite": "^10.6.1",
77
+ "@storybook/test-runner": "^0.24.5",
78
78
  "@testing-library/jest-dom": "^7.0.1",
79
- "@testing-library/react": "^16.3.2",
79
+ "@testing-library/react": "^16.3.3",
80
80
  "@types/body-scroll-lock": "^3.1.2",
81
- "@types/node": "^26.2.0",
82
- "@types/react": "^19.2.18",
83
- "@types/react-dom": "^19.2.4",
81
+ "@types/node": "^26.6.3",
82
+ "@types/react": "^19.3.0",
83
+ "@types/react-dom": "^19.3.0",
84
84
  "axe-playwright": "^2.2.2",
85
- "concurrently": "^10.0.4",
85
+ "concurrently": "^10.0.5",
86
86
  "eslint-plugin-prettier": "^5.5.6",
87
87
  "husky": "^9.1.7",
88
88
  "jest-styled-components": "^7.4.0",
89
- "jsdom": "^30.0.1",
90
- "lint-staged": "^17.3.0",
89
+ "jsdom": "^30.1.1",
90
+ "lint-staged": "^17.6.0",
91
91
  "oxlint": "^1.78.0",
92
- "oxlint-tsgolint": "^7.0.2001",
92
+ "oxlint-tsgolint": "^7.0.2003",
93
93
  "playwright": "^1.62.1",
94
94
  "prettier": "^3.9.6",
95
- "react": "^19.2.8",
96
- "react-dom": "^19.2.8",
95
+ "react": "^19.3.0",
96
+ "react-dom": "^19.3.0",
97
97
  "rimraf": "^6.1.3",
98
98
  "storybook": "^10.2.13",
99
- "styled-components": "^6.4.4",
99
+ "styled-components": "^6.5.3",
100
100
  "typescript": "^7.0.2",
101
- "vite": "^8.2.1",
102
- "vitest": "^4.1.10"
101
+ "vite": "^8.3.0",
102
+ "vitest": "^4.1.11"
103
103
  },
104
104
  "peerDependencies": {
105
105
  "react": "^18 || ^19",