├── .babelrc ├── .github ├── CODEOWNERS ├── ISSUE_TEMPLATE │ ├── demo-improvements.yml │ ├── propose-a-new-component.yml │ ├── propose-an-improvement.yml │ ├── report-a-bug.yml │ └── test.yml ├── SCRIPTS │ ├── commentCoverage.js │ ├── exportCoverageFromJsonSummary.js │ ├── exportCoverageFromMarkdownShields.js │ └── updateCoverageBadges.js ├── dependabot.yml ├── pull_request_template.md └── workflows │ ├── main.md │ └── main.yml ├── .gitignore ├── .npmrc ├── .nvmrc ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── STRUCTURE.md ├── components ├── README.md ├── atom │ ├── .gitkeep │ ├── actionButton │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ActionButtonCatalog.js │ │ │ ├── CHANGELOG.md │ │ │ ├── index.js │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── ActionButtonLink.js │ │ │ ├── ActionButtonWrapper.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── backToTop │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── BackToTopButton.js │ │ │ ├── calcBackToTopEngine.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── badge │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── assets │ │ │ └── screenshot.png │ │ ├── demo │ │ │ ├── ArticleA11y.js │ │ │ ├── ArticleContent.js │ │ │ ├── ArticleCustomType.js │ │ │ ├── ArticleDarkMode.js │ │ │ ├── ArticleDesign.js │ │ │ ├── ArticleIsFitted.js │ │ │ ├── ArticleSizes.js │ │ │ ├── ArticleType.js │ │ │ ├── CHANGELOG.md │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── _config.scss │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── button │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── SPEC.md │ │ ├── demo │ │ │ ├── CHANGELOG.md │ │ │ ├── articles │ │ │ │ ├── ArticleA11y.js │ │ │ │ ├── ArticleAlignment.js │ │ │ │ ├── ArticleColor.js │ │ │ │ ├── ArticleDesign.js │ │ │ │ ├── ArticleDesignColor.js │ │ │ │ ├── ArticleElevation.js │ │ │ │ ├── ArticleKeyboardNavigation.js │ │ │ │ ├── ArticleLink.js │ │ │ │ ├── ArticleNegative.js │ │ │ │ ├── ArticlePlayground.js │ │ │ │ ├── ArticleShape.js │ │ │ │ ├── ArticleSize.js │ │ │ │ └── ArticleSocialColor.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── Button.js │ │ │ ├── ButtonIcon.js │ │ │ ├── ButtonLink.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── card │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── DefaultDemo.js │ │ │ ├── PlaceHolder.js │ │ │ ├── index.js │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── checkbox │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CHANGELOG.md │ │ │ ├── articles │ │ │ │ ├── ArticleA11y.js │ │ │ │ ├── ArticleCustomIcons.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleDisabled.js │ │ │ │ ├── ArticlePlayground.js │ │ │ │ ├── ArticleSizes.js │ │ │ │ ├── ArticleStatus.js │ │ │ │ └── ArticleValues.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── CheckboxIcon.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── helpText │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── articles │ │ │ │ ├── ArticleA11y.js │ │ │ │ ├── ArticleCheckbox.js │ │ │ │ ├── ArticleInput.js │ │ │ │ └── ArticleTextArea.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── icon │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── articles │ │ │ │ ├── ArticleA11y.js │ │ │ │ ├── ArticleColorInheritance.js │ │ │ │ ├── ArticleColorsAndSizes.js │ │ │ │ ├── ArticleLazy.js │ │ │ │ ├── ArticlePolymorphic.js │ │ │ │ ├── ArticleShapesAndSizes.js │ │ │ │ └── ArticleSpan.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── Icon.js │ │ │ ├── LazyIcon.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── image │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CHANGELOG.md │ │ │ ├── ConnectionViewer.js │ │ │ ├── ImageNotFoundIcon.js │ │ │ ├── article │ │ │ │ ├── ArticleA11y.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleFallbackImage.js │ │ │ │ ├── ArticleLazyImage.js │ │ │ │ ├── ArticleLcpImage.js │ │ │ │ ├── ArticlePlaceHolder.js │ │ │ │ ├── ArticleSkeleton.js │ │ │ │ ├── ArticleSpinner.js │ │ │ │ └── ArticleViewport.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── ErrorImage.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ ├── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ │ └── types.js │ │ └── test │ │ │ └── index.test.js │ ├── input │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── articles │ │ │ │ ├── ArticleA11y.js │ │ │ │ ├── ArticleAddonAndIcon.js │ │ │ │ ├── ArticleBorderless.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleDisabledReadOnly.js │ │ │ │ ├── ArticleErrorStatus.js │ │ │ │ ├── ArticleInlineForm.js │ │ │ │ ├── ArticleKeyboardNavigation.js │ │ │ │ ├── ArticlePlaceholderValueAndDefaultValue.js │ │ │ │ ├── ArticleShape.js │ │ │ │ ├── ArticleSize.js │ │ │ │ ├── ArticleState.js │ │ │ │ └── ArticleType.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── Container │ │ │ │ ├── InputContainer.js │ │ │ │ └── index.scss │ │ │ ├── Input │ │ │ │ ├── Component │ │ │ │ │ ├── index.js │ │ │ │ │ ├── index.scss │ │ │ │ │ └── settings.scss │ │ │ │ ├── Wrappers │ │ │ │ │ ├── Addons │ │ │ │ │ │ ├── InputAddons.js │ │ │ │ │ │ ├── config.js │ │ │ │ │ │ ├── index.scss │ │ │ │ │ │ └── settings.scss │ │ │ │ │ ├── Button │ │ │ │ │ │ ├── InputButton.js │ │ │ │ │ │ ├── config.js │ │ │ │ │ │ └── index.scss │ │ │ │ │ ├── Icons │ │ │ │ │ │ ├── InputIcons.js │ │ │ │ │ │ ├── config.js │ │ │ │ │ │ ├── index.scss │ │ │ │ │ │ └── settings.scss │ │ │ │ │ ├── index.scss │ │ │ │ │ └── settings.scss │ │ │ │ └── index.js │ │ │ ├── Mask │ │ │ │ ├── iMask.js │ │ │ │ └── index.js │ │ │ ├── Password │ │ │ │ ├── config.js │ │ │ │ ├── index.js │ │ │ │ ├── index.scss │ │ │ │ └── styles │ │ │ │ │ ├── index.scss │ │ │ │ │ └── settings.scss │ │ │ ├── config.js │ │ │ ├── helpers │ │ │ │ ├── getComponentAndProps.js │ │ │ │ └── isValidInputValue.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── mixins.scss │ │ │ ├── settings.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── kbd │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── articles │ │ │ │ ├── ArticleA11y.js │ │ │ │ ├── ArticleCombinations.js │ │ │ │ ├── ArticleGuidelines.js │ │ │ │ └── ArticleKeyboard.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── label │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CHANGELOG.md │ │ │ ├── articles │ │ │ │ ├── ArticleA11y.tsx │ │ │ │ ├── ArticleFontSize.tsx │ │ │ │ ├── ArticleInline.tsx │ │ │ │ └── ArticleType.tsx │ │ │ ├── index.scss │ │ │ ├── index.tsx │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── index.d.ts │ │ ├── mod.d.ts │ │ ├── package.json │ │ ├── src │ │ │ ├── index.scss │ │ │ ├── index.tsx │ │ │ ├── settings.tsx │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ ├── test │ │ │ └── index.test.tsx │ │ └── tsconfig.json │ ├── panel │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CHANGELOG.md │ │ │ ├── PanelAsColor │ │ │ │ ├── ArticleAlpha.js │ │ │ │ ├── ArticleColor.js │ │ │ │ ├── ArticleContainer.js │ │ │ │ ├── ArticleElevated.js │ │ │ │ ├── ArticleIsFullHeight.js │ │ │ │ └── ArticleRounded.js │ │ │ ├── PanelAsImage │ │ │ │ ├── ArticleElevated.js │ │ │ │ ├── ArticleHorizontallyCropped.js │ │ │ │ ├── ArticleIsFullHeight.js │ │ │ │ ├── ArticleOverlay.js │ │ │ │ ├── ArticlePlaceholder.js │ │ │ │ ├── ArticleResized.js │ │ │ │ ├── ArticleRounded.js │ │ │ │ └── ArticleVerticallyCropped.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── ColorPanel.js │ │ │ ├── ImagePanel.js │ │ │ ├── constants.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── pinInput │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleAutoFocus.js │ │ │ ├── ArticleChildren.js │ │ │ ├── ArticleDefault.js │ │ │ ├── ArticleDisabled.js │ │ │ ├── ArticleLength.js │ │ │ ├── ArticleMask.js │ │ │ ├── ArticlePassword.js │ │ │ ├── ArticlePlaceholder.js │ │ │ ├── ArticleReferenced.js │ │ │ ├── ArticleSizes.js │ │ │ ├── ArticleStatus.js │ │ │ ├── ArticleValue.js │ │ │ ├── CHANGELOG.md │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── PinInput.scss │ │ │ ├── PinInputChildren.js │ │ │ ├── PinInputChildren.scss │ │ │ ├── PinInputContext.js │ │ │ ├── PinInputField.js │ │ │ ├── PinInputField.scss │ │ │ ├── config.js │ │ │ ├── config.scss │ │ │ ├── hooks │ │ │ │ ├── useKeyPress.js │ │ │ │ └── useUpdateEffect.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── reducer │ │ │ │ ├── actionTypes.js │ │ │ │ ├── actions.js │ │ │ │ ├── index.js │ │ │ │ ├── reducer.js │ │ │ │ └── usePinInputReducer.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── popover │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CHANGELOG.md │ │ │ ├── Content.js │ │ │ ├── Icons │ │ │ │ └── IconClose.js │ │ │ ├── ReMountDebounced.js │ │ │ ├── articles │ │ │ │ ├── ArticleArrow.js │ │ │ │ ├── ArticleBehavior.js │ │ │ │ ├── ArticleCloseIcon.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticlePosition.js │ │ │ │ ├── ArticleRef.js │ │ │ │ └── ArticleType.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── PopoverExtendChildren.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── progressBar │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── DynamicProgressBar.js │ │ │ ├── InputRangeProgressBar.js │ │ │ ├── StaticWithAnimation.js │ │ │ ├── articles │ │ │ │ ├── ArticleCircleDefault.js │ │ │ │ ├── ArticleLinearDefault.js │ │ │ │ ├── ArticleLinearDoubleDefault.js │ │ │ │ └── ArticleTypes.js │ │ │ ├── index.js │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── ProgressBarCircle │ │ │ │ ├── Circle │ │ │ │ │ ├── index.js │ │ │ │ │ └── settings.js │ │ │ │ ├── Indicator.js │ │ │ │ ├── index.js │ │ │ │ ├── index.scss │ │ │ │ ├── settings.js │ │ │ │ └── settings.scss │ │ │ ├── ProgressBarLine │ │ │ │ ├── Indicator │ │ │ │ │ ├── index.js │ │ │ │ │ └── settings.js │ │ │ │ ├── Line.js │ │ │ │ ├── index.js │ │ │ │ ├── index.scss │ │ │ │ ├── settings.js │ │ │ │ ├── settings.scss │ │ │ │ ├── useIndicator.js │ │ │ │ └── usePercentage.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── radioButton │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── index.js │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── skeleton │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleAnimation.js │ │ │ ├── ArticleCount.js │ │ │ ├── ArticleDefault.js │ │ │ ├── ArticleSize.js │ │ │ ├── ArticleVariant.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── slider │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleRangeControlledState.js │ │ │ ├── ArticleRangeDefault.js │ │ │ ├── ArticleRangeInvertColors.js │ │ │ ├── ArticleRangeMarks.js │ │ │ ├── ArticleRangeSteps.js │ │ │ ├── ArticleSliderControlledState.js │ │ │ ├── ArticleSliderDefault.js │ │ │ ├── ArticleSliderDisabled.js │ │ │ ├── ArticleSliderFullWidth.js │ │ │ ├── ArticleSliderHideMarks.js │ │ │ ├── ArticleSliderInvertColors.js │ │ │ ├── ArticleSliderMarks.js │ │ │ ├── ArticleSliderSteps.js │ │ │ ├── ArticleSliderThreshold.js │ │ │ ├── ArticleSliderValueLabel.js │ │ │ ├── index.js │ │ │ ├── package.json │ │ │ └── utils.js │ │ ├── package.json │ │ ├── src │ │ │ ├── Handler.js │ │ │ ├── Label.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── markerFactory.js │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── spinner │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CustomChildren.js │ │ │ ├── CustomLoader.js │ │ │ ├── FullScreenSpinner.js │ │ │ ├── SpinnerWrapper.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── DefaultSpinner.js │ │ │ ├── SUILoader │ │ │ │ ├── index.js │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── switch │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CHANGELOG.md │ │ │ ├── articles │ │ │ │ ├── ArticleA11y.js │ │ │ │ ├── ArticleColors.js │ │ │ │ ├── ArticleControlledAndUncontrolled.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleDesigns.js │ │ │ │ ├── ArticleDisabled.js │ │ │ │ ├── ArticleFullWidth.js │ │ │ │ ├── ArticleIcons.js │ │ │ │ ├── ArticleLoading.js │ │ │ │ ├── ArticleReadOnly.js │ │ │ │ └── ArticleSizes.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── SwitchDesign │ │ │ │ ├── AtomSwitchSingle.js │ │ │ │ ├── AtomSwitchToggle.js │ │ │ │ └── helpers.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── table │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── tag │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── articles │ │ │ │ ├── ArticleA11y.js │ │ │ │ ├── ArticleColor.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleDesign.js │ │ │ │ ├── ArticleDisabled.js │ │ │ │ ├── ArticleIcons.js │ │ │ │ ├── ArticleKeyboardNavigation.js │ │ │ │ ├── ArticleKind.js │ │ │ │ ├── ArticlePressed.js │ │ │ │ ├── ArticleReadOnly.js │ │ │ │ ├── ArticleResponsive.js │ │ │ │ ├── ArticleSize.js │ │ │ │ └── ArticleTypes.js │ │ │ ├── icons.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── Actionable │ │ │ │ ├── AtomTagActionableIcon.js │ │ │ │ ├── Container.js │ │ │ │ ├── TagLink.js │ │ │ │ ├── index.js │ │ │ │ └── settings.js │ │ │ ├── Standard.js │ │ │ ├── _settings.scss │ │ │ ├── constants.js │ │ │ ├── helpers.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ ├── settings.scss │ │ │ │ └── utils.scss │ │ └── test │ │ │ └── index.test.js │ ├── textarea │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── Text-area-field.md │ │ ├── demo │ │ │ ├── index.js │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── toast │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── Icons │ │ │ │ └── index.js │ │ │ ├── ToastDemo.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── _settings.scss │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── tooltip │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ColorArticle.js │ │ │ ├── ControlledAndUncontrolledArticle.js │ │ │ ├── DefaultArticle.js │ │ │ ├── DelayArticle.js │ │ │ ├── IsArrowedArticle.js │ │ │ ├── PlacementArticle.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── TooltipExtendChildren.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── upload │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── icons │ │ │ │ ├── iconActive.js │ │ │ │ ├── iconError.js │ │ │ │ └── iconSuccess.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── validationText │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── articles │ │ │ │ ├── ArticleDefault.js │ │ │ │ └── ArticleNodes.js │ │ │ ├── index.js │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ └── videoPlayer │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── assets │ │ └── preview.jpg │ │ ├── demo │ │ ├── DemoPlayer.js │ │ ├── index.js │ │ ├── index.scss │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ ├── components │ │ │ ├── HLSPlayer.js │ │ │ ├── NativePlayer.js │ │ │ ├── VimeoPlayer.js │ │ │ └── YouTubePlayer.js │ │ ├── hooks │ │ │ ├── hls │ │ │ │ ├── useInitHlsEffect.js │ │ │ │ └── useTimeLimitCheck.js │ │ │ ├── native │ │ │ │ ├── useGetBlobAsVideoSrcEffect.js │ │ │ │ └── useGetSrcWithMediaFragments.js │ │ │ ├── useDetectVideoType.js │ │ │ ├── useImperativeApi.js │ │ │ ├── useScrollAutoplayEffect.js │ │ │ ├── useVideoPlayer.js │ │ │ ├── vimeo │ │ │ │ ├── useTimeLimitCheck.js │ │ │ │ ├── useVideoMetadata.js │ │ │ │ ├── useVimeoApi.js │ │ │ │ └── useVimeoProperties.js │ │ │ └── youtube │ │ │ │ └── useYouTubeProperties.js │ │ ├── index.js │ │ ├── index.scss │ │ └── settings │ │ │ ├── index.js │ │ │ └── players.js │ │ └── test │ │ └── index.test.js ├── behavior │ └── sticky │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ ├── LoremIpsum.js │ │ ├── articles │ │ │ ├── ArticleDefault.js │ │ │ ├── ArticleGridDemo.js │ │ │ ├── ArticleScrollUp.js │ │ │ ├── ArticleStacked.js │ │ │ └── ArticleStickyState.js │ │ ├── hooks │ │ │ ├── useMeasure.js │ │ │ └── useRefs.js │ │ ├── index.js │ │ ├── index.scss │ │ ├── package.json │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ ├── StickyScrollUp.js │ │ ├── index.js │ │ ├── index.scss │ │ ├── settings.js │ │ └── styles │ │ │ ├── index.scss │ │ │ └── settings.scss │ │ └── test │ │ └── index.test.js ├── ecosystem │ └── .gitkeep ├── globals.js ├── hook │ ├── .gitkeep │ └── usePortal │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ ├── articles │ │ │ ├── ArticleCloseOnEvent.js │ │ │ ├── ArticleCustom.js │ │ │ ├── ArticleCustom │ │ │ │ ├── usePopper.js │ │ │ │ └── useTooltip.js │ │ │ ├── ArticleDefault.js │ │ │ ├── ArticleStateful.js │ │ │ ├── ArticleStateless.js │ │ │ └── ArticleTarget.js │ │ ├── index.js │ │ ├── index.scss │ │ ├── package.json │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ ├── index.js │ │ ├── index.scss │ │ └── settings.js │ │ └── test │ │ └── index.test.js ├── layout │ └── grid │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ ├── ArticleAlignContent.js │ │ ├── ArticleAlignItems.js │ │ ├── ArticleCombine.js │ │ ├── ArticleDefault.js │ │ ├── ArticleGutter.js │ │ ├── ArticleInject.js │ │ ├── ArticleIsGapless.js │ │ ├── ArticleJustifyContent.js │ │ ├── ArticleOffset.js │ │ ├── ArticleResponsive.js │ │ ├── demoBox.js │ │ ├── demoWrapper.js │ │ ├── index.js │ │ ├── index.scss │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ ├── _settings.scss │ │ ├── gridItem │ │ │ ├── index.js │ │ │ └── settings.js │ │ ├── helpers.js │ │ ├── index.js │ │ ├── index.scss │ │ ├── settings.js │ │ └── styles │ │ │ ├── index.scss │ │ │ └── settings.scss │ │ └── test │ │ └── index.test.js ├── molecule │ ├── .gitkeep │ ├── accordion │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── LoremIpsum.js │ │ │ ├── articles │ │ │ │ ├── ArticleBehavior.js │ │ │ │ ├── ArticleCustom.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleDisabled.js │ │ │ │ ├── ArticleHeight.js │ │ │ │ ├── ArticleIcon.js │ │ │ │ ├── ArticleLabelWrap.js │ │ │ │ ├── ArticleSpacing.js │ │ │ │ ├── ArticleTransition.js │ │ │ │ └── custom │ │ │ │ │ ├── HeaderCustom.js │ │ │ │ │ └── PanelCustom.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── AccordionItem.js │ │ │ ├── AccordionItemHeader.js │ │ │ ├── AccordionItemHeaderChildrenDefault.js │ │ │ ├── AccordionItemHeaderIcon.js │ │ │ ├── AccordionItemHeaderIconDefault.js │ │ │ ├── AccordionItemPanel.js │ │ │ ├── AccordionItemPanelDefaultChildren.js │ │ │ ├── _settings.scss │ │ │ ├── context │ │ │ │ ├── AccordionContext.js │ │ │ │ ├── AccordionProvider.js │ │ │ │ ├── index.js │ │ │ │ └── useAccordionContext.js │ │ │ ├── hook │ │ │ │ └── useMeasure.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── autosuggest │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleArrayObjects │ │ │ │ └── index.js │ │ │ ├── ArticleDependantSelection │ │ │ │ ├── components │ │ │ │ │ └── ComboCountries.js │ │ │ │ └── index.js │ │ │ ├── ArticleIsOpenProp │ │ │ │ └── index.js │ │ │ ├── ArticleMultipleSelection │ │ │ │ └── index.js │ │ │ ├── ArticleSingleSelection │ │ │ │ └── index.js │ │ │ ├── CHANGELOG.md │ │ │ ├── Icons │ │ │ │ └── index.js │ │ │ ├── config.js │ │ │ ├── data │ │ │ │ ├── countries.json │ │ │ │ └── regions.json │ │ │ ├── hoc │ │ │ │ └── withDynamicOptions.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── services │ │ │ │ └── index.js │ │ ├── package.json │ │ ├── src │ │ │ ├── components │ │ │ │ ├── InputWithClearUI │ │ │ │ │ ├── config.js │ │ │ │ │ └── index.js │ │ │ │ ├── MultipleSelection │ │ │ │ │ └── index.js │ │ │ │ └── SingleSelection │ │ │ │ │ └── index.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── autosuggestField │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── Icons │ │ │ │ └── index.js │ │ │ ├── data │ │ │ │ └── countries.json │ │ │ ├── hoc │ │ │ │ └── withDynamicOptions.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── services │ │ │ │ └── index.js │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── avatar │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── articles │ │ │ │ ├── ArticleBadge.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleImage.js │ │ │ │ ├── ArticleLoading.js │ │ │ │ ├── ArticleName.js │ │ │ │ ├── ArticleRef.js │ │ │ │ └── ArticleSize.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── AvatarBadge │ │ │ │ ├── index.js │ │ │ │ ├── index.scss │ │ │ │ ├── settings.js │ │ │ │ └── settings.scss │ │ │ ├── AvatarFallback │ │ │ │ ├── index.js │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ │ ├── AvatarFallbackIcon │ │ │ │ ├── index.js │ │ │ │ ├── index.scss │ │ │ │ ├── settings.js │ │ │ │ └── settings.scss │ │ │ ├── AvatarFallbackName │ │ │ │ ├── index.js │ │ │ │ ├── index.scss │ │ │ │ ├── settings.js │ │ │ │ └── settings.scss │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ ├── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ │ └── useBackgroundColor.js │ │ └── test │ │ │ └── index.test.js │ ├── badgeCounter │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleA11y.js │ │ │ ├── ArticleDefault.js │ │ │ ├── ArticleLabel.js │ │ │ ├── ArticleSizes.js │ │ │ ├── ArticleStatus.js │ │ │ ├── ArticleVariant.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── breadcrumb │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── article │ │ │ │ ├── ArticleA11y.js │ │ │ │ ├── ArticleCustomIcon.js │ │ │ │ ├── ArticleDefaut.js │ │ │ │ ├── ArticleKeyboardNavigation.js │ │ │ │ └── ArticleScrollable.js │ │ │ ├── index.js │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ ├── settings.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── buttonGroup │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ButtonDesignByState.js │ │ │ ├── CHANGELOG.md │ │ │ ├── articles │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleDesign.js │ │ │ │ ├── ArticleDisplay.js │ │ │ │ ├── ArticleMode.js │ │ │ │ ├── ArticleShape.js │ │ │ │ ├── ArticleSize.js │ │ │ │ ├── ArticleSpaced.js │ │ │ │ └── ArticleVertical.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── buttonGroupField │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleInformation.js │ │ │ ├── ArticleSemantic.js │ │ │ ├── CHANGELOG.md │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── carousel │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── MIGRATION.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── articles │ │ │ │ ├── ArticleControlled.js │ │ │ │ ├── ArticleCustomArrows.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleDynamicContent.js │ │ │ │ ├── ArticleFullWidth.js │ │ │ │ ├── ArticleHandlers.js │ │ │ │ ├── ArticleInfiniteLoop.js │ │ │ │ ├── ArticleKeyboardNavigation.js │ │ │ │ ├── ArticleMultipleSlides.js │ │ │ │ ├── ArticlePreloadItems.js │ │ │ │ └── components │ │ │ │ │ └── CustomArrow.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── CarouselArrow.js │ │ │ ├── CarouselContainer.js │ │ │ ├── CarouselItem.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ ├── slidy.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── checkboxField │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleA11y.js │ │ │ ├── ArticleDisabled.js │ │ │ ├── ArticleSize.js │ │ │ ├── ArticleStatus.js │ │ │ ├── ArticleWithCustomCheckedIcon.js │ │ │ ├── ArticleWithHelpText.js │ │ │ ├── ArticleWithLabelFullWidth.js │ │ │ ├── CHANGELOG.md │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── coachmark │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleDefaultTooltipVariants.js │ │ │ ├── CloseIcon.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── Tooltip │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── collapsible │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleAlignment.js │ │ │ ├── ArticleButtonTextAlignment.js │ │ │ ├── ArticleControlled.js │ │ │ ├── ArticleCustomHeight.js │ │ │ ├── ArticleGradient.js │ │ │ ├── ArticleNoCollapse.js │ │ │ ├── ArticleTransition.js │ │ │ ├── ArticleUncontrolled.js │ │ │ ├── CHANGELOG.md │ │ │ ├── config │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── _settings.scss │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── dataCounter │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── Articles │ │ │ │ ├── ArticleBounds.js │ │ │ │ ├── ArticleDisabled.js │ │ │ │ ├── ArticleIcons.js │ │ │ │ ├── ArticleLoading.js │ │ │ │ ├── ArticleSizes.js │ │ │ │ └── ArticleState.js │ │ │ ├── CHANGELOG.md │ │ │ ├── index.js │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ │ └── useMouseHold.js │ │ └── test │ │ │ └── index.test.js │ ├── drawer │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── DemoAnimationDuration.js │ │ │ ├── DemoDefault.js │ │ │ ├── DemoPageScrollable.js │ │ │ ├── DemoPlacement.js │ │ │ ├── DemoSize.js │ │ │ ├── index.js │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── Overlay.js │ │ │ ├── _settings.scss │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── dropdownList │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleCheckbox.js │ │ │ ├── ArticleDefault.js │ │ │ ├── ArticleDesign.js │ │ │ ├── ArticlePosition.js │ │ │ ├── ArticleSize.js │ │ │ ├── CHANGELOG.md │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── ExtendedChildren.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── dropdownOption │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleBehavior.js │ │ │ ├── ArticleDefault.js │ │ │ ├── ArticleDescription.js │ │ │ ├── ArticleHighLight.js │ │ │ ├── ArticleLeftAddonAndDescription.js │ │ │ ├── ArticleLeftAddons.js │ │ │ ├── ArticleTextWrap.js │ │ │ ├── CHANGELOG.md │ │ │ ├── LoremIpsum.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── _settings.scss │ │ │ ├── config.js │ │ │ ├── handlersFactory │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── field │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── index.js │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── Label.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ │ ├── useStatusValidationText.js │ │ │ └── useTypeValidationLabel.js │ │ └── test │ │ │ └── index.test.js │ ├── imageEditor │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── articles │ │ │ │ ├── ArticleCustomChildren.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ └── CustomChildren.js │ │ │ ├── index.js │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── ImageEditorCropper.js │ │ │ ├── ImageEditorDefault.js │ │ │ ├── ImageEditorSliders.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── prop-types.js │ │ │ ├── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ │ └── utils │ │ │ │ └── cropImage.js │ │ └── test │ │ │ └── index.test.js │ ├── inputField │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── index.js │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── inputTags │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── Data.js │ │ │ ├── articles │ │ │ │ ├── ArticleBorderless.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleDisableReadOnly.js │ │ │ │ ├── ArticleHandlers.js │ │ │ │ ├── ArticleMaxTagsAndAllowDuplicates.js │ │ │ │ ├── ArticleSemantic.js │ │ │ │ ├── ArticleSizeAndTagSize.js │ │ │ │ └── ArticleTagsSize.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── modal │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── articles │ │ │ │ ├── ArticleA11y.js │ │ │ │ ├── ArticleAPI.js │ │ │ │ ├── ArticleControlled.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleEffect.js │ │ │ │ ├── ArticleForm.js │ │ │ │ ├── ArticleInset.js │ │ │ │ ├── ArticleKeyboardNavigation.js │ │ │ │ ├── ArticleSize.js │ │ │ │ └── ArticleURLState.js │ │ │ ├── config.js │ │ │ ├── data │ │ │ │ ├── photos.js │ │ │ │ └── users.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── utils │ │ │ │ ├── CodeEditor │ │ │ │ ├── CodeEditor.js │ │ │ │ ├── CodeEditorActions.js │ │ │ │ ├── Context │ │ │ │ │ └── index.js │ │ │ │ ├── config.js │ │ │ │ ├── index.js │ │ │ │ └── index.scss │ │ │ │ ├── LoremIpsum │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ ├── package.json │ │ ├── src │ │ │ ├── Modal.Body.index.scss │ │ │ ├── Modal.Body.js │ │ │ ├── Modal.Body.settings.scss │ │ │ ├── Modal.CloseIconButton.index.scss │ │ │ ├── Modal.CloseIconButton.js │ │ │ ├── Modal.CloseIconButton.settings.scss │ │ │ ├── Modal.CloseTrigger.index.scss │ │ │ ├── Modal.CloseTrigger.js │ │ │ ├── Modal.CloseTrigger.settings.scss │ │ │ ├── Modal.Content.index.scss │ │ │ ├── Modal.Content.js │ │ │ ├── Modal.Content.settings.scss │ │ │ ├── Modal.Description.index.scss │ │ │ ├── Modal.Description.js │ │ │ ├── Modal.Description.settings.scss │ │ │ ├── Modal.Footer.index.scss │ │ │ ├── Modal.Footer.js │ │ │ ├── Modal.Footer.settings.scss │ │ │ ├── Modal.Header.index.scss │ │ │ ├── Modal.Header.js │ │ │ ├── Modal.Header.settings.scss │ │ │ ├── Modal.OpenTrigger.index.scss │ │ │ ├── Modal.OpenTrigger.js │ │ │ ├── Modal.OpenTrigger.settings.scss │ │ │ ├── Modal.Overlay.index.scss │ │ │ ├── Modal.Overlay.js │ │ │ ├── Modal.Overlay.settings.scss │ │ │ ├── Modal.Portal.index.scss │ │ │ ├── Modal.Portal.js │ │ │ ├── Modal.Portal.settings.scss │ │ │ ├── Modal.Root.js │ │ │ ├── Modal.ScrollArea.index.scss │ │ │ ├── Modal.ScrollArea.js │ │ │ ├── Modal.ScrollArea.settings.scss │ │ │ ├── Modal.Title.index.scss │ │ │ ├── Modal.Title.js │ │ │ ├── Modal.Title.settings.scss │ │ │ ├── _settings.scss │ │ │ ├── config.js │ │ │ ├── context │ │ │ │ └── index.js │ │ │ ├── hooks │ │ │ │ ├── index.js │ │ │ │ ├── useDelayedRender.js │ │ │ │ └── useModalContext.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── notification │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleAlignItems.js │ │ │ ├── ArticleAutoClose.js │ │ │ ├── ArticleContainerOverride.js │ │ │ ├── ArticleDefault.js │ │ │ ├── ArticleMobileLeftIcon.js │ │ │ ├── ArticlePosition.js │ │ │ ├── ArticleRoundedCorners.js │ │ │ ├── ArticleTypeAndVariation.js │ │ │ ├── PositionNotification.js │ │ │ ├── index.js │ │ │ ├── package.json │ │ │ └── utils.js │ │ ├── package.json │ │ ├── src │ │ │ ├── _settings.scss │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── pagination │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CHANGELOG.md │ │ │ ├── DynamicMoleculePagination │ │ │ │ └── index.js │ │ │ ├── Icons │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── PageButton.js │ │ │ ├── customPropTypes │ │ │ │ ├── helpers.js │ │ │ │ ├── index.js │ │ │ │ ├── isValidPage.js │ │ │ │ ├── isValidShowPages.js │ │ │ │ └── isValidTotalPages.js │ │ │ ├── helpers │ │ │ │ └── pagination │ │ │ │ │ ├── highRange.js │ │ │ │ │ ├── index.js │ │ │ │ │ ├── lowRange.js │ │ │ │ │ ├── nextPage.js │ │ │ │ │ ├── prevPage.js │ │ │ │ │ └── range.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── phoneInput │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleDefault.js │ │ │ ├── ArticleStates.js │ │ │ ├── ArticleTypes.js │ │ │ ├── index.js │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── photoUploader │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CHANGELOG.md │ │ │ ├── articles │ │ │ │ ├── Content.js │ │ │ │ ├── DefaultArticle.js │ │ │ │ ├── InitialPhotosArticle.js │ │ │ │ └── WithContentArticle.js │ │ │ ├── config.js │ │ │ ├── icons.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── DragNotification │ │ │ │ ├── config.js │ │ │ │ └── index.js │ │ │ ├── DragState │ │ │ │ ├── config.js │ │ │ │ └── index.js │ │ │ ├── EmptyView │ │ │ │ ├── config.js │ │ │ │ └── index.js │ │ │ ├── PhotosPreview │ │ │ │ ├── config.js │ │ │ │ └── index.js │ │ │ ├── SkeletonCard │ │ │ │ ├── config.js │ │ │ │ └── index.js │ │ │ ├── ThumbCard │ │ │ │ ├── config.js │ │ │ │ └── index.js │ │ │ ├── config.js │ │ │ ├── fileTools.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── photoTools.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── progressSteps │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CompressedProgressBarArticle.js │ │ │ ├── ContentTypeProgressStepsArticle.js │ │ │ ├── CustomIconsProgressStepsArticle.js │ │ │ ├── DefaultProgressStepsArticle.js │ │ │ ├── Icons │ │ │ │ └── index.js │ │ │ ├── JustifyContentProgressBarArticle.js │ │ │ ├── OnChangeHandlerProgressStepsArticle.js │ │ │ ├── VerticalProgressBarArticle.js │ │ │ ├── components │ │ │ │ └── Contents.js │ │ │ ├── config │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── components │ │ │ │ └── MoleculeProgressStep │ │ │ │ │ ├── config.js │ │ │ │ │ └── index.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── quickAction │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleDefault.js │ │ │ ├── ArticleDisabled.js │ │ │ ├── ArticleSize.js │ │ │ ├── CHANGELOG.md │ │ │ ├── config │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── radioButtonField │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── ArticleDefault.js │ │ │ ├── ArticleHelpText.js │ │ │ ├── ArticleStatus.js │ │ │ ├── index.js │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── radioButtonGroup │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CHANGELOG.md │ │ │ ├── articles │ │ │ │ ├── ArticleAtomRadioButton.js │ │ │ │ ├── ArticleChangeProps.js │ │ │ │ └── ArticleMoleculeRadioButtonField.js │ │ │ ├── components │ │ │ │ └── CustomLabel.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── rating │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CHANGELOG.md │ │ │ ├── Icons │ │ │ │ ├── index.js │ │ │ │ ├── starFilled.js │ │ │ │ ├── starFilledCustom.js │ │ │ │ ├── starHalfFilled.js │ │ │ │ ├── starOutline.js │ │ │ │ └── starOutlineCustom.js │ │ │ ├── index.js │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── Icons │ │ │ │ ├── index.js │ │ │ │ ├── starFilled.js │ │ │ │ ├── starHalfFilled.js │ │ │ │ └── starOutline.js │ │ │ ├── components │ │ │ │ ├── Star.js │ │ │ │ ├── StarHover.js │ │ │ │ └── settings.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── select │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── Icons │ │ │ │ └── index.js │ │ │ ├── articles │ │ │ │ ├── ArticleControlledUncontrolledValue.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleHasSearch.js │ │ │ │ ├── ArticleIsBorderless.js │ │ │ │ ├── ArticleSize.js │ │ │ │ └── ArticleStatus.js │ │ │ ├── data │ │ │ │ └── fullNames.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── components │ │ │ │ ├── MoleculeInputSelect.js │ │ │ │ ├── MultipleSelection.js │ │ │ │ ├── Search.js │ │ │ │ ├── SingleSelection.js │ │ │ │ └── config.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── selectField │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── Icons │ │ │ │ └── index.js │ │ │ ├── data │ │ │ │ └── index.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── selectPopover │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CHANGELOG.md │ │ │ ├── Custom │ │ │ │ ├── CustomContentWrapper.js │ │ │ │ └── CustomRenderActions.js │ │ │ ├── Icons │ │ │ │ └── index.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── RenderActions.js │ │ │ ├── RenderActionsDefault.js │ │ │ ├── _settings.scss │ │ │ ├── components │ │ │ │ └── SelectIcon.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── stepper │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CustomStep.js │ │ │ ├── Icon.js │ │ │ ├── LoremIpsum.js │ │ │ ├── articles │ │ │ │ ├── ArticleCustomStep.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleDefaultStep.js │ │ │ │ ├── ArticleDesignAlignment.js │ │ │ │ ├── ArticleIconsConnector.js │ │ │ │ └── ArticlePlayground.js │ │ │ ├── customSteps │ │ │ │ ├── DotCustomStep │ │ │ │ │ ├── DotCustomStep.js │ │ │ │ │ └── index.scss │ │ │ │ └── TextCustomStep │ │ │ │ │ ├── TextCustomStep.js │ │ │ │ │ └── index.scss │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── Step │ │ │ │ ├── DefaultStep.js │ │ │ │ ├── Step.js │ │ │ │ ├── index.scss │ │ │ │ ├── settings.js │ │ │ │ └── settings.scss │ │ │ ├── Stepper │ │ │ │ └── Stepper.js │ │ │ ├── context │ │ │ │ ├── StepsContext.js │ │ │ │ ├── StepsProvider.js │ │ │ │ ├── index.js │ │ │ │ └── useStepsContext.js │ │ │ ├── hooks │ │ │ │ └── useRefs.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── prop-types.js │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── tabs │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── Articles │ │ │ │ ├── ArticleActiveTabs.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleIconsCounters.js │ │ │ │ ├── ArticleType.js │ │ │ │ └── ArticleVariant.js │ │ │ ├── CHANGELOG.md │ │ │ ├── components │ │ │ │ ├── Content.js │ │ │ │ └── LoremIpsum.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── _settings.scss │ │ │ ├── components │ │ │ │ ├── MoleculeTab.js │ │ │ │ ├── MoleculeTabs.js │ │ │ │ └── config.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── textareaField │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── CHANGELOG.md │ │ │ ├── index.js │ │ │ ├── package.json │ │ │ ├── updatingValue.js │ │ │ └── withState.js │ │ ├── package.json │ │ ├── src │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── thumbnail │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── ImageCaption.js │ │ │ ├── ThumbnailLink.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ └── validationCode │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ ├── articles │ │ │ ├── ArticleAutoFocus.js │ │ │ ├── ArticleDefault.js │ │ │ ├── ArticleDisabled.js │ │ │ ├── ArticleForwardRef.js │ │ │ ├── ArticleLength.js │ │ │ ├── ArticleMask.js │ │ │ ├── ArticleOnlyInput.js │ │ │ ├── ArticlePassword.js │ │ │ ├── ArticlePlaceholder.js │ │ │ ├── ArticleSizes.js │ │ │ ├── ArticleStatus.js │ │ │ └── ArticleUncontrolled.js │ │ ├── index.js │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ ├── config.js │ │ ├── index.js │ │ ├── index.scss │ │ └── styles │ │ │ ├── index.scss │ │ │ └── settings.scss │ │ └── test │ │ └── index.test.js ├── organism │ ├── .gitkeep │ └── nestedCheckboxes │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ ├── NestedExample.js │ │ ├── articles │ │ │ ├── ArticleDefault.js │ │ │ └── ArticleMultipleNesting.js │ │ ├── index.js │ │ ├── index.scss │ │ ├── package.json │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ ├── hooks │ │ │ └── useMutationObserver.js │ │ ├── index.js │ │ ├── index.scss │ │ ├── settings.js │ │ └── styles │ │ │ ├── index.scss │ │ │ └── settings.scss │ │ └── test │ │ └── index.test.js ├── primitive │ ├── .gitkeep │ ├── injector │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── Child.js │ │ │ ├── OtherChild.js │ │ │ ├── article │ │ │ │ ├── ArticleClassName.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleFragment.js │ │ │ │ ├── ArticleHandlers.js │ │ │ │ ├── ArticleProps.js │ │ │ │ ├── ArticleProviso.js │ │ │ │ └── ArticleStyles.js │ │ │ ├── index.js │ │ │ ├── package.json │ │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── settings.js │ │ └── test │ │ │ └── index.test.js │ ├── linkBox │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── article │ │ │ │ ├── ArticleA11y.js │ │ │ │ ├── ArticleDefault.js │ │ │ │ └── ArticleNesting.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── PrimitiveLinkBoxLink.js │ │ │ ├── PrimitiveLinkBoxRaised.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── settings.js │ │ │ └── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ └── test │ │ │ └── index.test.js │ ├── loadingIcon │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── index.js │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ └── index.scss │ │ └── test │ │ │ └── index.test.js │ ├── polymorphicElement │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── index.js │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── index.js │ │ │ └── index.scss │ │ └── test │ │ │ └── index.test.js │ ├── typography │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ │ ├── LoremIpsum.js │ │ │ ├── articles │ │ │ │ ├── ArticleDefault.js │ │ │ │ ├── ArticleDesign.js │ │ │ │ ├── ArticleIsBlurred.js │ │ │ │ ├── ArticleLink.js │ │ │ │ ├── ArticleStyles.js │ │ │ │ └── ArticleTypes.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ └── package.json │ │ ├── package.json │ │ ├── src │ │ │ ├── component │ │ │ │ └── index.js │ │ │ ├── config.js │ │ │ ├── index.js │ │ │ ├── index.scss │ │ │ ├── styles │ │ │ │ ├── index.scss │ │ │ │ └── settings.scss │ │ │ └── useTypography.js │ │ └── test │ │ │ └── index.test.js │ └── visuallyHidden │ │ ├── .gitignore │ │ ├── .npmignore │ │ ├── CHANGELOG.md │ │ ├── LICENSE.md │ │ ├── README.md │ │ ├── demo │ │ ├── articles │ │ │ ├── ArticleA11y.js │ │ │ └── ArticleVisuallyHidden.js │ │ ├── index.js │ │ ├── index.scss │ │ ├── package.json │ │ └── settings.js │ │ ├── package.json │ │ ├── src │ │ ├── index.js │ │ ├── index.scss │ │ ├── settings.js │ │ └── styles │ │ │ ├── index.scss │ │ │ └── settings.scss │ │ └── test │ │ └── index.test.js └── specie │ └── .gitkeep ├── contributor-docs ├── Accessibility Standards.md ├── Definition of Done (DoD).md ├── Definition of Ready (DoR).md ├── Our Agreements.md └── README.md ├── package-lock.json ├── package.json ├── scripts ├── build-themes.js └── replace-npm-ignore.js ├── themes ├── _common.scss ├── _destyle.scss ├── adevinta.scss ├── carfactory.scss ├── epreselec.scss ├── fotocasa.scss ├── habitaclia-v2.scss ├── habitaclia.scss ├── infojobs.scss ├── milanuncios.scss ├── motor.scss └── sui.scss ├── tsconfig.json ├── utils ├── sui-component-dependencies │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ └── package.json ├── sui-theme │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── package.json │ └── src │ │ ├── _default.scss │ │ ├── _reset.scss │ │ ├── _settings.scss │ │ ├── _typography.scss │ │ ├── classes.scss │ │ ├── classes │ │ ├── README.md │ │ ├── _margins.scss │ │ ├── _paddings.scss │ │ └── index.scss │ │ ├── components │ │ ├── _badge.scss │ │ ├── _button.scss │ │ ├── _card.scss │ │ ├── _icon.scss │ │ ├── _input.scss │ │ ├── _select.scss │ │ ├── _tabs.scss │ │ ├── _tag.scss │ │ ├── atom │ │ │ └── input │ │ │ │ ├── _placeholders.scss │ │ │ │ ├── _settings.scss │ │ │ │ └── index.scss │ │ └── thumbnail │ │ │ └── _basic.scss │ │ ├── icons │ │ └── _arrow.scss │ │ ├── index.scss │ │ ├── layout │ │ ├── _breakpoints.scss │ │ └── _grid.scss │ │ ├── settings-compat-v7 │ │ ├── _animation.scss │ │ ├── _box-style.scss │ │ ├── _color.scss │ │ ├── _components.scss │ │ ├── _font.scss │ │ ├── _index.scss │ │ ├── _layout.scss │ │ └── _spacing.scss │ │ ├── settings │ │ ├── _box-style.scss │ │ ├── _color.scss │ │ ├── _font.scss │ │ ├── _layers.scss │ │ ├── _motion.scss │ │ ├── _opacity.scss │ │ ├── _size.scss │ │ └── _spacing.scss │ │ ├── utils.scss │ │ └── utils │ │ ├── _breakpoints.scss │ │ ├── _colors.scss │ │ ├── _forms.scss │ │ ├── _grid.scss │ │ ├── _image.scss │ │ ├── _list.scss │ │ ├── _opacity.scss │ │ ├── _scrollbars.scss │ │ ├── _spacing.scss │ │ ├── _string.scss │ │ ├── _text.scss │ │ └── _url.scss └── sui-tokens │ ├── .gitignore │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE.md │ ├── README.md │ ├── bin │ ├── tokens-json.mts │ ├── tokens-scss.mts │ └── tokens.mts │ ├── package.json │ ├── src │ ├── build.ts │ ├── checker.ts │ ├── default.tokens.config.ts │ ├── generate.ts │ ├── index.ts │ └── types.ts │ └── tsconfig.json └── vercel.json /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["sui"] 3 | } 4 | -------------------------------------------------------------------------------- /.github/CODEOWNERS: -------------------------------------------------------------------------------- 1 | # Each line is a file pattern followed by one or more owners. 2 | 3 | # These owners will be the default owners for everything in the repo. 4 | * @sui-bot @kikoruiz @andresin87 @andresz1 5 | 6 | # Order is important. The last matching pattern has the most precedence. 7 | # So if a pull request only touches javascript files, only these owners 8 | # will be requested to review. 9 | # *.js @octocat @github/js 10 | 11 | # You can also use email addresses if you prefer. 12 | # docs/* docs@example.com 13 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | - package-ecosystem: 'npm' 4 | directory: '/' 5 | schedule: 6 | interval: 'weekly' 7 | ignore: 8 | - dependency-name: '*' 9 | update-types: ['version-update:semver-major'] 10 | commit-message: 11 | prefix: 'upgrade' 12 | include: 'scope' 13 | labels: 14 | - 'dependencies' 15 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # project 2 | public/ 3 | .sui/ 4 | 5 | # environment 6 | .env 7 | 8 | # OS 9 | .DS_Store 10 | 11 | # server 12 | .tern-port 13 | 14 | # IDEs 15 | .vscode/ 16 | .idea 17 | 18 | # framework 19 | .vercel 20 | 21 | # language 22 | node_modules/ 23 | lib/ 24 | */**/lib/ 25 | npm-debug.log 26 | components/**/**/themes 27 | */**/package-lock.json 28 | 29 | # coverage 30 | coverage/ 31 | .coverage/ 32 | .vim 33 | -------------------------------------------------------------------------------- /.npmrc: -------------------------------------------------------------------------------- 1 | legacy-peer-deps=true -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 20.13 -------------------------------------------------------------------------------- /components/atom/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SUI-Components/sui-components/c1a094b120632a3f22f91bfc09e6a7ff215203ce/components/atom/.gitkeep -------------------------------------------------------------------------------- /components/atom/actionButton/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/actionButton/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/actionButton/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-action-button-demo", 3 | "version": "1.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /components/atom/actionButton/src/ActionButtonLink.js: -------------------------------------------------------------------------------- 1 | import {forwardRef} from 'react' 2 | 3 | import PropTypes from 'prop-types' 4 | 5 | const ActionButtonLink = forwardRef(({children, ...props}, ref) => ( 6 | 7 | {children} 8 | 9 | )) 10 | 11 | ActionButtonLink.propTypes = { 12 | children: PropTypes.node 13 | } 14 | 15 | ActionButtonLink.displayName = 'ActionButtonLink' 16 | 17 | export default ActionButtonLink 18 | -------------------------------------------------------------------------------- /components/atom/actionButton/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | @import '~@s-ui/react-atom-icon/lib/index'; 3 | 4 | @import './styles/settings.scss'; 5 | @import './styles/index.scss'; 6 | -------------------------------------------------------------------------------- /components/atom/backToTop/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/backToTop/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/backToTop/demo/index.scss: -------------------------------------------------------------------------------- 1 | @import '../src/index'; 2 | 3 | $base-class: 'DemoAtomBackToTop'; 4 | $section: 'section'; 5 | 6 | $base-class-section: '.#{$base-class}-#{$section}'; 7 | 8 | #{$base-class-section} { 9 | // Add here your magic 10 | } 11 | -------------------------------------------------------------------------------- /components/atom/backToTop/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-back-to-top-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /components/atom/backToTop/src/config.js: -------------------------------------------------------------------------------- 1 | export const BASE_CLASS = 'sui-AtomBackToTop' 2 | export const CLASS_ICON = `${BASE_CLASS}-icon` 3 | export const CLASS_TEXT = `${BASE_CLASS}-text` 4 | export const CLASS_SHOW = `${BASE_CLASS}--show` 5 | export const CLASS_HIDE = `${BASE_CLASS}--hide` 6 | export const CLASS_READY = `${BASE_CLASS}--ready` 7 | 8 | export const SCROLL_BEHAVIOR = { 9 | SMOOTH: 'smooth', 10 | AUTO: 'auto' 11 | } 12 | 13 | export const STYLES = { 14 | DARK: 'dark', 15 | LIGHT: 'light' 16 | } 17 | -------------------------------------------------------------------------------- /components/atom/backToTop/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/badge/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules 3 | -------------------------------------------------------------------------------- /components/atom/badge/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/badge/assets/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SUI-Components/sui-components/c1a094b120632a3f22f91bfc09e6a7ff215203ce/components/atom/badge/assets/screenshot.png -------------------------------------------------------------------------------- /components/atom/badge/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-badge-demo", 3 | "version": "1.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /components/atom/badge/demo/settings.js: -------------------------------------------------------------------------------- 1 | export const BASE_CLASS_DEMO = `DemoAtomBadge` 2 | export const CLASS_SECTION = `${BASE_CLASS_DEMO}-section` 3 | 4 | export const extendedColors = [ 5 | 'theblue', 6 | 'wiggins', 7 | 'sky', 8 | 'surfer', 9 | 'kiwi', 10 | 'lavender', 11 | 'sugarcotton', 12 | 'jungle', 13 | 'night', 14 | 'chilli', 15 | 'apple' 16 | ] 17 | -------------------------------------------------------------------------------- /components/atom/badge/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/badge/src/styles/settings.scss: -------------------------------------------------------------------------------- 1 | @import '../_config.scss'; 2 | -------------------------------------------------------------------------------- /components/atom/button/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules 3 | -------------------------------------------------------------------------------- /components/atom/button/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/button/demo/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/react-atom-icon/lib/index.scss'; 2 | @import '~@s-ui/react-atom-kbd/lib/index.scss'; 3 | 4 | @import '../src/index'; 5 | -------------------------------------------------------------------------------- /components/atom/button/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-button-demo", 3 | "version": "2.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "MIT", 13 | "dependencies": { 14 | "@s-ui/react-atom-icon": "1", 15 | "@s-ui/react-atom-kbd": "1", 16 | "use-prefers-color-scheme": "1.1.3" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /components/atom/button/src/ButtonLink.js: -------------------------------------------------------------------------------- 1 | import {forwardRef} from 'react' 2 | 3 | import PropTypes from 'prop-types' 4 | 5 | const ButtonLink = forwardRef(({children, ...props}, ref) => ( 6 | 7 | {children} 8 | 9 | )) 10 | 11 | ButtonLink.displayName = 'ButtonLink' 12 | 13 | ButtonLink.propTypes = { 14 | children: PropTypes.node 15 | } 16 | 17 | export default ButtonLink 18 | -------------------------------------------------------------------------------- /components/atom/button/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | @import '~@s-ui/react-primitive-loading-icon/lib/index'; 3 | 4 | @import './styles/settings.scss'; 5 | @import './styles/index.scss'; 6 | -------------------------------------------------------------------------------- /components/atom/card/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/card/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/card/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-card-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "MIT", 13 | "dependencies": { 14 | "@s-ui/react-layout-media-query": "1" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /components/atom/card/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/checkbox/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/checkbox/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/checkbox/demo/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/react-atom-icon/lib/index'; 2 | @import '~@s-ui/react-atom-kbd/lib/index'; 3 | @import '~@s-ui/react-primitive-visually-hidden/lib/index'; 4 | 5 | @import '../src/index'; 6 | 7 | .DemoAtomCheckbox { 8 | padding: 20px; 9 | } 10 | -------------------------------------------------------------------------------- /components/atom/checkbox/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/helpText/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/helpText/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/helpText/demo/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/react-atom-input/lib/index'; 2 | @import '~@s-ui/react-atom-textarea/lib/index'; 3 | @import '~@s-ui/react-atom-checkbox/lib/index'; 4 | @import '~@s-ui/react-atom-label/lib/index'; 5 | @import '~@s-ui/react-atom-kbd/lib/index'; 6 | 7 | @import '../src/index'; 8 | -------------------------------------------------------------------------------- /components/atom/helpText/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/helpText/src/settings.js: -------------------------------------------------------------------------------- 1 | export const BASE_CLASS = 'sui-AtomHelpText' 2 | -------------------------------------------------------------------------------- /components/atom/helpText/src/styles/index.scss: -------------------------------------------------------------------------------- 1 | $base-class: '.sui-AtomHelpText'; 2 | 3 | #{$base-class} { 4 | color: $c-help-text; 5 | display: block; 6 | font-size: $fz-atom-help-text; 7 | margin: $m-atom-help-text; 8 | } 9 | -------------------------------------------------------------------------------- /components/atom/helpText/src/styles/settings.scss: -------------------------------------------------------------------------------- 1 | $c-help-text: $c-gray !default; 2 | $fz-atom-help-text: $fz-xs !default; 3 | $m-atom-help-text: $m-s 0 0 !default; 4 | -------------------------------------------------------------------------------- /components/atom/icon/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/icon/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/icon/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-icon-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "MIT", 13 | "dependencies": { 14 | "@s-ui/react-atom-button": "2" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /components/atom/icon/src/LazyIcon.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types' 2 | 3 | import {useNearScreen} from '@s-ui/react-hooks/lib/useOnScreen' 4 | 5 | import AtomIcon from './Icon.js' 6 | 7 | export default function LazyIcon({children, ...restOfProps}) { 8 | const [isIntersecting, outerRef] = useNearScreen() 9 | 10 | return {isIntersecting ? children : } 11 | } 12 | 13 | LazyIcon.propTypes = { 14 | children: PropTypes.element 15 | } 16 | -------------------------------------------------------------------------------- /components/atom/icon/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/image/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/image/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/image/demo/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG 2 | 3 | # 1.1.0 (2022-04-05) 4 | 5 | 6 | ### Bug Fixes 7 | 8 | * **components/atom/image/demo:** resolve linting errors ([f00fe69](https://github.com/SUI-Components/sui-components/commit/f00fe692ee64281268b94aba4e46ce4230be22db)) 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /components/atom/image/demo/ImageNotFoundIcon.js: -------------------------------------------------------------------------------- 1 | import {BootstrapIcon} from '@s-ui/documentation-library' 2 | import AtomIcon, {ATOM_ICON_COLORS, ATOM_ICON_SIZES} from '@s-ui/react-atom-icon' 3 | 4 | const ImageNotFoundIcon = () => { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default ImageNotFoundIcon 13 | -------------------------------------------------------------------------------- /components/atom/image/demo/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/react-atom-spinner/lib/index'; 2 | @import '~@s-ui/react-atom-icon/lib/index'; 3 | 4 | @import '../src/index'; 5 | 6 | .DemoAtomImage { 7 | &-section { 8 | .placeholder-demo, 9 | .skeleton-demo { 10 | .sui-AtomImage .sui-AtomImage-image { 11 | opacity: 1; 12 | &:hover { 13 | opacity: 0; 14 | transition: opacity 0.8s ease-in-out; 15 | } 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /components/atom/image/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-image-demo", 3 | "version": "1.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "MIT", 13 | "dependencies": { 14 | "@s-ui/react-atom-icon": "1", 15 | "@s-ui/react-atom-spinner": "1", 16 | "react-use": "15" 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /components/atom/image/src/ErrorImage.js: -------------------------------------------------------------------------------- 1 | import PropTypes from 'prop-types' 2 | 3 | const ErrorImage = ({className, icon: Icon, text}) => ( 4 |
5 | {Icon} 6 | {Boolean(text) &&

{text}

} 7 |
8 | ) 9 | 10 | ErrorImage.displayName = 'ErrorImage' 11 | 12 | ErrorImage.propTypes = { 13 | className: PropTypes.string, 14 | icon: PropTypes.node, 15 | text: PropTypes.node 16 | } 17 | 18 | export default ErrorImage 19 | -------------------------------------------------------------------------------- /components/atom/image/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/image/src/styles/settings.scss: -------------------------------------------------------------------------------- 1 | $bgc-atom-image: $c-gray-light !default; 2 | $trsdu-atom-image: 1s !default; 3 | 4 | $bgs-atom-image-placeholder: cover !default; 5 | $bgs-atom-image-skeleton: contain !default; 6 | -------------------------------------------------------------------------------- /components/atom/input/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/input/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/input/demo/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/react-atom-label/lib/index'; 2 | @import '~@s-ui/react-primitive-visually-hidden/lib/index'; 3 | @import '~@s-ui/react-atom-button/lib/index'; 4 | @import '~@s-ui/react-atom-kbd/lib/index'; 5 | 6 | @import '../src/index'; 7 | 8 | .DemoAtomInput { 9 | padding: 20px; 10 | } 11 | -------------------------------------------------------------------------------- /components/atom/input/src/Input/Wrappers/Addons/config.js: -------------------------------------------------------------------------------- 1 | import cx from 'classnames' 2 | 3 | import {BASE} from '../../../config.js' 4 | 5 | export const BASE_CLASS_ADDON = `${BASE}--withAddon` 6 | export const BASE_CLASS_ADDON_WRAPPER = `${BASE_CLASS_ADDON}Wrapper` 7 | export const ADDON_TYPES = { 8 | LEFT: 'left', 9 | RIGHT: 'right' 10 | } 11 | 12 | export const getClassName = ({type}) => cx(BASE_CLASS_ADDON, `${BASE_CLASS_ADDON}--${type}`) 13 | -------------------------------------------------------------------------------- /components/atom/input/src/Input/Wrappers/Addons/settings.scss: -------------------------------------------------------------------------------- 1 | $bdw-atom-input-addon-right: $bdw-s $bdw-s $bdw-s 0 !default; 2 | $bdw-atom-input-addon-left: $bdw-s 0 $bdw-s $bdw-s !default; 3 | $bgc-atom-input-addon: $c-gray-light-5 !default; 4 | $bdc-atom-input-addon: $c-gray-light !default; 5 | $c-atom-input-addon: $c-gray-light-1 !default; 6 | $p-atom-input-addon-left: $p-l !default; 7 | $p-atom-input-addon-right: $p-l !default; 8 | -------------------------------------------------------------------------------- /components/atom/input/src/Input/Wrappers/Button/config.js: -------------------------------------------------------------------------------- 1 | import {BASE} from '../../../config.js' 2 | 3 | export const BASE_CLASS_BUTTON = `${BASE}--withButton` 4 | -------------------------------------------------------------------------------- /components/atom/input/src/Input/Wrappers/Button/index.scss: -------------------------------------------------------------------------------- 1 | #{$base-class}--withButton { 2 | display: flex; 3 | width: 100%; 4 | 5 | &-input { 6 | flex: 1; 7 | width: 100%; 8 | } 9 | 10 | &-button { 11 | margin-left: $m-m; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /components/atom/input/src/Input/Wrappers/index.scss: -------------------------------------------------------------------------------- 1 | @import './Addons/index'; 2 | @import './Icons/index'; 3 | @import './Button/index'; 4 | -------------------------------------------------------------------------------- /components/atom/input/src/Input/Wrappers/settings.scss: -------------------------------------------------------------------------------- 1 | @import './Addons/settings'; 2 | @import './Icons/settings'; 3 | -------------------------------------------------------------------------------- /components/atom/input/src/Mask/iMask.js: -------------------------------------------------------------------------------- 1 | import {IMaskMixin} from 'react-imask' 2 | 3 | import Input from '../Input/index.js' 4 | 5 | const IMask = IMaskMixin(({inputRef, value, size, ...props}) => { 6 | return 7 | }) 8 | 9 | export default IMask 10 | -------------------------------------------------------------------------------- /components/atom/input/src/Password/config.js: -------------------------------------------------------------------------------- 1 | import {BASE_CLASS} from '../config.js' 2 | 3 | export const BASE_CLASS_PASSWORD = `${BASE_CLASS}-password` 4 | export const BASE_CLASS_PASSWORD_TOGGLE_BUTTON = `${BASE_CLASS_PASSWORD}--toggleButton` 5 | 6 | export const TEXT = 'text' 7 | export const PASSWORD = 'password' 8 | -------------------------------------------------------------------------------- /components/atom/input/src/Password/index.scss: -------------------------------------------------------------------------------- 1 | @import './styles/settings.scss'; 2 | @import './styles/index.scss'; 3 | -------------------------------------------------------------------------------- /components/atom/input/src/Password/styles/settings.scss: -------------------------------------------------------------------------------- 1 | $r-atom-input-password-toggle-button: $gutter !default; 2 | $c-atom-input-password-toggle-button: $c-primary !default; 3 | $pr-atom-input-password: 0px !default; 4 | -------------------------------------------------------------------------------- /components/atom/input/src/helpers/getComponentAndProps.js: -------------------------------------------------------------------------------- 1 | import Input from '../Input/index.js' 2 | import Mask from '../Mask/index.js' 3 | import Password from '../Password/index.js' 4 | 5 | export default ({type, ...rest}) => { 6 | switch (type) { 7 | case 'sui-password': 8 | return [Password, {...rest, type}] 9 | case 'mask': 10 | return [Mask, {...rest}] 11 | default: 12 | return [Input, {...rest, type}] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /components/atom/input/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/input/src/settings.scss: -------------------------------------------------------------------------------- 1 | @import './Input/Component/settings'; 2 | 3 | @import './Input/Wrappers/settings'; 4 | 5 | @import './Password/styles/settings.scss'; 6 | -------------------------------------------------------------------------------- /components/atom/input/src/styles/index.scss: -------------------------------------------------------------------------------- 1 | $base-class: '.sui-AtomInput'; 2 | 3 | @import '../Input/Component/index'; 4 | @import '../Container/index'; 5 | @import '../Input/Wrappers/index'; 6 | @import '../Password/index'; 7 | -------------------------------------------------------------------------------- /components/atom/input/src/styles/settings.scss: -------------------------------------------------------------------------------- 1 | @import '../settings.scss'; 2 | 3 | @import '../mixins.scss'; 4 | -------------------------------------------------------------------------------- /components/atom/kbd/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/kbd/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/kbd/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG 2 | 3 | # 1.1.0 (2025-01-24) 4 | 5 | 6 | ### Features 7 | 8 | * add new component ([a5ff2e5](https://github.com/SUI-Components/sui-components/commit/a5ff2e5ddaacd4da1d61ff2ce0a96bb0f74a34fc)) 9 | * pass the tests ([dfa6b11](https://github.com/SUI-Components/sui-components/commit/dfa6b119ac5c8faecbb740429099d4812e634255)) 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /components/atom/kbd/demo/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/react-atom-input/lib/index'; 2 | @import '~@s-ui/react-atom-textarea/lib/index'; 3 | @import '~@s-ui/react-atom-checkbox/lib/index'; 4 | @import '~@s-ui/react-atom-label/lib/index'; 5 | 6 | @import '../src/index'; 7 | -------------------------------------------------------------------------------- /components/atom/kbd/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-kbd-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "MIT", 13 | "dependencies": { 14 | } 15 | } -------------------------------------------------------------------------------- /components/atom/kbd/demo/settings.js: -------------------------------------------------------------------------------- 1 | export const BASE_CLASS_DEMO = `DemoKbd` 2 | export const CLASS_SECTION = `${BASE_CLASS_DEMO}-section` 3 | -------------------------------------------------------------------------------- /components/atom/kbd/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/kbd/src/settings.js: -------------------------------------------------------------------------------- 1 | export const BASE_CLASS = 'sui-AtomKbd' 2 | -------------------------------------------------------------------------------- /components/atom/kbd/src/styles/index.scss: -------------------------------------------------------------------------------- 1 | $base-class: '.sui-AtomKbd'; 2 | 3 | #{$base-class} { 4 | display: inline; 5 | color: $c-black; 6 | font-size: $fz-s; 7 | font-weight: $fw-bold; 8 | padding-inline: $p-m; 9 | border-style: solid; 10 | border-width: $bdw-s $bdw-s $bdw-m $bdw-s; 11 | border-color: color-mix(in srgb, $c-black 50%, $c-white 50%); 12 | border-radius: $bdrs-l; 13 | background-color: color-mix(in srgb, $c-black 5%, $c-white); 14 | } 15 | -------------------------------------------------------------------------------- /components/atom/kbd/src/styles/settings.scss: -------------------------------------------------------------------------------- 1 | // add here the style tokens 2 | -------------------------------------------------------------------------------- /components/atom/label/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/label/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/label/demo/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index.scss'; 2 | 3 | @import '~@s-ui/react-atom-icon/lib/index'; 4 | @import '~@s-ui/react-atom-input/lib/index'; 5 | @import '~@s-ui/react-atom-button/lib/index'; 6 | @import '~@s-ui/react-atom-checkbox/lib/index'; 7 | 8 | @import '../src/index'; 9 | -------------------------------------------------------------------------------- /components/atom/label/index.d.ts: -------------------------------------------------------------------------------- 1 | import type {FC} from 'react' 2 | 3 | import type {RenderOptions, RenderResult} from '@testing-library/react' 4 | 5 | interface SetupEnvironmentOptions extends RenderOptions { 6 | contexts: unknown[] 7 | } 8 | 9 | declare global { 10 | interface Window { 11 | setupEnvironment: ( 12 | Component: FC, 13 | {contexts, hydrate, queries, wrapper}?: SetupEnvironmentOptions 14 | ) => (props: {[k: string]: unknown}) => RenderResult 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /components/atom/label/mod.d.ts: -------------------------------------------------------------------------------- 1 | declare module '@s-ui/documentation-library' 2 | declare module '@s-ui/react-atom-button' 3 | declare module '@s-ui/react-atom-checkbox' 4 | declare module '@s-ui/react-atom-icon' 5 | declare module '@s-ui/react-atom-input' 6 | -------------------------------------------------------------------------------- /components/atom/label/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/label/src/settings.tsx: -------------------------------------------------------------------------------- 1 | export const CLASSNAME = 'sui-AtomLabel' 2 | 3 | export const TYPES = { 4 | SUCCESS: 'success', 5 | ERROR: 'error', 6 | ALERT: 'alert', 7 | CONTRAST: 'contrast', 8 | DISABLED: 'disabled' 9 | } as const 10 | 11 | export const FONT_SIZES = { 12 | LARGE: 'large', 13 | MEDIUM: 'medium', 14 | SMALL: 'small', 15 | XSMALL: 'xsmall' 16 | } as const 17 | -------------------------------------------------------------------------------- /components/atom/label/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../../../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "./lib", 5 | "rootDirs": ["src", "demo", "test"] 6 | }, 7 | "exclude": ["lib"] 8 | } 9 | -------------------------------------------------------------------------------- /components/atom/panel/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/panel/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/panel/demo/config.js: -------------------------------------------------------------------------------- 1 | export const BASE_CLASS_DEMO = `DemoAtomPanel` 2 | export const CLASS_SECTION = `${BASE_CLASS_DEMO}-section` 3 | 4 | export const flexWrapper = { 5 | background: 'white', 6 | color: 'grey', 7 | display: 'flex', 8 | flexWrap: 'wrap', 9 | justifyContent: 'center' 10 | } 11 | 12 | export const flexItem = { 13 | flex: '0 0 auto', 14 | margin: '15px', 15 | textAlign: 'center' 16 | } 17 | -------------------------------------------------------------------------------- /components/atom/panel/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-panel-demo", 3 | "version": "1.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "author": "", 11 | "license": "MIT" 12 | } 13 | -------------------------------------------------------------------------------- /components/atom/panel/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/pinInput/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/pinInput/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/pinInput/demo/index.scss: -------------------------------------------------------------------------------- 1 | @import '../src/index'; 2 | 3 | .DemoAtomPinInput { 4 | // Do your magic 5 | } 6 | -------------------------------------------------------------------------------- /components/atom/pinInput/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-pin-input-demo", 3 | "version": "1.2.0", 4 | "private": true, 5 | "description": "Demo for @s-ui/react-atom-validation-code" 6 | } 7 | -------------------------------------------------------------------------------- /components/atom/pinInput/src/PinInput.scss: -------------------------------------------------------------------------------- 1 | #{$base-class} { 2 | // Add your magic 3 | } 4 | -------------------------------------------------------------------------------- /components/atom/pinInput/src/PinInputChildren.scss: -------------------------------------------------------------------------------- 1 | @use 'sass:math'; 2 | 3 | #{$base-class}FieldsWrapper { 4 | display: flex; 5 | flex-wrap: wrap; 6 | margin: 0 #{- math.div($m-pin-input-children, 2)}; 7 | row-gap: $m-pin-input-children; 8 | > .sui-PinInputField { 9 | margin: 0 math.div($m-pin-input-children, 2); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /components/atom/pinInput/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings'; 4 | @import './styles/index'; 5 | -------------------------------------------------------------------------------- /components/atom/pinInput/src/reducer/index.js: -------------------------------------------------------------------------------- 1 | import actions from './actions.js' 2 | import actionTypes from './actionTypes.js' 3 | import {pinInputReducer} from './reducer.js' 4 | import usePinInputReducer from './usePinInputReducer.js' 5 | 6 | export {actionTypes} 7 | export {pinInputReducer as reducer} 8 | export {actions} 9 | export {usePinInputReducer} 10 | -------------------------------------------------------------------------------- /components/atom/pinInput/src/styles/index.scss: -------------------------------------------------------------------------------- 1 | $base-class: '.sui-PinInput'; 2 | 3 | @import '../PinInput.scss'; 4 | @import '../PinInputChildren.scss'; 5 | @import '../PinInputField.scss'; 6 | -------------------------------------------------------------------------------- /components/atom/pinInput/src/styles/settings.scss: -------------------------------------------------------------------------------- 1 | @import '../config.scss'; 2 | -------------------------------------------------------------------------------- /components/atom/popover/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/popover/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/popover/demo/CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # CHANGELOG 2 | 3 | # 1.1.0 (2022-04-05) 4 | 5 | 6 | ### Bug Fixes 7 | 8 | * **components/atom/popover/demo:** resolve linting errors ([8428420](https://github.com/SUI-Components/sui-components/commit/8428420dbe8cf517decb5835c5a8ac3304affec3)) 9 | 10 | 11 | ### Features 12 | 13 | * **components/atom/tooltip:** Wip ([2ce257d](https://github.com/SUI-Components/sui-components/commit/2ce257d40534784874fbc6ce861eea0600c37a93)) 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /components/atom/popover/demo/Content.js: -------------------------------------------------------------------------------- 1 | import {forwardRef} from 'react' 2 | 3 | const Content = forwardRef((props, forwardedRef) => { 4 | return ( 5 |
6 | 7 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id mauris ornare, imperdiet nunc a, interdum dolor. 8 | 9 |
10 | ) 11 | }) 12 | 13 | export default Content 14 | -------------------------------------------------------------------------------- /components/atom/popover/demo/Icons/IconClose.js: -------------------------------------------------------------------------------- 1 | import {AntDesignIcon} from '@s-ui/documentation-library' 2 | import AtomIcon from '@s-ui/react-atom-icon' 3 | 4 | const IconClose = ({...props}) => ( 5 | 6 | 7 | 8 | ) 9 | 10 | IconClose.displayName = 'IconArrowDown' 11 | IconClose.propTypes = {} 12 | 13 | export default IconClose 14 | -------------------------------------------------------------------------------- /components/atom/popover/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-popover-demo", 3 | "version": "1.1.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "MIT", 13 | "dependencies": { 14 | "@s-ui/react-atom-icon": "1", 15 | "react-use": "17" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /components/atom/popover/demo/settings.js: -------------------------------------------------------------------------------- 1 | const BASE_CLASS_DEMO = `DemoAtomPopover` 2 | export const CLASS_SECTION = `${BASE_CLASS_DEMO}-section` 3 | -------------------------------------------------------------------------------- /components/atom/popover/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/progressBar/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/progressBar/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/progressBar/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-progress-bar-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /components/atom/progressBar/demo/settings.js: -------------------------------------------------------------------------------- 1 | export const BASE_CLASS_DEMO = `DemoAtomPopover` 2 | export const CLASS_SECTION = `${BASE_CLASS_DEMO}-section` 3 | 4 | export const getShuffledValue = () => Math.trunc(Math.random() * 100 + 1) 5 | -------------------------------------------------------------------------------- /components/atom/progressBar/src/ProgressBarCircle/Circle/settings.js: -------------------------------------------------------------------------------- 1 | export const SIZES = { 2 | LARGE: 'large', 3 | SMALL: 'small' 4 | } 5 | 6 | export const MODIFIERS = { 7 | LOADING: 'loading', 8 | PROGRESS: 'progress', 9 | ERROR: 'error' 10 | } 11 | 12 | export const MAX_TRANSITION_TIME_IN_MS = 1250 13 | -------------------------------------------------------------------------------- /components/atom/progressBar/src/ProgressBarCircle/settings.js: -------------------------------------------------------------------------------- 1 | import {BASE_CLASS, SIZES} from '../settings.js' 2 | 3 | export const BASE_CLASS_NAME = `${BASE_CLASS}Circle` 4 | 5 | export const INDICATOR_CLASS_NAME = `${BASE_CLASS_NAME}-indicator` 6 | 7 | export const SIZE_TO_WIDTH_LINE_MAP = { 8 | [SIZES.EXTRA_LARGE]: 6, 9 | [SIZES.LARGE]: 4, 10 | [SIZES.MEDIUM]: 8, 11 | [SIZES.SMALL]: 8 12 | } 13 | 14 | export const STROKE_SIZE_MAP = { 15 | [SIZES.LARGE]: 18, 16 | [SIZES.MEDIUM]: 12, 17 | [SIZES.SMALL]: 6 18 | } 19 | -------------------------------------------------------------------------------- /components/atom/progressBar/src/ProgressBarLine/Indicator/settings.js: -------------------------------------------------------------------------------- 1 | import {BASE_CLASS_LINE} from '../settings.js' 2 | 3 | export const CLASS_INDICATOR = `${BASE_CLASS_LINE}-indicator` 4 | -------------------------------------------------------------------------------- /components/atom/progressBar/src/ProgressBarLine/useIndicator.js: -------------------------------------------------------------------------------- 1 | import Indicator from './Indicator/index.js' 2 | 3 | const useIndicator = ({hideIndicator, indicatorBottom, percentage, indicatorTotal}) => { 4 | if (hideIndicator) return [] 5 | const indicator = ( 6 | 7 | ) 8 | return [!indicatorBottom ? indicator : null, indicatorBottom ? indicator : null] 9 | } 10 | 11 | export default useIndicator 12 | -------------------------------------------------------------------------------- /components/atom/progressBar/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/progressBar/src/styles/index.scss: -------------------------------------------------------------------------------- 1 | $base-class: '.sui-AtomProgressBarV2'; 2 | 3 | @import '../ProgressBarLine/index.scss'; 4 | @import '../ProgressBarCircle/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/progressBar/src/styles/settings.scss: -------------------------------------------------------------------------------- 1 | @import '../ProgressBarLine/settings.scss'; 2 | @import '../ProgressBarCircle/settings.scss'; 3 | -------------------------------------------------------------------------------- /components/atom/radioButton/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/radioButton/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/radioButton/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-radio-button-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /components/atom/radioButton/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/radioButton/src/settings.js: -------------------------------------------------------------------------------- 1 | export const BASE_CLASS = 'sui-AtomRadioButton' 2 | export const CLASS_HIDDEN = `is-hidden` 3 | -------------------------------------------------------------------------------- /components/atom/skeleton/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/skeleton/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/skeleton/demo/index.scss: -------------------------------------------------------------------------------- 1 | @import '../src/index'; 2 | 3 | $base-class: 'DemoAtomSkeleton'; 4 | $section: 'section'; 5 | 6 | $base-class-section: '.#{$base-class}-#{$section}'; 7 | 8 | #{$base-class-section} { 9 | // Add here your magic 10 | } 11 | -------------------------------------------------------------------------------- /components/atom/skeleton/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-skeleton-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "MIT" 13 | } 14 | -------------------------------------------------------------------------------- /components/atom/skeleton/demo/settings.js: -------------------------------------------------------------------------------- 1 | export const BASE_CLASS_DEMO = `DemoAtomSkeleton` 2 | export const CLASS_SECTION = `${BASE_CLASS_DEMO}-section` 3 | -------------------------------------------------------------------------------- /components/atom/skeleton/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | 3 | @import './styles/settings.scss'; 4 | @import './styles/index.scss'; 5 | -------------------------------------------------------------------------------- /components/atom/skeleton/src/settings.js: -------------------------------------------------------------------------------- 1 | export const BASE_CLASS = 'sui-AtomSkeleton' 2 | 3 | export const ATOM_SKELETON_ANIMATIONS = { 4 | wave: 'wave', 5 | pulse: 'pulse' 6 | } 7 | 8 | export const ATOM_SKELETON_VARIANTS = { 9 | round: 'round', 10 | circle: 'circle', 11 | square: 'square' 12 | } 13 | -------------------------------------------------------------------------------- /components/atom/slider/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/slider/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/slider/demo/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@s-ui/react-atom-slider-demo", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "private": true, 7 | "scripts": { 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "MIT", 13 | "dependencies": { 14 | "@s-ui/react-atom-button": "2", 15 | "@s-ui/react-atom-checkbox": "3", 16 | "@s-ui/react-atom-icon": "1", 17 | "@s-ui/react-atom-input": "5" 18 | } 19 | } -------------------------------------------------------------------------------- /components/atom/slider/demo/utils.js: -------------------------------------------------------------------------------- 1 | export const range = n => Array.from(Array(n).keys()) 2 | -------------------------------------------------------------------------------- /components/atom/slider/src/index.scss: -------------------------------------------------------------------------------- 1 | @import '~@s-ui/theme/lib/index'; 2 | @import '~rc-slider/assets/index'; 3 | 4 | @import './styles/settings.scss'; 5 | @import './styles/index.scss'; 6 | -------------------------------------------------------------------------------- /components/atom/spinner/.gitignore: -------------------------------------------------------------------------------- 1 | lib 2 | node_modules -------------------------------------------------------------------------------- /components/atom/spinner/.npmignore: -------------------------------------------------------------------------------- 1 | assets 2 | demo 3 | src 4 | test 5 | node_modules 6 | CHANGELOG.md -------------------------------------------------------------------------------- /components/atom/spinner/demo/CustomLoader.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable react/prop-types */ 2 | 3 | const CustomLoader = ({children}) => { 4 | return
{children}
5 | } 6 | 7 | export default CustomLoader 8 | -------------------------------------------------------------------------------- /components/atom/spinner/demo/settings.js: -------------------------------------------------------------------------------- 1 | export const BASE_CLASS_DEMO = `DemoAtomSpinner` 2 | export const CLASS_SECTION = `${BASE_CLASS_DEMO}-section` 3 | 4 | export const dashStyle = { 5 | border: '1px dashed lightgrey', 6 | padding: 30 7 | } 8 | -------------------------------------------------------------------------------- /components/atom/spinner/src/DefaultSpinner.js: -------------------------------------------------------------------------------- 1 | import {forwardRef} from 'react' 2 | 3 | import PropTypes from 'prop-types' 4 | 5 | const DefaultSpinner = forwardRef(({isDelayed, loader}, forwardedRef) => { 6 | return {!isDelayed ? loader :