{"version":3,"sources":["../../../src/Stepper/Stepper.tsx"],"names":[".scyk5e",".s1wss8f6",".s1n6i22o",".s1kfsl1d",".sd3s34a",".s17c9kzn"],"mappings":"AAOMA;AAqBAC;AAQAC;AASAC;AAeAC;AAQAC","file":"../../../src/Stepper/Stepper.tsx","sourcesContent":["import React, { useMemo } from \"react\";\nimport { css, cx } from \"linaria\";\n\nexport type StepperProps = {\n  className?: string;\n};\n\nconst StepperContainer = css`\n  font-variant: tabular-nums;\n  margin: 0;\n  padding: 0;\n`;\n\nconst Stepper: React.FC<StepperProps> & {\n  // eslint-disable-next-line @typescript-eslint/no-use-before-define\n  Item: typeof StepperItem;\n} = ({ children, className }) => {\n  return <ul className={cx(StepperContainer, className)}>{children}</ul>;\n};\n\nexport type StepperItemProps = {\n  className?: string;\n  title?: string;\n  description?: string;\n  active?: boolean;\n  completed?: boolean;\n};\n\nconst StepperItemContainer = css`\n  list-style: none;\n  padding: 0 0 20px;\n  position: relative;\n  display: flex;\n  min-height: 64px;\n`;\n\nconst StepperItemTitle = css`\n  font-size: 20px;\n  line-height: 36px;\n  font-weight: 500;\n  .${StepperItemContainer}.active & {\n    font-weight: 600;\n  }\n`;\n\nconst StepperItemTail = css`\n  position: absolute;\n  top: 30px;\n  left: 10.5px;\n  height: calc(100% - 22px);\n  border-left: 2px solid #9e9e9e;\n  .${StepperItemContainer}.active &,\n  .${StepperItemContainer}.completed & {\n    border-color: #444444;\n  }\n  .${StepperItemContainer}:last-child & {\n    display: none;\n  }\n`;\n\nconst StepperItemContent = css`\n  margin: 0 0 0 18px;\n  color: #9e9e9e;\n  .${StepperItemContainer}.active & {\n    color: #444444;\n  }\n`;\n\nconst StepperItemHead = css`\n  margin-top: 6px;\n  width: 24px;\n  height: 24px;\n  border-radius: 50%;\n  border: 3px solid #9e9e9e;\n  .${StepperItemContainer}.active &,\n  .${StepperItemContainer}.completed & {\n    border-color: #444444;\n  }\n  line-height: 36px;\n`;\n\nconst StepperItem: React.FC<StepperItemProps> = ({\n  children,\n  title,\n  description,\n  active,\n  className,\n  completed,\n}) => {\n  const kids = useMemo(() => {\n    if (children) {\n      return children;\n    }\n\n    return (\n      <>\n        {title && <h6 className={cx(StepperItemTitle)}>{title}</h6>}\n        {description && <p>{description}</p>}\n      </>\n    );\n  }, [children, title, description]);\n  return (\n    <li\n      className={cx(\n        StepperItemContainer,\n        active && \"active\",\n        completed && \"completed\",\n        className\n      )}>\n      <div className={StepperItemTail} />\n      <div className={StepperItemHead} />\n      <div className={cx(StepperItemContent)}>{kids}</div>\n    </li>\n  );\n};\n\nStepper.Item = StepperItem;\n\nexport default Stepper;\nexport { StepperItem };\n"]}