@sphereon/ui-components.ssi-react 0.1.3-unstable.15 → 0.1.3-unstable.150

package/dist/styles/components/components/SSIToastContainer/index.js

@@ -0,0 +1,314 @@
+import styled from 'styled-components';
+import { ToastContainer } from 'react-toastify';
+export const SSIToastContainerContainerStyled = styled(ToastContainer) `
+  &.Toastify__toast-container {
+    z-index: 9999;
+    -webkit-transform: translate3d(0, 0, 9999);
+    position: fixed;
+    box-sizing: border-box;
+  }
+
+  &.Toastify__toast-container--top-left {
+    top: 1em;
+    left: 1em;
+  }
+  &.Toastify__toast-container--top-center {
+    top: 1em;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &.Toastify__toast-container--top-right {
+    top: 1em;
+    right: 1em;
+  }
+  &.Toastify__toast-container--bottom-left {
+    bottom: 1em;
+    left: 1em;
+  }
+  &.Toastify__toast-container--bottom-center {
+    bottom: 1em;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+  &.Toastify__toast-container--bottom-right {
+    bottom: 1em;
+    right: 1em;
+  }
+
+  @media only screen and (max-width: 480px) {
+    .Toastify__toast-container {
+      width: 100vw;
+      padding: 0;
+      left: 0;
+      margin: 0;
+    }
+    .Toastify__toast-container--top-left,
+    .Toastify__toast-container--top-center,
+    .Toastify__toast-container--top-right {
+      top: 0;
+      transform: translateX(0);
+    }
+    .Toastify__toast-container--bottom-left,
+    .Toastify__toast-container--bottom-center,
+    .Toastify__toast-container--bottom-right {
+      bottom: 0;
+      transform: translateX(0);
+    }
+    .Toastify__toast-container--rtl {
+      right: 0;
+      left: initial;
+    }
+  }
+
+  .Toastify__toast {
+    position: relative;
+    box-sizing: border-box;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-pack: justify;
+    justify-content: space-between;
+    overflow: hidden;
+    cursor: default;
+    direction: ltr;
+    z-index: 0;
+  }
+
+  .Toastify__toast--rtl {
+    direction: rtl;
+  }
+
+  .Toastify__toast--close-on-click {
+    cursor: pointer;
+  }
+
+  .Toastify__toast-body {
+    margin: auto 0;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    padding: 6px;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+  }
+  .Toastify__toast-body > div:last-child {
+    word-break: break-word;
+    -ms-flex: 1;
+    flex: 1;
+  }
+
+  .Toastify--animate {
+    animation-fill-mode: both;
+    animation-duration: 0.7s;
+  }
+
+  @media only screen and (max-width: 480px) {
+    .Toastify__toast {
+      margin-bottom: 0;
+      border-radius: 0;
+    }
+  }
+
+  @keyframes Toastify__trackProgress {
+    0% {
+      transform: scaleX(1);
+    }
+    100% {
+      transform: scaleX(0);
+    }
+  }
+
+  .Toastify__progress-bar--animated {
+    animation: Toastify__trackProgress linear 1 forwards;
+  }
+  .Toastify__progress-bar--controlled {
+    transition: transform 0.2s;
+  }
+  .Toastify__progress-bar--rtl {
+    right: 0;
+    left: initial;
+    transform-origin: right;
+  }
+
+  @keyframes Toastify__bounceInRight {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    from {
+      opacity: 0;
+      transform: translate3d(3000px, 0, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(-25px, 0, 0);
+    }
+    75% {
+      transform: translate3d(10px, 0, 0);
+    }
+    90% {
+      transform: translate3d(-5px, 0, 0);
+    }
+    to {
+      transform: none;
+    }
+  }
+  @keyframes Toastify__bounceOutRight {
+    20% {
+      opacity: 1;
+      transform: translate3d(-20px, 0, 0);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(2000px, 0, 0);
+    }
+  }
+  @keyframes Toastify__bounceInLeft {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    0% {
+      opacity: 0;
+      transform: translate3d(-3000px, 0, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(25px, 0, 0);
+    }
+    75% {
+      transform: translate3d(-10px, 0, 0);
+    }
+    90% {
+      transform: translate3d(5px, 0, 0);
+    }
+    to {
+      transform: none;
+    }
+  }
+  @keyframes Toastify__bounceOutLeft {
+    20% {
+      opacity: 1;
+      transform: translate3d(20px, 0, 0);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(-2000px, 0, 0);
+    }
+  }
+  @keyframes Toastify__bounceInUp {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    from {
+      opacity: 0;
+      transform: translate3d(0, 3000px, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(0, -20px, 0);
+    }
+    75% {
+      transform: translate3d(0, 10px, 0);
+    }
+    90% {
+      transform: translate3d(0, -5px, 0);
+    }
+    to {
+      transform: translate3d(0, 0, 0);
+    }
+  }
+  @keyframes Toastify__bounceOutUp {
+    20% {
+      transform: translate3d(0, -10px, 0);
+    }
+    40%,
+    45% {
+      opacity: 1;
+      transform: translate3d(0, 20px, 0);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(0, -2000px, 0);
+    }
+  }
+  @keyframes Toastify__bounceInDown {
+    from,
+    60%,
+    75%,
+    90%,
+    to {
+      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    }
+    0% {
+      opacity: 0;
+      transform: translate3d(0, -3000px, 0);
+    }
+    60% {
+      opacity: 1;
+      transform: translate3d(0, 25px, 0);
+    }
+    75% {
+      transform: translate3d(0, -10px, 0);
+    }
+    90% {
+      transform: translate3d(0, 5px, 0);
+    }
+    to {
+      transform: none;
+    }
+  }
+  @keyframes Toastify__bounceOutDown {
+    20% {
+      transform: translate3d(0, 10px, 0);
+    }
+    40%,
+    45% {
+      opacity: 1;
+      transform: translate3d(0, -20px, 0);
+    }
+    to {
+      opacity: 0;
+      transform: translate3d(0, 2000px, 0);
+    }
+  }
+  .Toastify__bounce-enter--top-left,
+  .Toastify__bounce-enter--bottom-left {
+    animation-name: Toastify__bounceInLeft;
+  }
+  .Toastify__bounce-enter--top-right,
+  .Toastify__bounce-enter--bottom-right {
+    animation-name: Toastify__bounceInRight;
+  }
+  .Toastify__bounce-enter--top-center {
+    animation-name: Toastify__bounceInDown;
+  }
+  .Toastify__bounce-enter--bottom-center {
+    animation-name: Toastify__bounceInUp;
+  }
+
+  .Toastify__bounce-exit--top-left,
+  .Toastify__bounce-exit--bottom-left {
+    animation-name: Toastify__bounceOutLeft;
+  }
+  .Toastify__bounce-exit--top-right,
+  .Toastify__bounce-exit--bottom-right {
+    animation-name: Toastify__bounceOutRight;
+  }
+  .Toastify__bounce-exit--top-center {
+    animation-name: Toastify__bounceOutUp;
+  }
+  .Toastify__bounce-exit--bottom-center {
+    animation-name: Toastify__bounceOutDown;
+  }
+`;

package/dist/styles/components/components/StepMarker/index.d.ts

@@ -0,0 +1,4 @@
+export declare const StepMarkerActiveContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepMarkerActiveOuterContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepMarkerGradientContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StepMarkerInactiveContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/styles/components/components/StepMarker/index.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+import { backgroundColors, elementColors } from '@sphereon/ui-components.core';
+import { gradientColors } from '../../../colors';
+export const StepMarkerActiveContainerStyled = styled.div `
+  width: 50px;
+  height: 50px;
+  background: ${gradientColors[100]};
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const StepMarkerActiveOuterContainerStyled = styled.div `
+  width: 46px;
+  height: 46px;
+  background-color: ${backgroundColors.primaryLight};
+  border-radius: 23px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const StepMarkerGradientContainerStyled = styled.div `
+  width: 42px;
+  height: 42px;
+  background: ${gradientColors['100']};
+  border-radius: 21px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+export const StepMarkerInactiveContainerStyled = styled.div `
+  width: 42px;
+  height: 42px;
+  background-color: ${elementColors.lightGrey};
+  border-radius: 25px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;

package/dist/styles/components/components/buttons/index.d.ts

@@ -0,0 +1 @@
+export declare const ButtonFlexRowStyled: import("styled-components").StyledComponent<"button", any, {}, never>;

package/dist/styles/components/components/buttons/index.js

@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+export const ButtonFlexRowStyled = styled('button') `
+  flex-direction: row;
+`;

package/dist/styles/components/components/index.d.ts

@@ -1,12 +1,27 @@
+export * from './buttons';
+export * from './DropDownListItem';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';
 export * from './SSIPrimaryButton';
 export * from './SSISecondaryButton';
 export * from './SSIIconButton';
-export * from './SSIDropDownList';
+export * from './DropDownList';
 export * from './SSITypeLabel';
 export * from './SSITableViewHeader';
 export * from './SSITableView';
 export * from './SSITabViewHeader';
 export * from './SSITabView';
+export * from './SSIToast';
+export * from './SSIToastContainer';
+export * from './SSIProfileIcon';
+export * from './SSIHoverText';
+export * from './SSICheckbox';
+export * from './ProgressStepIndicator';
+export * from './StepMarker';
+export * from './FileSelectionField';
+export * from './DragAndDropBox';
+export * from './PassportPhotoControl';
+export * from './CredentialIssuanceWizardView';
+export * from './Pagination';
+export * from './CredentialViewItem';

package/dist/styles/components/components/index.js

@@ -1,12 +1,27 @@
+export * from './buttons';
+export * from './DropDownListItem';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';
 export * from './SSIPrimaryButton';
 export * from './SSISecondaryButton';
 export * from './SSIIconButton';
-export * from './SSIDropDownList';
+export * from './DropDownList';
 export * from './SSITypeLabel';
 export * from './SSITableViewHeader';
 export * from './SSITableView';
 export * from './SSITabViewHeader';
 export * from './SSITabView';
+export * from './SSIToast';
+export * from './SSIToastContainer';
+export * from './SSIProfileIcon';
+export * from './SSIHoverText';
+export * from './SSICheckbox';
+export * from './ProgressStepIndicator';
+export * from './StepMarker';
+export * from './FileSelectionField';
+export * from './DragAndDropBox';
+export * from './PassportPhotoControl';
+export * from './CredentialIssuanceWizardView';
+export * from './Pagination';
+export * from './CredentialViewItem';

package/dist/styles/components/index.d.ts

@@ -1,3 +1,2 @@
 export * from './containers';
 export * from './components';
-export * from './fonts';

package/dist/styles/components/index.js

@@ -1,3 +1,2 @@
 export * from './containers';
 export * from './components';
-export * from './fonts';

package/dist/styles/css/index.d.ts

@@ -1,7 +1,11 @@
 export declare const SSITextH1Css: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH1SemiBoldCss: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH2Css: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH2SemiBoldStyledCss: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH3Css: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH4Css: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH4SemiBoldCss: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH5Css: import("styled-components").FlattenSimpleInterpolation;
 export declare const SSITextH6Css: import("styled-components").FlattenSimpleInterpolation;
+export declare const SSITextH7RegularCss: import("styled-components").FlattenSimpleInterpolation;
+export declare const gradient100TextCss: import("styled-components").FlattenSimpleInterpolation;

package/dist/styles/css/index.js

@@ -1,5 +1,6 @@
 import { css } from 'styled-components';
 import { fontStyle } from '../typography';
+import { gradientColors } from '../colors';
 export const SSITextH1Css = css `
   font-family: ${fontStyle.h1Regular.fontFamily};
   font-size: ${fontStyle.h1Regular.fontSize}px;
@@ -7,6 +8,13 @@ export const SSITextH1Css = css `
   line-height: ${fontStyle.h1Regular.lineHeight}px;
   height: auto;
 `;
+export const SSITextH1SemiBoldCss = css `
+  font-family: ${fontStyle.h1SemiBold.fontFamily};
+  font-size: ${fontStyle.h1SemiBold.fontSize}px;
+  font-weight: ${fontStyle.h1SemiBold.fontWeight};
+  line-height: ${fontStyle.h1SemiBold.lineHeight}px;
+  height: auto;
+`;
 export const SSITextH2Css = css `
   font-family: ${fontStyle.h2Regular.fontFamily};
   font-size: ${fontStyle.h2Regular.fontSize}px;
@@ -14,6 +22,13 @@ export const SSITextH2Css = css `
   line-height: ${fontStyle.h2Regular.lineHeight}px;
   height: auto;
 `;
+export const SSITextH2SemiBoldStyledCss = css `
+  font-family: ${fontStyle.h2SemiBold.fontFamily};
+  font-size: ${fontStyle.h2SemiBold.fontSize}px;
+  font-weight: ${fontStyle.h2SemiBold.fontWeight};
+  line-height: ${fontStyle.h2SemiBold.lineHeight}px;
+  height: auto;
+`;
 export const SSITextH3Css = css `
   font-family: ${fontStyle.h3Regular.fontFamily};
   font-size: ${fontStyle.h3Regular.fontSize}px;
@@ -49,3 +64,16 @@ export const SSITextH6Css = css `
   line-height: ${fontStyle.h6.lineHeight}px;
   height: auto;
 `;
+export const SSITextH7RegularCss = css `
+  font-family: ${fontStyle.h7Regular.fontFamily};
+  font-size: ${fontStyle.h7Regular.fontSize}px;
+  font-weight: ${fontStyle.h7Regular.fontWeight};
+  line-height: ${fontStyle.h7Regular.lineHeight}px;
+  height: auto;
+`;
+export const gradient100TextCss = css `
+  background: ${gradientColors['100']};
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`;

package/dist/styles/fonts/index.d.ts

@@ -0,0 +1,16 @@
+export declare const SSITextH1Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH1SemiBoldStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH1SemiBoldLightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH2Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH2SemiBoldStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH3Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH3LightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH4Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH4SemiBoldStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH4LightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH4SemiBoldLightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH5Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH5LightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH6Styled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH6LightStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITextH7RegularStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/styles/fonts/index.js

@@ -0,0 +1,61 @@
+import styled from 'styled-components';
+import { fontColors } from '@sphereon/ui-components.core';
+import { SSITextH1Css, SSITextH1SemiBoldCss, SSITextH2Css, SSITextH2SemiBoldStyledCss, SSITextH3Css, SSITextH4Css, SSITextH4SemiBoldCss, SSITextH5Css, SSITextH6Css, SSITextH7RegularCss, } from '../css';
+export const SSITextH1Styled = styled.div `
+  ${SSITextH1Css};
+  color: ${fontColors.dark};
+`;
+export const SSITextH1SemiBoldStyled = styled.div `
+  ${SSITextH1SemiBoldCss};
+  color: ${fontColors.dark};
+`;
+export const SSITextH1SemiBoldLightStyled = styled(SSITextH1SemiBoldStyled) `
+  color: ${fontColors.light};
+`;
+export const SSITextH2Styled = styled.div `
+  ${SSITextH2Css};
+  color: ${fontColors.dark};
+`;
+export const SSITextH2SemiBoldStyled = styled.div `
+  ${SSITextH2SemiBoldStyledCss};
+  color: ${fontColors.dark};
+`;
+export const SSITextH3Styled = styled.div `
+  ${SSITextH3Css};
+  color: ${fontColors.dark};
+`;
+export const SSITextH3LightStyled = styled(SSITextH3Styled) `
+  color: ${fontColors.light};
+`;
+export const SSITextH4Styled = styled.div `
+  ${SSITextH4Css};
+  color: ${fontColors.dark};
+`;
+export const SSITextH4SemiBoldStyled = styled.div `
+  ${SSITextH4SemiBoldCss};
+  color: ${fontColors.dark};
+`;
+export const SSITextH4LightStyled = styled(SSITextH4Styled) `
+  color: ${fontColors.light};
+`;
+export const SSITextH4SemiBoldLightStyled = styled(SSITextH4SemiBoldStyled) `
+  color: ${fontColors.light};
+`;
+export const SSITextH5Styled = styled.div `
+  ${SSITextH5Css};
+  color: ${fontColors.dark};
+`;
+export const SSITextH5LightStyled = styled(SSITextH5Styled) `
+  color: ${fontColors.light};
+`;
+export const SSITextH6Styled = styled.div `
+  ${SSITextH6Css};
+  color: ${fontColors.dark};
+`;
+export const SSITextH6LightStyled = styled(SSITextH6Styled) `
+  color: ${fontColors.light};
+`;
+export const SSITextH7RegularStyled = styled.div `
+  ${SSITextH7RegularCss};
+  color: ${fontColors.dark};
+`;

package/dist/styles/index.d.ts

@@ -0,0 +1,4 @@
+export * from './typography';
+export * from './css';
+export * from './components';
+export * from './fonts';

package/dist/styles/index.js

@@ -0,0 +1,4 @@
+export * from './typography';
+export * from './css';
+export * from './components';
+export * from './fonts';

package/dist/styles/typography.js

@@ -72,10 +72,22 @@ export const fontStyle = {
         fontWeight: fontWeight[400],
         lineHeight: lineHeight[100],
     },
+    h7Regular: {
+        fontFamily: 'Poppins',
+        fontSize: fontSize[400],
+        fontWeight: fontWeight[400],
+        lineHeight: lineHeight[400],
+    },
     h7SemiBold: {
         fontFamily: 'Poppins',
         fontSize: fontSize[400],
         fontWeight: fontWeight[600],
         lineHeight: lineHeight[400],
     },
+    Regular64: {
+        fontFamily: 'Poppins',
+        fontSize: fontSize[64],
+        fontWeight: fontWeight[600],
+        lineHeight: lineHeight[64],
+    },
 };

package/dist/types/button/index.d.ts

@@ -0,0 +1,8 @@
+import { ButtonIcon } from '@sphereon/ui-components.core';
+export type Button = {
+    caption: string;
+    onClick: (opts?: any) => Promise<void>;
+    icon?: ButtonIcon;
+    fontColor?: string;
+    disabled?: boolean;
+};

package/dist/types/button/index.js

@@ -0,0 +1 @@
+export {};

package/dist/types/field/index.d.ts

@@ -0,0 +1,21 @@
+export declare enum AssetFilePermission {
+    PUBLIC = "public",
+    PRIVATE = "private"
+}
+export type ValueSelection = {
+    label: string;
+    value: string;
+};
+export declare enum FileSelectionFieldType {
+    FILE = "file",
+    IMAGE = "image"
+}
+export type PassportPhoto = {
+    file: File;
+    base64Uri: string;
+};
+export type PassportPhotoControlData = {
+    fileName: string;
+    mimeType: string;
+    base64Uri: string;
+};

package/dist/types/field/index.js

@@ -0,0 +1,10 @@
+export var AssetFilePermission;
+(function (AssetFilePermission) {
+    AssetFilePermission["PUBLIC"] = "public";
+    AssetFilePermission["PRIVATE"] = "private";
+})(AssetFilePermission || (AssetFilePermission = {}));
+export var FileSelectionFieldType;
+(function (FileSelectionFieldType) {
+    FileSelectionFieldType["FILE"] = "file";
+    FileSelectionFieldType["IMAGE"] = "image";
+})(FileSelectionFieldType || (FileSelectionFieldType = {}));

package/dist/types/index.d.ts

@@ -1 +1,6 @@
-export * from './component';
+export * from './button';
+export * from './table';
+export * from './toast';
+export * from './indicator';
+export * from './field';
+export * from './view';

package/dist/types/index.js

@@ -1 +1,6 @@
-export * from './component';
+export * from './button';
+export * from './table';
+export * from './toast';
+export * from './indicator';
+export * from './field';
+export * from './view';