@mrshmllw/smores-react 12.2.2 → 12.3.0

package/dist/Icon/Icon.js

@@ -7,7 +7,7 @@ export const Icon = ({ className = '', render, size = 24, color = 'liquorice', r
     if (!render || !iconList[render] || render.length === 0)
         return null;
     const IconComponent = iconList[render];
-    return (React.createElement(Container, { forwardedAs: "span", className: className, size: size, rotate: rotate, color: color, ...marginProps },
+    return (React.createElement(Container, { forwardedAs: "span", "data-testId": `${render}-container`, className: className, size: size, rotate: rotate, color: color, ...marginProps },
         React.createElement(IconComponent, null)));
 };
 const Container = styled(Box)(({ size, rotate, color }) => css `

package/dist/Icon/Icon.js.map

@@ -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,EAClB,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      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"]}
+{"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"]}

package/dist/ProgressIndicator/ProgressIndicator.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { StepData, StepState } from './types';
+interface Props {
+    steps: ReadonlyArray<StepData>;
+    handleStepChange: (step: StepData) => void;
+    simpleStep?: boolean;
+    onStepClick?: (data: {
+        currentStepIndex: number;
+        currentStepState: StepState;
+    }) => void;
+    currentStep: string;
+}
+export declare const ProgressIndicator: ({ handleStepChange, onStepClick, simpleStep, steps, currentStep, }: Props) => React.JSX.Element;
+export {};

package/dist/ProgressIndicator/ProgressIndicator.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { calculateStepState, calculateProgressWidths } from './helpers';
+import styled from 'styled-components';
+import { theme } from '../theme';
+import { Box } from '../Box';
+import { StepItem } from './components/StepItem';
+export const ProgressIndicator = ({ handleStepChange, onStepClick, simpleStep = false, steps, currentStep, }) => {
+    const { totalWidth, stepWidth } = calculateProgressWidths(steps.length, simpleStep);
+    const visibleSteps = steps.filter((step) => !step.isHidden);
+    const currentStepIndex = visibleSteps.findIndex((step) => step.id === currentStep);
+    const lastCompletedStepIndex = visibleSteps.findLastIndex((step) => calculateStepState(visibleSteps.indexOf(step), currentStepIndex) ===
+        'completed');
+    const handleStepClick = (currentStepIndex, currentStepState, stepData) => {
+        if (onStepClick) {
+            onStepClick({ currentStepIndex, currentStepState });
+        }
+        if (currentStepState !== 'disabled') {
+            handleStepChange(stepData);
+        }
+    };
+    return (React.createElement(Wrapper, { width: `${totalWidth}px`, flex: true, alignItems: "center" },
+        React.createElement(DefaultProgress, { "$simpleStep": simpleStep }),
+        React.createElement(Box, { flex: true }, visibleSteps.map((step, index) => {
+            const stepState = calculateStepState(index, currentStepIndex);
+            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 }));
+        }))));
+};
+const Wrapper = styled(Box) `
+  position: relative;
+`;
+const DefaultProgress = styled(Box) `
+  z-index: 0;
+  content: '';
+  position: absolute;
+  background: ${theme.colors.matcha};
+  width: 100%;
+  height: 12px;
+
+  ${({ $simpleStep }) => $simpleStep && `border-radius:100px;`}
+`;
+//# sourceMappingURL=ProgressIndicator.js.map

package/dist/ProgressIndicator/ProgressIndicator.js.map

@@ -0,0 +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,EAAE,UAAU,EAAE,SAAS,EAAE,GAAG,uBAAuB,CACvD,KAAK,CAAC,MAAM,EACZ,UAAU,CACX,CAAA;IAED,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;IACD,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,IAAC,KAAK,EAAE,GAAG,UAAU,IAAI,EAAE,IAAI,QAAC,UAAU,EAAC,QAAQ;QACzD,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,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 { totalWidth, stepWidth } = calculateProgressWidths(\n    steps.length,\n    simpleStep,\n  )\n\n  const visibleSteps = steps.filter((step) => !step.isHidden)\n  const currentStepIndex = visibleSteps.findIndex(\n    (step) => step.id === currentStep,\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 width={`${totalWidth}px`} flex alignItems=\"center\">\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              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"]}

package/dist/ProgressIndicator/components/StepItem.d.ts

@@ -0,0 +1,12 @@
+import { StepData } from 'ProgressIndicator/types';
+import React from 'react';
+export interface StepItemProps extends Pick<StepData, 'label'> {
+    isCompleted?: boolean;
+    isLastCompleted?: boolean;
+    isCurrentStep: boolean;
+    isSimple?: boolean;
+    onClick: () => void;
+    stepWidth: string;
+    isLastItem: boolean;
+}
+export declare const StepItem: ({ label, isSimple, isCurrentStep, stepWidth, onClick, isCompleted, isLastCompleted, isLastItem, }: StepItemProps) => React.JSX.Element;

package/dist/ProgressIndicator/components/StepItem.js

@@ -0,0 +1,67 @@
+import { Box } from '../../Box';
+import React from 'react';
+import styled, { css } from 'styled-components';
+import { theme } from '../../theme';
+import { Text } from '../../Text';
+import { Icon } from '../../Icon';
+export const StepItem = ({ label, isSimple = false, isCurrentStep, stepWidth, onClick, isCompleted = false, isLastCompleted = false, isLastItem = false, }) => {
+    if (isSimple) {
+        return (React.createElement(SimpleItem, { "$completed": isCompleted, "$lastCompleted": isLastCompleted, width: stepWidth, height: "12px" }));
+    }
+    return (React.createElement(ProgressItem, { flex: true, "$completed": isCompleted, "$lastCompleted": isLastCompleted, width: stepWidth, onClick: onClick },
+        React.createElement(ProgressIndicator, { "$completed": isCompleted, "$currentStep": isCurrentStep, flex: true, alignItems: "center", justifyContent: "center" }, isCompleted && React.createElement(Icon, { render: "tick", size: 16, color: "cream" })),
+        isCompleted && !isLastItem && React.createElement(CompletedBar, null),
+        React.createElement(FloatingText, { typo: "caption" }, label)));
+};
+const lastCompleted = css `
+  border-radius: 0 100px 100px 0;
+
+  &:first-child {
+    border-radius: 100px;
+  }
+`;
+const borderRadiusCss = css `
+  &:first-child {
+    border-radius: 100px 0 0 100px;
+  }
+
+  ${({ $lastCompleted }) => $lastCompleted && lastCompleted}
+`;
+const SimpleItem = styled(Box) `
+  position: relative;
+  z-index: 1;
+  ${borderRadiusCss}
+
+  background: ${({ $completed }) => $completed ? theme.colors.pistachio : 'none'};
+`;
+const ProgressItem = styled(Box) `
+  position: relative;
+  z-index: 1;
+`;
+const ProgressIndicator = styled(Box) `
+  border-radius: 50%;
+  height: 24px;
+  width: 24px;
+  position: relative;
+  left: -2px;
+  z-index: 1;
+  background: ${({ $completed, $currentStep }) => $completed || $currentStep ? theme.colors.pistachio : theme.colors.matcha};
+`;
+const FloatingText = styled(Text) `
+  position: absolute;
+  top: 0;
+  transform: translateY(calc(-50% + 34px));
+  left: -6px;
+  font-weight: ${theme.font.weight.medium};
+`;
+const CompletedBar = styled(Box) `
+  position: absolute;
+  height: 12px;
+  width: 100%;
+  top: 0;
+  left: 0;
+  transform: translateY(calc(-50% + 12px));
+  background: ${theme.colors.pistachio};
+  z-index: 0;
+`;
+//# sourceMappingURL=StepItem.js.map

package/dist/ProgressIndicator/components/StepItem.js.map

@@ -0,0 +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;AAYjC,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,GACJ,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,sBACQ,WAAW,oBACP,eAAe,EAC/B,KAAK,EAAE,SAAS,EAChB,OAAO,EAAE,OAAO;QAEhB,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;QACnB,WAAW,IAAI,CAAC,UAAU,IAAI,oBAAC,YAAY,OAAG;QAC/C,oBAAC,YAAY,IAAC,IAAI,EAAC,SAAS,IAAE,KAAK,CAAgB,CACtC,CAChB,CAAA;AACH,CAAC,CAAA;AASD,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;;;CAGrD,CAAA;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAsB;;;;;;;gBAO3C,CAAC,EAAE,UAAU,EAAE,YAAY,EAAE,EAAE,EAAE,CAC7C,UAAU,IAAI,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;CAC5E,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;;;iBAKhB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,MAAM;CACxC,CAAA;AAED,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;;;;;;gBAOhB,KAAK,CAAC,MAAM,CAAC,SAAS;;CAErC,CAAA","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  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}: 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      $completed={isCompleted}\n      $lastCompleted={isLastCompleted}\n      width={stepWidth}\n      onClick={onClick}\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      {isCompleted && !isLastItem && <CompletedBar />}\n      <FloatingText typo=\"caption\">{label}</FloatingText>\n    </ProgressItem>\n  )\n}\n\ninterface StyledComponentProps {\n  $completed?: boolean\n  $lastCompleted?: boolean\n  $currentStep?: 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`\n\nconst ProgressIndicator = styled(Box)<StyledComponentProps>`\n  border-radius: 50%;\n  height: 24px;\n  width: 24px;\n  position: relative;\n  left: -2px;\n  z-index: 1;\n  background: ${({ $completed, $currentStep }) =>\n    $completed || $currentStep ? theme.colors.pistachio : theme.colors.matcha};\n`\n\nconst FloatingText = styled(Text)`\n  position: absolute;\n  top: 0;\n  transform: translateY(calc(-50% + 34px));\n  left: -6px;\n  font-weight: ${theme.font.weight.medium};\n`\n\nconst CompletedBar = styled(Box)`\n  position: absolute;\n  height: 12px;\n  width: 100%;\n  top: 0;\n  left: 0;\n  transform: translateY(calc(-50% + 12px));\n  background: ${theme.colors.pistachio};\n  z-index: 0;\n`\n"]}

package/dist/ProgressIndicator/helpers.d.ts

@@ -0,0 +1,8 @@
+import { StepState } from './types';
+interface ReturnValue {
+    totalWidth: number;
+    stepWidth: number;
+}
+export declare const calculateProgressWidths: (stepCount: number, isSimpleSteps?: boolean) => ReturnValue;
+export declare const calculateStepState: (index: number, currentStepIndex: number) => StepState;
+export {};

package/dist/ProgressIndicator/helpers.js

@@ -0,0 +1,19 @@
+const TOTAL_WIDTH = 320;
+export const calculateProgressWidths = (stepCount, isSimpleSteps) => {
+    // if not simple steps, we need to subtract 1 from the step count as the last item doesn't have a line
+    const stepsToUse = isSimpleSteps ? stepCount : stepCount - 1;
+    return {
+        totalWidth: TOTAL_WIDTH,
+        stepWidth: TOTAL_WIDTH / stepsToUse,
+    };
+};
+export const calculateStepState = (index, currentStepIndex) => {
+    if (index === currentStepIndex) {
+        return 'current';
+    }
+    else if (index < currentStepIndex || currentStepIndex === -1) {
+        return 'completed';
+    }
+    return 'disabled';
+};
+//# sourceMappingURL=helpers.js.map

package/dist/ProgressIndicator/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../src/ProgressIndicator/helpers.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,GAAG,GAAG,CAAA;AAOvB,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,SAAiB,EACjB,aAAuB,EACV,EAAE;IACf,sGAAsG;IACtG,MAAM,UAAU,GAAG,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,GAAG,CAAC,CAAA;IAC5D,OAAO;QACL,UAAU,EAAE,WAAW;QACvB,SAAS,EAAE,WAAW,GAAG,UAAU;KACpC,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,KAAa,EACb,gBAAwB,EACb,EAAE;IACb,IAAI,KAAK,KAAK,gBAAgB,EAAE,CAAC;QAC/B,OAAO,SAAS,CAAA;IAClB,CAAC;SAAM,IAAI,KAAK,GAAG,gBAAgB,IAAI,gBAAgB,KAAK,CAAC,CAAC,EAAE,CAAC;QAC/D,OAAO,WAAW,CAAA;IACpB,CAAC;IAED,OAAO,UAAU,CAAA;AACnB,CAAC,CAAA","sourcesContent":["import { StepState } from './types'\n\nconst TOTAL_WIDTH = 320\n\ninterface ReturnValue {\n  totalWidth: number\n  stepWidth: number\n}\n\nexport const calculateProgressWidths = (\n  stepCount: number,\n  isSimpleSteps?: boolean,\n): ReturnValue => {\n  // if not simple steps, we need to subtract 1 from the step count as the last item doesn't have a line\n  const stepsToUse = isSimpleSteps ? stepCount : stepCount - 1\n  return {\n    totalWidth: TOTAL_WIDTH,\n    stepWidth: TOTAL_WIDTH / stepsToUse,\n  }\n}\n\nexport const calculateStepState = (\n  index: number,\n  currentStepIndex: number,\n): StepState => {\n  if (index === currentStepIndex) {\n    return 'current'\n  } else if (index < currentStepIndex || currentStepIndex === -1) {\n    return 'completed'\n  }\n\n  return 'disabled'\n}\n"]}

package/dist/ProgressIndicator/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressIndicator } from './ProgressIndicator';
+export { StepData } from './types';

package/dist/ProgressIndicator/index.js

@@ -0,0 +1,2 @@
+export { ProgressIndicator } from './ProgressIndicator';
+//# sourceMappingURL=index.js.map

package/dist/ProgressIndicator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/ProgressIndicator/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA","sourcesContent":["export { ProgressIndicator } from './ProgressIndicator'\nexport { StepData } from './types'\n"]}

package/dist/ProgressIndicator/types.d.ts

@@ -0,0 +1,6 @@
+export type StepState = 'completed' | 'current' | 'disabled';
+export interface StepData {
+    label: string;
+    id: string;
+    isHidden?: boolean;
+}

package/dist/ProgressIndicator/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/ProgressIndicator/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/ProgressIndicator/types.ts"],"names":[],"mappings":"","sourcesContent":["export type StepState = 'completed' | 'current' | 'disabled'\n\nexport interface StepData {\n  label: string\n  id: string\n  isHidden?: boolean\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "12.2.2",
+  "version": "12.3.0",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "type": "module",
@@ -42,30 +42,30 @@
     "@semantic-release/github": "^11.0.1",
     "@semantic-release/npm": "^12.0.0",
     "@snyk/protect": "^1.1296.1",
-    "@storybook/addon-a11y": "^8.6.11",
+    "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-coverage": "^1.0.5",
-    "@storybook/addon-essentials": "^8.6.11",
-    "@storybook/addon-interactions": "^8.6.11",
-    "@storybook/addon-links": "^8.6.11",
-    "@storybook/preview-api": "^8.6.11",
-    "@storybook/react": "^8.6.11",
-    "@storybook/react-vite": "^8.6.11",
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/preview-api": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
     "@storybook/test": "^8.2.1",
     "@storybook/test-runner": "^0.22.0",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.0",
     "@types/body-scroll-lock": "^3.1.0",
     "@types/dompurify": "^3.2.0",
-    "@types/node": "^22.13.14",
-    "@types/react": "^19.0.12",
-    "@types/react-dom": "^19.0.4",
-    "@typescript-eslint/eslint-plugin": "^8.28.0",
-    "@typescript-eslint/parser": "^8.28.0",
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.1.0",
+    "@types/react-dom": "^19.1.1",
+    "@typescript-eslint/eslint-plugin": "^8.29.1",
+    "@typescript-eslint/parser": "^8.29.1",
     "axe-playwright": "^2.1.0",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "eslint": "^9.23.0",
+    "eslint": "^9.24.0",
     "eslint-config-prettier": "^10.1.1",
-    "eslint-plugin-prettier": "^5.2.5",
-    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-prettier": "^5.2.6",
+    "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^5.2.0",
     "husky": "^9.1.7",
     "jsdom": "^26.0.0",
@@ -77,20 +77,20 @@
     "rimraf": "^6.0.1",
     "semantic-release": "^24.2.3",
     "storybook": "^8.0.4",
-    "styled-components": "^6.1.16",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.28.0",
-    "vite": "^6.2.3",
-    "vitest": "^3.0.9"
+    "styled-components": "^6.1.17",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.29.1",
+    "vite": "^6.2.5",
+    "vitest": "^3.1.1"
   },
   "dependencies": {
-    "@floating-ui/react": "0.27.5",
-    "@lexical/react": "^0.29.0",
+    "@floating-ui/react": "0.27.6",
+    "@lexical/react": "^0.30.0",
     "body-scroll-lock": "^4.0.0-beta.0",
     "date-fns": "^4.1.0",
-    "dompurify": "^3.2.4",
+    "dompurify": "^3.2.5",
     "fuse.js": "^7.1.0",
-    "lexical": "^0.29.0",
+    "lexical": "^0.30.0",
     "polished": "^4.1.3"
   },
   "peerDependencies": {