@mrshmllw/smores-react 12.3.2 → 12.3.3
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.
- package/dist/Icon/Icon.js +1 -1
- package/dist/Icon/Icon.js.map +1 -1
- package/dist/ProgressIndicator/components/StepItem.js +9 -5
- package/dist/ProgressIndicator/components/StepItem.js.map +1 -1
- package/dist/SegmentedControl/ToggleButton.js +1 -1
- package/dist/SegmentedControl/ToggleButton.js.map +1 -1
- package/package.json +11 -11
package/dist/Icon/Icon.js
CHANGED
|
@@ -7,7 +7,7 @@ export const Icon = ({ className = '', render, size = 24, color = 'liquorice', r
|
|
|
7
7
|
if (!render || !iconList[render] || render.length === 0)
|
|
8
8
|
return null;
|
|
9
9
|
const IconComponent = iconList[render];
|
|
10
|
-
return (React.createElement(Container, { forwardedAs: "span", "data-
|
|
10
|
+
return (React.createElement(Container, { forwardedAs: "span", "data-testid": `${render}-container`, className: className, size: size, rotate: rotate, color: color, ...marginProps },
|
|
11
11
|
React.createElement(IconComponent, null)));
|
|
12
12
|
};
|
|
13
13
|
const Container = styled(Box)(({ size, rotate, color }) => css `
|
package/dist/Icon/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAG/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAS,QAAQ,EAAE,MAAM,aAAa,CAAA;AAe7C,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,SAAS,GAAG,EAAE,EACd,MAAM,EACN,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,WAAW,EACnB,MAAM,GAAG,CAAC,EACV,GAAG,WAAW,EACf,EAAE,EAAE;IACH,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAEpE,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;IAEtC,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAC,MAAM,iBACL,GAAG,MAAM,YAAY,EAClC,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,KACR,WAAW;QAEf,oBAAC,aAAa,OAAG,CACP,CACb,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;aAKrB,IAAI;cACH,IAAI;wBACM,MAAM;;eAEf,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;GAE/B,CACF,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { Box } from '../Box'\nimport { Color, theme } from '../theme'\nimport { Icons, iconList } from './iconsList'\n\nexport type IconProps = {\n /** className attribute to apply classes from props */\n className?: string\n /** specify what Icon to render */\n render: Icons\n /** set size of the Icon */\n size?: number\n /** set color of the Icon */\n color?: Color\n /** rotation degrees */\n rotate?: number\n} & MarginProps\n\nexport const Icon: FC<IconProps> = ({\n className = '',\n render,\n size = 24,\n color = 'liquorice',\n rotate = 0,\n ...marginProps\n}) => {\n if (!render || !iconList[render] || render.length === 0) return null\n\n const IconComponent = iconList[render]\n\n return (\n <Container\n forwardedAs=\"span\"\n data-
|
|
1
|
+
{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAa,MAAM,OAAO,CAAA;AACjC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAG/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAS,KAAK,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAS,QAAQ,EAAE,MAAM,aAAa,CAAA;AAe7C,MAAM,CAAC,MAAM,IAAI,GAAkB,CAAC,EAClC,SAAS,GAAG,EAAE,EACd,MAAM,EACN,IAAI,GAAG,EAAE,EACT,KAAK,GAAG,WAAW,EACnB,MAAM,GAAG,CAAC,EACV,GAAG,WAAW,EACf,EAAE,EAAE;IACH,IAAI,CAAC,MAAM,IAAI,CAAC,QAAQ,CAAC,MAAM,CAAC,IAAI,MAAM,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,IAAI,CAAA;IAEpE,MAAM,aAAa,GAAG,QAAQ,CAAC,MAAM,CAAC,CAAA;IAEtC,OAAO,CACL,oBAAC,SAAS,IACR,WAAW,EAAC,MAAM,iBACL,GAAG,MAAM,YAAY,EAClC,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,KACR,WAAW;QAEf,oBAAC,aAAa,OAAG,CACP,CACb,CAAA;AACH,CAAC,CAAA;AAQD,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAC3B,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;;;;;aAKrB,IAAI;cACH,IAAI;wBACM,MAAM;;eAEf,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;;GAE/B,CACF,CAAA","sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { Box } from '../Box'\nimport { Color, theme } from '../theme'\nimport { Icons, iconList } from './iconsList'\n\nexport type IconProps = {\n /** className attribute to apply classes from props */\n className?: string\n /** specify what Icon to render */\n render: Icons\n /** set size of the Icon */\n size?: number\n /** set color of the Icon */\n color?: Color\n /** rotation degrees */\n rotate?: number\n} & MarginProps\n\nexport const Icon: FC<IconProps> = ({\n className = '',\n render,\n size = 24,\n color = 'liquorice',\n rotate = 0,\n ...marginProps\n}) => {\n if (!render || !iconList[render] || render.length === 0) return null\n\n const IconComponent = iconList[render]\n\n return (\n <Container\n forwardedAs=\"span\"\n data-testid={`${render}-container`}\n className={className}\n size={size}\n rotate={rotate}\n color={color}\n {...marginProps}\n >\n <IconComponent />\n </Container>\n )\n}\n\ninterface IIcon extends MarginProps {\n size: number\n color: Color\n rotate: number\n}\n\nconst Container = styled(Box)<IIcon>(\n ({ size, rotate, color }) => css`\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n width: ${size}px;\n height: ${size}px;\n transform: rotate(${rotate}deg);\n svg {\n color: ${theme.colors[color]} !important;\n }\n `,\n)\n"]}
|
|
@@ -38,12 +38,16 @@ const SimpleItem = styled(Box) `
|
|
|
38
38
|
const ProgressItem = styled(Box) `
|
|
39
39
|
position: relative;
|
|
40
40
|
z-index: 1;
|
|
41
|
+
top: 9px;
|
|
42
|
+
left: -10px;
|
|
43
|
+
|
|
44
|
+
&:last-child {
|
|
45
|
+
width: auto;
|
|
46
|
+
}
|
|
41
47
|
`;
|
|
42
48
|
const ClickableArea = styled(Box) `
|
|
43
49
|
position: relative;
|
|
44
50
|
cursor: ${({ $isDisabled }) => ($isDisabled ? 'auto' : 'pointer')};
|
|
45
|
-
top: 9px;
|
|
46
|
-
left: -8px;
|
|
47
51
|
`;
|
|
48
52
|
const ProgressIndicator = styled(Box) `
|
|
49
53
|
border-radius: 50%;
|
|
@@ -56,14 +60,14 @@ const ProgressIndicator = styled(Box) `
|
|
|
56
60
|
const StyledText = styled(Text) `
|
|
57
61
|
margin-top: 2px;
|
|
58
62
|
font-weight: ${theme.font.weight.medium};
|
|
63
|
+
white-space: nowrap;
|
|
59
64
|
`;
|
|
60
65
|
const CompletedBar = styled(Box) `
|
|
61
66
|
position: absolute;
|
|
62
67
|
height: 12px;
|
|
63
68
|
width: 100%;
|
|
64
|
-
top:
|
|
65
|
-
left:
|
|
66
|
-
transform: translateY(calc(-50%));
|
|
69
|
+
top: 7px;
|
|
70
|
+
left: 10px;
|
|
67
71
|
background: ${theme.colors.pistachio};
|
|
68
72
|
z-index: 0;
|
|
69
73
|
`;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StepItem.js","sourceRoot":"","sources":["../../../src/ProgressIndicator/components/StepItem.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,WAAW,CAAA;AAE/B,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AACjC,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAajC,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EACvB,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,aAAa,EACb,SAAS,EACT,OAAO,EACP,WAAW,GAAG,KAAK,EACnB,eAAe,GAAG,KAAK,EACvB,UAAU,GAAG,KAAK,EAClB,UAAU,GACI,EAAE,EAAE;IAClB,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CACL,oBAAC,UAAU,kBACG,WAAW,oBACP,eAAe,EAC/B,KAAK,EAAE,SAAS,EAChB,MAAM,EAAC,MAAM,GACb,CACH,CAAA;IACH,CAAC;IAED,OAAO,CACL,oBAAC,YAAY,IACX,IAAI,QACJ,UAAU,EAAC,YAAY,gBACX,WAAW,oBACP,eAAe,EAC/B,KAAK,EAAE,SAAS;QAEhB,oBAAC,aAAa,IACZ,IAAI,QACJ,SAAS,EAAC,QAAQ,EAClB,UAAU,EAAC,QAAQ,EACnB,OAAO,EAAE,OAAO,iBACH,UAAU;YAEvB,oBAAC,iBAAiB,kBACJ,WAAW,kBACT,aAAa,EAC3B,IAAI,QACJ,UAAU,EAAC,QAAQ,EACnB,cAAc,EAAC,QAAQ,IAEtB,WAAW,IAAI,oBAAC,IAAI,IAAC,MAAM,EAAC,MAAM,EAAC,IAAI,EAAE,EAAE,EAAE,KAAK,EAAC,OAAO,GAAG,CAC5C;YACpB,oBAAC,UAAU,IAAC,IAAI,EAAC,SAAS,IAAE,KAAK,CAAc,CACjC;QACf,WAAW,IAAI,CAAC,UAAU,IAAI,oBAAC,YAAY,OAAG,CAClC,CAChB,CAAA;AACH,CAAC,CAAA;AAUD,MAAM,aAAa,GAAG,GAAG,CAAA;;;;;;CAMxB,CAAA;AAED,MAAM,eAAe,GAAG,GAAG,CAAsB;;;;;IAK7C,CAAC,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,cAAc,IAAI,aAAa;CAC1D,CAAA;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAC,CAAsB;;;IAGhD,eAAe;;gBAEH,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAC/B,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM;CAC/C,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAsB
|
|
1
|
+
{"version":3,"file":"StepItem.js","sourceRoot":"","sources":["../../../src/ProgressIndicator/components/StepItem.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Box } from '../../Box'\nimport { StepData } from 'ProgressIndicator/types'\nimport React from 'react'\nimport styled, { css } from 'styled-components'\nimport { theme } from '../../theme'\nimport { Text } from '../../Text'\nimport { Icon } from '../../Icon'\n\nexport interface StepItemProps extends Pick<StepData, 'label'> {\n isCompleted?: boolean\n isLastCompleted?: boolean\n isDisabled: boolean\n isCurrentStep: boolean\n isSimple?: boolean\n onClick: () => void\n stepWidth: string\n isLastItem: boolean\n}\n\nexport const StepItem = ({\n label,\n isSimple = false,\n isCurrentStep,\n stepWidth,\n onClick,\n isCompleted = false,\n isLastCompleted = false,\n isLastItem = false,\n isDisabled,\n}: StepItemProps) => {\n if (isSimple) {\n return (\n <SimpleItem\n $completed={isCompleted}\n $lastCompleted={isLastCompleted}\n width={stepWidth}\n height=\"12px\"\n />\n )\n }\n\n return (\n <ProgressItem\n flex\n alignItems=\"flex-start\"\n $completed={isCompleted}\n $lastCompleted={isLastCompleted}\n width={stepWidth}\n >\n <ClickableArea\n flex\n direction=\"column\"\n alignItems=\"center\"\n onClick={onClick}\n $isDisabled={isDisabled}\n >\n <ProgressIndicator\n $completed={isCompleted}\n $currentStep={isCurrentStep}\n flex\n alignItems=\"center\"\n justifyContent=\"center\"\n >\n {isCompleted && <Icon render=\"tick\" size={16} color=\"cream\" />}\n </ProgressIndicator>\n <StyledText typo=\"caption\">{label}</StyledText>\n </ClickableArea>\n {isCompleted && !isLastItem && <CompletedBar />}\n </ProgressItem>\n )\n}\n\ninterface StyledComponentProps {\n $completed?: boolean\n $lastCompleted?: boolean\n $currentStep?: boolean\n $isDisabled?: boolean\n $completedStep?: boolean\n}\n\nconst lastCompleted = css`\n border-radius: 0 100px 100px 0;\n\n &:first-child {\n border-radius: 100px;\n }\n`\n\nconst borderRadiusCss = css<StyledComponentProps>`\n &:first-child {\n border-radius: 100px 0 0 100px;\n }\n\n ${({ $lastCompleted }) => $lastCompleted && lastCompleted}\n`\n\nconst SimpleItem = styled(Box)<StyledComponentProps>`\n position: relative;\n z-index: 1;\n ${borderRadiusCss}\n\n background: ${({ $completed }) =>\n $completed ? theme.colors.pistachio : 'none'};\n`\n\nconst ProgressItem = styled(Box)<StyledComponentProps>`\n position: relative;\n z-index: 1;\n top: 9px;\n left: -10px;\n\n &:last-child {\n width: auto;\n }\n`\nconst ClickableArea = styled(Box)<StyledComponentProps>`\n position: relative;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'auto' : 'pointer')};\n`\n\nconst ProgressIndicator = styled(Box)<StyledComponentProps>`\n border-radius: 50%;\n height: 24px;\n width: 24px;\n position: relative;\n z-index: 1;\n background: ${({ $completed, $currentStep }) =>\n $completed || $currentStep ? theme.colors.pistachio : theme.colors.matcha};\n`\n\nconst StyledText = styled(Text)`\n margin-top: 2px;\n font-weight: ${theme.font.weight.medium};\n white-space: nowrap;\n`\n\nconst CompletedBar = styled(Box)`\n position: absolute;\n height: 12px;\n width: 100%;\n top: 7px;\n left: 10px;\n background: ${theme.colors.pistachio};\n z-index: 0;\n`\n"]}
|
|
@@ -2,7 +2,7 @@ import React from 'react';
|
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
3
|
import { Box } from '../Box';
|
|
4
4
|
export const ToggleButton = ({ name, value, onChange, isSelected, isDisabled = false, children, }) => {
|
|
5
|
-
return (React.createElement(Wrapper, { as: "label", "data-
|
|
5
|
+
return (React.createElement(Wrapper, { as: "label", "data-testid": `value-toggle-${String(value)}`, isDisabled: isDisabled },
|
|
6
6
|
React.createElement(VisuallyHiddenInput, { type: "radio", name: name, checked: isSelected, onClick: () => onChange(value), onChange: () => onChange(value) }),
|
|
7
7
|
children));
|
|
8
8
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../src/SegmentedControl/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAW5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAS,EACnC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,QAAQ,GACiB,EAAE,EAAE;IAC7B,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAC,OAAO,iBACG,gBAAgB,MAAM,CAAC,KAAK,CAAC,EAAE,EAC5C,UAAU,EAAE,UAAU;QAEtB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAC/B;QACD,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAyB;;IAEhD,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CACnB,UAAU;IACV,GAAG,CAAA;;;KAGF;;;;;;;CAOJ,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;CAQvC,CAAA","sourcesContent":["import React, { ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Box } from '../Box'\n\ntype ToggleButtonProps<Value> = {\n name: string\n value: Value\n onChange: (value: Value) => void\n isSelected: boolean\n isDisabled?: boolean\n children: ReactNode\n}\n\nexport const ToggleButton = <Value,>({\n name,\n value,\n onChange,\n isSelected,\n isDisabled = false,\n children,\n}: ToggleButtonProps<Value>) => {\n return (\n <Wrapper\n as=\"label\"\n data-
|
|
1
|
+
{"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../src/SegmentedControl/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAW5B,MAAM,CAAC,MAAM,YAAY,GAAG,CAAS,EACnC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,QAAQ,GACiB,EAAE,EAAE;IAC7B,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAC,OAAO,iBACG,gBAAgB,MAAM,CAAC,KAAK,CAAC,EAAE,EAC5C,UAAU,EAAE,UAAU;QAEtB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAC/B;QACD,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAyB;;IAEhD,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CACnB,UAAU;IACV,GAAG,CAAA;;;KAGF;;;;;;;CAOJ,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;CAQvC,CAAA","sourcesContent":["import React, { ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Box } from '../Box'\n\ntype ToggleButtonProps<Value> = {\n name: string\n value: Value\n onChange: (value: Value) => void\n isSelected: boolean\n isDisabled?: boolean\n children: ReactNode\n}\n\nexport const ToggleButton = <Value,>({\n name,\n value,\n onChange,\n isSelected,\n isDisabled = false,\n children,\n}: ToggleButtonProps<Value>) => {\n return (\n <Wrapper\n as=\"label\"\n data-testid={`value-toggle-${String(value)}`}\n isDisabled={isDisabled}\n >\n <VisuallyHiddenInput\n type=\"radio\"\n name={name}\n checked={isSelected}\n onClick={() => onChange(value)}\n onChange={() => onChange(value)}\n />\n {children}\n </Wrapper>\n )\n}\n\nconst Wrapper = styled(Box)<{ isDisabled: boolean }>`\n cursor: pointer;\n ${({ isDisabled }) =>\n isDisabled &&\n css`\n pointer-events: none;\n opacity: 0.5;\n `}\n padding: 10px 14px;\n transition: color 0.1s linear;\n height: fit-content;\n width: 100%;\n align-content: center;\n z-index: 3;\n`\n\nconst VisuallyHiddenInput = styled.input`\n clip: rect(0 0 0 0);\n clip-path: inset(50%);\n height: 1px;\n overflow: hidden;\n position: absolute;\n white-space: nowrap;\n width: 1px;\n`\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "12.3.
|
|
3
|
+
"version": "12.3.3",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -55,21 +55,21 @@
|
|
|
55
55
|
"@testing-library/react": "^16.3.0",
|
|
56
56
|
"@types/body-scroll-lock": "^3.1.0",
|
|
57
57
|
"@types/dompurify": "^3.2.0",
|
|
58
|
-
"@types/node": "^22.14.
|
|
59
|
-
"@types/react": "^19.1.
|
|
58
|
+
"@types/node": "^22.14.1",
|
|
59
|
+
"@types/react": "^19.1.2",
|
|
60
60
|
"@types/react-dom": "^19.1.2",
|
|
61
|
-
"@typescript-eslint/eslint-plugin": "^8.
|
|
62
|
-
"@typescript-eslint/parser": "^8.
|
|
61
|
+
"@typescript-eslint/eslint-plugin": "^8.30.1",
|
|
62
|
+
"@typescript-eslint/parser": "^8.30.1",
|
|
63
63
|
"axe-playwright": "^2.1.0",
|
|
64
64
|
"conventional-changelog-conventionalcommits": "^8.0.0",
|
|
65
65
|
"eslint": "^9.24.0",
|
|
66
|
-
"eslint-config-prettier": "^10.1.
|
|
66
|
+
"eslint-config-prettier": "^10.1.2",
|
|
67
67
|
"eslint-plugin-prettier": "^5.2.6",
|
|
68
68
|
"eslint-plugin-react": "^7.37.5",
|
|
69
69
|
"eslint-plugin-react-hooks": "^5.2.0",
|
|
70
70
|
"husky": "^9.1.7",
|
|
71
|
-
"jsdom": "^26.
|
|
72
|
-
"lint-staged": "^15.5.
|
|
71
|
+
"jsdom": "^26.1.0",
|
|
72
|
+
"lint-staged": "^15.5.1",
|
|
73
73
|
"playwright": "^1.51.1",
|
|
74
74
|
"prettier": "^3.5.3",
|
|
75
75
|
"react": "^19.0.0",
|
|
@@ -79,12 +79,12 @@
|
|
|
79
79
|
"storybook": "^8.0.4",
|
|
80
80
|
"styled-components": "^6.1.17",
|
|
81
81
|
"typescript": "^5.8.3",
|
|
82
|
-
"typescript-eslint": "^8.
|
|
83
|
-
"vite": "^6.2.
|
|
82
|
+
"typescript-eslint": "^8.30.1",
|
|
83
|
+
"vite": "^6.2.6",
|
|
84
84
|
"vitest": "^3.1.1"
|
|
85
85
|
},
|
|
86
86
|
"dependencies": {
|
|
87
|
-
"@floating-ui/react": "0.27.
|
|
87
|
+
"@floating-ui/react": "0.27.7",
|
|
88
88
|
"@lexical/react": "^0.30.0",
|
|
89
89
|
"body-scroll-lock": "^4.0.0-beta.0",
|
|
90
90
|
"date-fns": "^4.1.0",
|