@mrshmllw/smores-react 12.3.0 → 12.3.2
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/ProgressIndicator/ProgressIndicator.js +3 -3
- package/dist/ProgressIndicator/ProgressIndicator.js.map +1 -1
- package/dist/ProgressIndicator/components/StepItem.d.ts +2 -1
- package/dist/ProgressIndicator/components/StepItem.js +16 -13
- package/dist/ProgressIndicator/components/StepItem.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -5,9 +5,9 @@ import { theme } from '../theme';
|
|
|
5
5
|
import { Box } from '../Box';
|
|
6
6
|
import { StepItem } from './components/StepItem';
|
|
7
7
|
export const ProgressIndicator = ({ handleStepChange, onStepClick, simpleStep = false, steps, currentStep, }) => {
|
|
8
|
-
const { totalWidth, stepWidth } = calculateProgressWidths(steps.length, simpleStep);
|
|
9
8
|
const visibleSteps = steps.filter((step) => !step.isHidden);
|
|
10
9
|
const currentStepIndex = visibleSteps.findIndex((step) => step.id === currentStep);
|
|
10
|
+
const { totalWidth, stepWidth } = calculateProgressWidths(visibleSteps.length, simpleStep);
|
|
11
11
|
const lastCompletedStepIndex = visibleSteps.findLastIndex((step) => calculateStepState(visibleSteps.indexOf(step), currentStepIndex) ===
|
|
12
12
|
'completed');
|
|
13
13
|
const handleStepClick = (currentStepIndex, currentStepState, stepData) => {
|
|
@@ -18,11 +18,11 @@ export const ProgressIndicator = ({ handleStepChange, onStepClick, simpleStep =
|
|
|
18
18
|
handleStepChange(stepData);
|
|
19
19
|
}
|
|
20
20
|
};
|
|
21
|
-
return (React.createElement(Wrapper, { width: `${totalWidth}px`, flex: true, alignItems: "center" },
|
|
21
|
+
return (React.createElement(Wrapper, { width: `${totalWidth}px`, flex: true, justifyContent: "flex-start", alignItems: "center" },
|
|
22
22
|
React.createElement(DefaultProgress, { "$simpleStep": simpleStep }),
|
|
23
23
|
React.createElement(Box, { flex: true }, visibleSteps.map((step, index) => {
|
|
24
24
|
const stepState = calculateStepState(index, currentStepIndex);
|
|
25
|
-
return (React.createElement(StepItem, { key: step.id, isCompleted: stepState === 'completed', isCurrentStep: stepState === 'current', isLastCompleted: lastCompletedStepIndex === index, onClick: () => handleStepClick(index, stepState, step), stepWidth: `${stepWidth}px`, label: step.label, isSimple: simpleStep, isLastItem: index === visibleSteps.length - 1 }));
|
|
25
|
+
return (React.createElement(StepItem, { key: step.id, isCompleted: stepState === 'completed', isCurrentStep: stepState === 'current', isDisabled: stepState === 'disabled', isLastCompleted: lastCompletedStepIndex === index, onClick: () => handleStepClick(index, stepState, step), stepWidth: `${stepWidth}px`, label: step.label, isSimple: simpleStep, isLastItem: index === visibleSteps.length - 1 }));
|
|
26
26
|
}))));
|
|
27
27
|
};
|
|
28
28
|
const Wrapper = styled(Box) `
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressIndicator.js","sourceRoot":"","sources":["../../src/ProgressIndicator/ProgressIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAA;AACvE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAahD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,gBAAgB,EAChB,WAAW,EACX,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,WAAW,GACL,EAAE,EAAE;IACV,MAAM,
|
|
1
|
+
{"version":3,"file":"ProgressIndicator.js","sourceRoot":"","sources":["../../src/ProgressIndicator/ProgressIndicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,kBAAkB,EAAE,uBAAuB,EAAE,MAAM,WAAW,CAAA;AACvE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAahD,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,EAChC,gBAAgB,EAChB,WAAW,EACX,UAAU,GAAG,KAAK,EAClB,KAAK,EACL,WAAW,GACL,EAAE,EAAE;IACV,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC3D,MAAM,gBAAgB,GAAG,YAAY,CAAC,SAAS,CAC7C,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,EAAE,KAAK,WAAW,CAClC,CAAA;IAED,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,uBAAuB,CACvD,YAAY,CAAC,MAAM,EACnB,UAAU,CACX,CAAA;IAED,MAAM,sBAAsB,GAAG,YAAY,CAAC,aAAa,CACvD,CAAC,IAAI,EAAE,EAAE,CACP,kBAAkB,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,gBAAgB,CAAC;QAChE,WAAW,CACd,CAAA;IAED,MAAM,eAAe,GAAG,CACtB,gBAAwB,EACxB,gBAA2B,EAC3B,QAAkB,EAClB,EAAE;QACF,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC,CAAA;QACrD,CAAC;QAED,IAAI,gBAAgB,KAAK,UAAU,EAAE,CAAC;YACpC,gBAAgB,CAAC,QAAQ,CAAC,CAAA;QAC5B,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,oBAAC,OAAO,IACN,KAAK,EAAE,GAAG,UAAU,IAAI,EACxB,IAAI,QACJ,cAAc,EAAC,YAAY,EAC3B,UAAU,EAAC,QAAQ;QAEnB,oBAAC,eAAe,mBAAc,UAAU,GAAI;QAC5C,oBAAC,GAAG,IAAC,IAAI,UACN,YAAY,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;YAChC,MAAM,SAAS,GAAG,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,CAAC,CAAA;YAC7D,OAAO,CACL,oBAAC,QAAQ,IACP,GAAG,EAAE,IAAI,CAAC,EAAE,EACZ,WAAW,EAAE,SAAS,KAAK,WAAW,EACtC,aAAa,EAAE,SAAS,KAAK,SAAS,EACtC,UAAU,EAAE,SAAS,KAAK,UAAU,EACpC,eAAe,EAAE,sBAAsB,KAAK,KAAK,EACjD,OAAO,EAAE,GAAG,EAAE,CAAC,eAAe,CAAC,KAAK,EAAE,SAAS,EAAE,IAAI,CAAC,EACtD,SAAS,EAAE,GAAG,SAAS,IAAI,EAC3B,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,QAAQ,EAAE,UAAU,EACpB,UAAU,EAAE,KAAK,KAAK,YAAY,CAAC,MAAM,GAAG,CAAC,GAC7C,CACH,CAAA;QACH,CAAC,CAAC,CACE,CACE,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAE1B,CAAA;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAC,CAA2B;;;;gBAI9C,KAAK,CAAC,MAAM,CAAC,MAAM;;;;IAI/B,CAAC,EAAE,WAAW,EAAE,EAAE,EAAE,CAAC,WAAW,IAAI,sBAAsB;CAC7D,CAAA","sourcesContent":["import React from 'react'\nimport { StepData, StepState } from './types'\nimport { calculateStepState, calculateProgressWidths } from './helpers'\nimport styled from 'styled-components'\nimport { theme } from '../theme'\nimport { Box } from '../Box'\nimport { StepItem } from './components/StepItem'\n\ninterface Props {\n steps: ReadonlyArray<StepData>\n handleStepChange: (step: StepData) => void\n simpleStep?: boolean\n onStepClick?: (data: {\n currentStepIndex: number\n currentStepState: StepState\n }) => void\n currentStep: string\n}\n\nexport const ProgressIndicator = ({\n handleStepChange,\n onStepClick,\n simpleStep = false,\n steps,\n currentStep,\n}: Props) => {\n const visibleSteps = steps.filter((step) => !step.isHidden)\n const currentStepIndex = visibleSteps.findIndex(\n (step) => step.id === currentStep,\n )\n\n const { totalWidth, stepWidth } = calculateProgressWidths(\n visibleSteps.length,\n simpleStep,\n )\n\n const lastCompletedStepIndex = visibleSteps.findLastIndex(\n (step) =>\n calculateStepState(visibleSteps.indexOf(step), currentStepIndex) ===\n 'completed',\n )\n\n const handleStepClick = (\n currentStepIndex: number,\n currentStepState: StepState,\n stepData: StepData,\n ) => {\n if (onStepClick) {\n onStepClick({ currentStepIndex, currentStepState })\n }\n\n if (currentStepState !== 'disabled') {\n handleStepChange(stepData)\n }\n }\n\n return (\n <Wrapper\n width={`${totalWidth}px`}\n flex\n justifyContent=\"flex-start\"\n alignItems=\"center\"\n >\n <DefaultProgress $simpleStep={simpleStep} />\n <Box flex>\n {visibleSteps.map((step, index) => {\n const stepState = calculateStepState(index, currentStepIndex)\n return (\n <StepItem\n key={step.id}\n isCompleted={stepState === 'completed'}\n isCurrentStep={stepState === 'current'}\n isDisabled={stepState === 'disabled'}\n isLastCompleted={lastCompletedStepIndex === index}\n onClick={() => handleStepClick(index, stepState, step)}\n stepWidth={`${stepWidth}px`}\n label={step.label}\n isSimple={simpleStep}\n isLastItem={index === visibleSteps.length - 1}\n />\n )\n })}\n </Box>\n </Wrapper>\n )\n}\n\nconst Wrapper = styled(Box)`\n position: relative;\n`\n\nconst DefaultProgress = styled(Box)<{ $simpleStep?: boolean }>`\n z-index: 0;\n content: '';\n position: absolute;\n background: ${theme.colors.matcha};\n width: 100%;\n height: 12px;\n\n ${({ $simpleStep }) => $simpleStep && `border-radius:100px;`}\n`\n"]}
|
|
@@ -3,10 +3,11 @@ import React from 'react';
|
|
|
3
3
|
export interface StepItemProps extends Pick<StepData, 'label'> {
|
|
4
4
|
isCompleted?: boolean;
|
|
5
5
|
isLastCompleted?: boolean;
|
|
6
|
+
isDisabled: boolean;
|
|
6
7
|
isCurrentStep: boolean;
|
|
7
8
|
isSimple?: boolean;
|
|
8
9
|
onClick: () => void;
|
|
9
10
|
stepWidth: string;
|
|
10
11
|
isLastItem: boolean;
|
|
11
12
|
}
|
|
12
|
-
export declare const StepItem: ({ label, isSimple, isCurrentStep, stepWidth, onClick, isCompleted, isLastCompleted, isLastItem, }: StepItemProps) => React.JSX.Element;
|
|
13
|
+
export declare const StepItem: ({ label, isSimple, isCurrentStep, stepWidth, onClick, isCompleted, isLastCompleted, isLastItem, isDisabled, }: StepItemProps) => React.JSX.Element;
|
|
@@ -4,14 +4,15 @@ import styled, { css } from 'styled-components';
|
|
|
4
4
|
import { theme } from '../../theme';
|
|
5
5
|
import { Text } from '../../Text';
|
|
6
6
|
import { Icon } from '../../Icon';
|
|
7
|
-
export const StepItem = ({ label, isSimple = false, isCurrentStep, stepWidth, onClick, isCompleted = false, isLastCompleted = false, isLastItem = false, }) => {
|
|
7
|
+
export const StepItem = ({ label, isSimple = false, isCurrentStep, stepWidth, onClick, isCompleted = false, isLastCompleted = false, isLastItem = false, isDisabled, }) => {
|
|
8
8
|
if (isSimple) {
|
|
9
9
|
return (React.createElement(SimpleItem, { "$completed": isCompleted, "$lastCompleted": isLastCompleted, width: stepWidth, height: "12px" }));
|
|
10
10
|
}
|
|
11
|
-
return (React.createElement(ProgressItem, { flex: true, "$completed": isCompleted, "$lastCompleted": isLastCompleted, width: stepWidth
|
|
12
|
-
React.createElement(
|
|
13
|
-
|
|
14
|
-
|
|
11
|
+
return (React.createElement(ProgressItem, { flex: true, alignItems: "flex-start", "$completed": isCompleted, "$lastCompleted": isLastCompleted, width: stepWidth },
|
|
12
|
+
React.createElement(ClickableArea, { flex: true, direction: "column", alignItems: "center", onClick: onClick, "$isDisabled": isDisabled },
|
|
13
|
+
React.createElement(ProgressIndicator, { "$completed": isCompleted, "$currentStep": isCurrentStep, flex: true, alignItems: "center", justifyContent: "center" }, isCompleted && React.createElement(Icon, { render: "tick", size: 16, color: "cream" })),
|
|
14
|
+
React.createElement(StyledText, { typo: "caption" }, label)),
|
|
15
|
+
isCompleted && !isLastItem && React.createElement(CompletedBar, null)));
|
|
15
16
|
};
|
|
16
17
|
const lastCompleted = css `
|
|
17
18
|
border-radius: 0 100px 100px 0;
|
|
@@ -38,29 +39,31 @@ const ProgressItem = styled(Box) `
|
|
|
38
39
|
position: relative;
|
|
39
40
|
z-index: 1;
|
|
40
41
|
`;
|
|
42
|
+
const ClickableArea = styled(Box) `
|
|
43
|
+
position: relative;
|
|
44
|
+
cursor: ${({ $isDisabled }) => ($isDisabled ? 'auto' : 'pointer')};
|
|
45
|
+
top: 9px;
|
|
46
|
+
left: -8px;
|
|
47
|
+
`;
|
|
41
48
|
const ProgressIndicator = styled(Box) `
|
|
42
49
|
border-radius: 50%;
|
|
43
50
|
height: 24px;
|
|
44
51
|
width: 24px;
|
|
45
52
|
position: relative;
|
|
46
|
-
left: -2px;
|
|
47
53
|
z-index: 1;
|
|
48
54
|
background: ${({ $completed, $currentStep }) => $completed || $currentStep ? theme.colors.pistachio : theme.colors.matcha};
|
|
49
55
|
`;
|
|
50
|
-
const
|
|
51
|
-
|
|
52
|
-
top: 0;
|
|
53
|
-
transform: translateY(calc(-50% + 34px));
|
|
54
|
-
left: -6px;
|
|
56
|
+
const StyledText = styled(Text) `
|
|
57
|
+
margin-top: 2px;
|
|
55
58
|
font-weight: ${theme.font.weight.medium};
|
|
56
59
|
`;
|
|
57
60
|
const CompletedBar = styled(Box) `
|
|
58
61
|
position: absolute;
|
|
59
62
|
height: 12px;
|
|
60
63
|
width: 100%;
|
|
61
|
-
top:
|
|
64
|
+
top: 50%;
|
|
62
65
|
left: 0;
|
|
63
|
-
transform: translateY(calc(-50%
|
|
66
|
+
transform: translateY(calc(-50%));
|
|
64
67
|
background: ${theme.colors.pistachio};
|
|
65
68
|
z-index: 0;
|
|
66
69
|
`;
|
|
@@ -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;
|
|
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`\nconst ClickableArea = styled(Box)<StyledComponentProps>`\n position: relative;\n cursor: ${({ $isDisabled }) => ($isDisabled ? 'auto' : 'pointer')};\n top: 9px;\n left: -8px;\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`\n\nconst CompletedBar = styled(Box)`\n position: absolute;\n height: 12px;\n width: 100%;\n top: 50%;\n left: 0;\n transform: translateY(calc(-50%));\n background: ${theme.colors.pistachio};\n z-index: 0;\n`\n"]}
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,wBAAwB,CAAA;AACtC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,0CAA0C,CAAA;AACxD,cAAc,gDAAgD,CAAA;AAC9D,cAAc,4BAA4B,CAAA;AAC1C,cAAc,eAAe,CAAA","sourcesContent":["export * from './Accordion'\nexport * from './ActionDropdown'\nexport * from './Badge'\nexport * from './BadgeList'\nexport * from './Banner'\nexport * from './Box'\nexport * from './Button'\nexport * from './Card'\nexport * from './CheckBox'\nexport * from './CheckBoxGroup'\nexport * from './Chip'\nexport * from './CurrencyInput'\nexport * from './Datepicker'\nexport * from './Divider'\nexport * from './Dropdown'\nexport * from './fields/Field'\nexport * from './fields/Fieldset'\nexport * from './fontStyle'\nexport * from './hooks'\nexport * from './Icon'\nexport * from './IconStrict'\nexport * from './IconWrapper'\nexport * from './LabelledText'\nexport * from './Link'\nexport * from './Loader'\nexport * from './Logo'\nexport * from './Modal'\nexport * from './NumberInput'\nexport * from './Pagination'\nexport * from './RadioGroup'\nexport * from './RichText'\nexport * from './RichTextEditor'\nexport * from './Row'\nexport * from './SearchInput'\nexport * from './SegmentedControl'\nexport * from './SliderInput'\nexport * from './Snackbar'\nexport * from './SupportMessage'\nexport * from './Table'\nexport * from './Tag'\nexport * from './Text'\nexport * from './Textarea'\nexport * from './TextDateOfBirthInput'\nexport * from './TextInput'\nexport * from './theme'\nexport * from './Toggle'\nexport * from './Tooltip'\nexport * from './utils/dateOfBirth/dateOfBirthValidator'\nexport * from './utils/dateOfBirth/dateOfBirthValidator.utils'\nexport * from './utils/dateOfBirth/schema'\nexport * from './utils/space'\n"]}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,wBAAwB,CAAA;AACtC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,0CAA0C,CAAA;AACxD,cAAc,gDAAgD,CAAA;AAC9D,cAAc,4BAA4B,CAAA;AAC1C,cAAc,eAAe,CAAA","sourcesContent":["export * from './Accordion'\nexport * from './ActionDropdown'\nexport * from './Badge'\nexport * from './BadgeList'\nexport * from './Banner'\nexport * from './Box'\nexport * from './Button'\nexport * from './Card'\nexport * from './CheckBox'\nexport * from './CheckBoxGroup'\nexport * from './Chip'\nexport * from './CurrencyInput'\nexport * from './Datepicker'\nexport * from './Divider'\nexport * from './Dropdown'\nexport * from './fields/Field'\nexport * from './fields/Fieldset'\nexport * from './fontStyle'\nexport * from './hooks'\nexport * from './Icon'\nexport * from './IconStrict'\nexport * from './IconWrapper'\nexport * from './LabelledText'\nexport * from './Link'\nexport * from './Loader'\nexport * from './Logo'\nexport * from './Modal'\nexport * from './NumberInput'\nexport * from './Pagination'\nexport * from './ProgressIndicator'\nexport * from './RadioGroup'\nexport * from './RichText'\nexport * from './RichTextEditor'\nexport * from './Row'\nexport * from './SearchInput'\nexport * from './SegmentedControl'\nexport * from './SliderInput'\nexport * from './Snackbar'\nexport * from './SupportMessage'\nexport * from './Table'\nexport * from './Tag'\nexport * from './Text'\nexport * from './Textarea'\nexport * from './TextDateOfBirthInput'\nexport * from './TextInput'\nexport * from './theme'\nexport * from './Toggle'\nexport * from './Tooltip'\nexport * from './utils/dateOfBirth/dateOfBirthValidator'\nexport * from './utils/dateOfBirth/dateOfBirthValidator.utils'\nexport * from './utils/dateOfBirth/schema'\nexport * from './utils/space'\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.2",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"type": "module",
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"@types/dompurify": "^3.2.0",
|
|
58
58
|
"@types/node": "^22.14.0",
|
|
59
59
|
"@types/react": "^19.1.0",
|
|
60
|
-
"@types/react-dom": "^19.1.
|
|
60
|
+
"@types/react-dom": "^19.1.2",
|
|
61
61
|
"@typescript-eslint/eslint-plugin": "^8.29.1",
|
|
62
62
|
"@typescript-eslint/parser": "^8.29.1",
|
|
63
63
|
"axe-playwright": "^2.1.0",
|