rbro-tat-uds 1.6.36 → 2.0.1

package/build/cjs/components/ImageCard/ImageCard.cjs

@@ -0,0 +1,162 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var Button = require('../Button/Button.cjs');
+var Icon = require('../Icon/Icon.cjs');
+var utils = require('../../utils');
+
+const _constraint_gap = [0, 2, 4, 8];
+const _constraint_fontsizes = [14, 16, 18, 20, 24];
+const _constraint_fontweight = [200, 300, 400, 500, 700, 800];
+const ImageCardStyled = styled.div`
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+
+  overflow: ${(props) => props.$contained ? "hidden" : "initial"};
+
+  width: ${(props) => props.$width && typeof props.$width === "string" ? props.$width : "100%"};
+
+  background-color: ${(props) => props.$backgroundColor ? utils.colors[props.$backgroundColor] : "white"};
+
+  border: ${(props) => props.$contained ? `1px solid ${utils.colors.gray_150}` : "none"};
+
+  & > img {
+    height: ${({ $imgHeight }) => $imgHeight && typeof $imgHeight === "string" ? $imgHeight : "80px"};
+    width: 100%;
+    object-fit: cover;
+    border-radius: ${(props) => props.$contained ? "0px" : "8px"};
+  }
+
+  & > div {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    padding: ${(props) => props.$contained ? "16px" : "12px 0px 0px 0px"};
+    height: 100%;
+
+    & > div {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: ${(props) => typeof props.$gap === "number" && _constraint_gap.includes(props.$gap) ? props.$gap + "px" : "8px"};
+
+      & > div {
+        ${(props) => props.$rigthIcon ? styled.css`
+                display: flex;
+                align-items: flex-start;
+                gap: 16px;
+
+                & > h5 {
+                  flex: 1;
+                }
+              ` : styled.css`
+                display: block;
+              `}
+
+        & > h5 {
+          margin: 0px;
+          padding: 0px;
+          color: ${(props) => props.$titleColor ? utils.colors[props.$titleColor] : utils.colors.gray_950};
+          font-size: ${(props) => props.$titleFontSize && typeof props.$titleFontSize === "number" && _constraint_fontsizes.includes(props.$titleFontSize) ? props.$titleFontSize + "px" : "18px"};
+          font-weight: ${(props) => props.$titleFontWeight && typeof props.$titleFontWeight === "number" && _constraint_fontweight.includes(props.$titleFontWeight) ? props.$titleFontWeight : 500};
+          line-height: 120%;
+        }
+      }
+
+      & > span {
+        margin: 0px;
+        padding: 0px;
+        color: ${(props) => props.$textColor ? utils.colors[props.$textColor] : utils.colors.gray_950};
+        font-size: ${(props) => props.$textFontSize && typeof props.$textFontSize === "number" && _constraint_fontsizes.includes(props.$textFontSize) ? props.$textFontSize + "px" : "16px"};
+        font-weight: ${(props) => props.$textFontWeight && typeof props.$textFontWeight === "number" && _constraint_fontweight.includes(props.$textFontWeight) ? props.$textFontWeight : 400};
+        line-height: 120%;
+      }
+    }
+  }
+`;
+const ImageCard = ({
+  gap = 8,
+  title = "Title",
+  text = "Text",
+  img = void 0,
+  backgroundColor = "white",
+  titleColor = "gray_950",
+  textColor = "gray_950",
+  titleFontSize = 18,
+  textFontSize = 16,
+  titleFontWeight = 500,
+  textFontWeight = 400,
+  width,
+  imgHeight,
+  showButton = false,
+  buttonLabel = "Afla mai multe",
+  buttonOnClick,
+  contained = true,
+  rigthIcon,
+  rightIconColor = "info_700",
+  rightIconOnClick,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    ImageCardStyled,
+    {
+      $gap: gap,
+      $backgroundColor: backgroundColor,
+      $titleColor: titleColor,
+      $textColor: textColor,
+      $titleFontSize: titleFontSize,
+      $textFontSize: textFontSize,
+      $titleFontWeight: titleFontWeight,
+      $textFontWeight: textFontWeight,
+      $width: width,
+      $imgHeight: imgHeight,
+      $contained: contained,
+      $rigthIcon: rigthIcon,
+      ...rest,
+      children: [
+        img && /* @__PURE__ */ jsxRuntime.jsx("img", { src: img, alt: "preview_image_card" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              title && /* @__PURE__ */ jsxRuntime.jsx("h5", { children: title }),
+              rigthIcon && /* @__PURE__ */ jsxRuntime.jsx(
+                Icon.default,
+                {
+                  style: {
+                    cursor: "pointer"
+                  },
+                  icon: rigthIcon,
+                  size: 16,
+                  color: utils.colors[rightIconColor],
+                  onClick: rightIconOnClick
+                }
+              )
+            ] }),
+            text && /* @__PURE__ */ jsxRuntime.jsx("span", { children: text })
+          ] }),
+          showButton && /* @__PURE__ */ jsxRuntime.jsx(
+            Button.default,
+            {
+              onClick: buttonOnClick,
+              style: { width: "fit-content" },
+              intent: "info",
+              variant: "secondaryOutlined",
+              size: "small",
+              label: buttonLabel
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+
+exports.default = ImageCard;

package/build/cjs/components/ImageCard/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var ImageCard = require('./ImageCard.cjs');
+
+
+
+exports.default = ImageCard.default;

package/build/cjs/components/InPageTab/InPageTab.cjs

@@ -0,0 +1,69 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var utils = require('../../utils');
+
+const InPageTabStyled = styled.button`
+  appearance: none;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  height: 32px;
+  padding: 0px 12px;
+  border-radius: 9999px;
+  font-weight: 500;
+  font-size: 14px;
+
+  ${({ $selected }) => $selected ? styled.css`
+          background-color: ${utils.colors.info_700};
+          color: ${utils.colors.white};
+        ` : styled.css`
+          background-color: transparent;
+          color: ${utils.colors.info_700};
+          &:hover {
+            background-color: ${utils.colors.gray_60};
+          }
+          &:active {
+            background-color: ${utils.colors.gray_100};
+          }
+        `}
+
+  &:focus {
+    outline: 2px solid ${utils.colors.info_700_40};
+  }
+
+  &:disabled {
+    cursor: auto;
+    background-color: ${utils.colors.gray_100};
+    color: ${utils.colors.gray_600};
+  }
+`;
+const InPageTab = ({
+  selected = false,
+  label = "Label",
+  disabled = false,
+  buttonOnClick = () => {
+  },
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    InPageTabStyled,
+    {
+      onClick: buttonOnClick,
+      $selected: selected,
+      disabled,
+      type: "button",
+      ...props,
+      children: label
+    }
+  );
+};
+
+exports.default = InPageTab;

package/build/cjs/components/InPageTab/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var InPageTab = require('./InPageTab.cjs');
+
+
+
+exports.default = InPageTab.default;

package/build/cjs/components/InvestmentFundItem/InvestmentFundItem.cjs

@@ -0,0 +1,135 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var StepsBar = require('../StepsBar/StepsBar.cjs');
+var utils = require('../../utils');
+
+const InvestmentFundItemStyled = styled.div`
+  width: 100%;
+  cursor: pointer;
+  padding: 12px 16px;
+  min-height: ${({ $line1Text }) => $line1Text && $line1Text.length ? "79px" : "60px"};
+  display: flex;
+  height: auto;
+  flex-direction: column;
+  gap: 4px;
+  border-bottom: 1px solid ${utils.colors.gray_100};
+  background-color: ${utils.colors.white};
+
+  &[data-selected="true"] {
+    background-color: ${utils.colors.info_100};
+  }
+
+  & > div:nth-child(1) {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    gap: 2px;
+
+    & > span:nth-child(1) {
+      font-size: 14px;
+      font-weight: 700;
+      line-height: 120%;
+      color: ${utils.colors.gray_950};
+    }
+
+    & > span:nth-child(2) {
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 120%;
+      color: ${utils.colors.gray_950};
+    }
+  }
+
+  & > span {
+    font-size: 12px;
+    font-weight: 400;
+    color: ${utils.colors.gray_950};
+    width: fit-content;
+  }
+
+  & > div:last-child {
+    display: flex;
+    justify-content: ${({ $line2Text }) => $line2Text && $line2Text.length ? "space-between" : "flex-end"};
+    align-items: center;
+    gap: 2px;
+
+    & > span:nth-child(1) {
+      font-size: 12px;
+      font-weight: 400;
+      color: ${utils.colors.gray_950};
+    }
+
+    & > div {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+
+      & > span {
+        font-size: 12px;
+        font-weight: 400;
+        color: ${utils.colors.gray_950};
+      }
+
+      & > div {
+        display: flex;
+        align-items: center;
+        gap: 1px;
+
+        & > div {
+          width: 5px;
+          height: 11px;
+          background-color: ${utils.colors.gray_100};
+
+          &[data-active="true"] {
+            background-color: ${utils.colors.info_400};
+          }
+        }
+      }
+    }
+  }
+`;
+const InvestmentFundItem = ({
+  title = "",
+  currency = "RON",
+  line1Text = "",
+  line2Text = "",
+  riscLevel = 1,
+  selected = false,
+  buttonOnClick,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    InvestmentFundItemStyled,
+    {
+      onClick: buttonOnClick,
+      $line2Text: line2Text,
+      $line1Text: line1Text,
+      ...rest,
+      "data-selected": selected,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: title ?? "" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: currency ?? "RON" })
+        ] }),
+        line1Text && line1Text.length && /* @__PURE__ */ jsxRuntime.jsx("span", { children: line1Text }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          line2Text && line2Text.length && /* @__PURE__ */ jsxRuntime.jsx("span", { children: line2Text }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Risc:" }),
+            /* @__PURE__ */ jsxRuntime.jsx(StepsBar.default, { value: riscLevel, stepWidth: 5, height: 16, stepGap: 1 })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
+exports.default = InvestmentFundItem;

package/build/cjs/components/InvestmentFundItem/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var InvestmentFundItem = require('./InvestmentFundItem.cjs');
+
+
+
+exports.default = InvestmentFundItem.default;

package/build/cjs/components/LabeledText/LabeledText.cjs

@@ -0,0 +1,70 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var utils = require('../../utils');
+
+const _constraint_fontweight = [200, 300, 400, 500, 700, 800];
+const _constraint_textfontsize = [14, 16, 18, 20, 24];
+const _constraint_labelfontsize = [12, 14, 16, 18];
+const LabeledTextStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${(props) => typeof props.$gap === "number" && props.$gap + "px"};
+
+  & > span:first-child {
+    color: ${(props) => utils.colors[props.$labelColor]};
+    font-size: ${(props) => typeof props.$labelFontSize === "number" && _constraint_labelfontsize.includes(props.$labelFontSize) ? props.$labelFontSize + "px" : "14px"};
+    font-weight: 400;
+    line-height: 120%;
+    text-align: ${(props) => props.$align && ["center", "left", "right"].includes(props.$align) && props.$align};
+  }
+
+  & > span:last-child {
+    color: ${(props) => utils.colors[props.$textColor]};
+    font-size: ${(props) => typeof props.$textFontSize === "number" && _constraint_textfontsize.includes(props.$textFontSize) ? props.$textFontSize + "px" : "16px"};
+    font-weight: ${(props) => typeof props.$textFontWeight === "number" && _constraint_fontweight.includes(props.$textFontWeight) ? props.$textFontWeight : 500};
+    line-height: 120%;
+    text-align: ${(props) => props.$align && ["center", "left", "right"].includes(props.$align) && props.$align};
+  }
+`;
+const LabeledText = ({
+  text = "Text",
+  label = "",
+  gap = 2,
+  align = "left",
+  labelFontSize = 12,
+  textFontSize = 14,
+  textFontWeight = 500,
+  labelColor = "gray_700",
+  textColor = "gray_950",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    LabeledTextStyled,
+    {
+      $text: text,
+      $label: label,
+      $gap: gap,
+      $align: align,
+      $labelFontSize: labelFontSize,
+      $textFontSize: textFontSize,
+      $textFontWeight: textFontWeight,
+      $labelColor: labelColor,
+      $textColor: textColor,
+      ...rest,
+      children: [
+        label && typeof label === "string" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+        typeof text === "string" && /* @__PURE__ */ jsxRuntime.jsx("span", { children: text })
+      ]
+    }
+  );
+};
+
+exports.default = LabeledText;

package/build/cjs/components/LabeledText/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var LabeledText = require('./LabeledText.cjs');
+
+
+
+exports.default = LabeledText.default;

package/build/cjs/components/LabeledTextInLine/LabeledTextInLine.cjs

@@ -0,0 +1,85 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var utils = require('../../utils');
+var Icon = require('../Icon/Icon.cjs');
+
+const LabeledTextInLineStyled = styled.div`
+  display: flex;
+  align-items: flex-start;
+
+  & > div {
+    flex: 1;
+    margin-left: ${({ $leftGap, $icon }) => $icon && ($leftGap && [4, 8, 12, 16].includes($leftGap) ? `${$leftGap}px` : "8px")};
+
+    & > span {
+      & > .x7k9m2p4n8 {
+        font-size: ${({ $labelFontSize }) => $labelFontSize && [12, 14, 16, 18, 20, 24].includes($labelFontSize) ? `${$labelFontSize}px` : "12px"};
+        font-weight: ${({ $labelFontWeight }) => $labelFontWeight && [200, 300, 400, 500, 700, 800].includes($labelFontWeight) ? `${$labelFontWeight}` : "400"};
+        color: ${({ $labelColor }) => $labelColor && utils.colors[$labelColor]};
+        margin-right: ${({ $rightGap }) => $rightGap && [4, 8, 12, 16].includes($rightGap) ? `${$rightGap}px` : "8px"};
+      }
+
+      & > .x7k9m2pj28 {
+        font-size: ${({ $textFontSize }) => $textFontSize && [12, 14, 16, 18, 20, 24].includes($textFontSize) ? `${$textFontSize}px` : "12px"};
+        font-weight: ${({ $textFontWeight }) => $textFontWeight && [200, 300, 400, 500, 700, 800].includes($textFontWeight) ? `${$textFontWeight}` : "400"};
+        color: ${({ $textColor }) => $textColor && utils.colors[$textColor]};
+      }
+    }
+  }
+`;
+const LabeledTextInLine = ({
+  icon = "bundle-of-money",
+  iconColor = "gray_950",
+  iconSize = 18,
+  leftGap = 8,
+  rightGap = 8,
+  label = "Label",
+  text = "Text",
+  labelFontSize = 16,
+  labelFontWeight = 400,
+  labelColor = "gray_950",
+  textFontSize = 16,
+  textFontWeight = 500,
+  textColor = "gray_950",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    LabeledTextInLineStyled,
+    {
+      $leftGap: leftGap,
+      $rightGap: rightGap,
+      $labelFontSize: labelFontSize,
+      $labelFontWeight: labelFontWeight,
+      $labelColor: labelColor,
+      $textFontSize: textFontSize,
+      $textFontWeight: textFontWeight,
+      $textColor: textColor,
+      $icon: icon,
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
+          Icon.default,
+          {
+            icon,
+            color: utils.colors[iconColor],
+            size: iconSize
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "x7k9m2p4n8", children: label }),
+          text && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "x7k9m2pj28", children: text })
+        ] }) })
+      ]
+    }
+  );
+};
+
+exports.default = LabeledTextInLine;

package/build/cjs/components/LabeledTextInLine/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var LabeledTextInLine = require('./LabeledTextInLine.cjs');
+
+
+
+exports.default = LabeledTextInLine.default;

package/build/cjs/components/Layout/Layout.cjs

@@ -0,0 +1,34 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var styled = require('styled-components');
+var utils = require('../../utils');
+
+const StyledLayout = styled.div`
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+  font-size: 15px;
+  display: flex;
+  align-items: flex-start;
+  min-height: 100vh;
+  height: 100%;
+  position: relative;
+  background-color: ${(props) => utils.colors[props.$bgColor]};
+`;
+const Layout = ({
+  children,
+  bgColor = "gray_30",
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(StyledLayout, { $bgColor: bgColor, ...rest, children });
+};
+
+exports.default = Layout;

package/build/cjs/components/Layout/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Layout = require('./Layout.cjs');
+
+
+
+exports.default = Layout.default;

package/build/cjs/components/Logo/Logo.cjs

@@ -0,0 +1,32 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var RaiffeisenLogo = require('../../assets/icons/logo_contained_rounded.svg.cjs');
+
+const Logo = ({
+  size = 40,
+  fullWidth = false,
+  ...rest
+}) => {
+  const logoSizesClasses = {
+    24: 24,
+    32: 32,
+    36: 36,
+    40: 40,
+    48: 48
+  };
+  const _logoPropsComponent = {
+    ...rest,
+    width: fullWidth ? "100%" : size ? logoSizesClasses[size] : rest.width,
+    height: fullWidth ? "100%" : size ? logoSizesClasses[size] : rest.height
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(RaiffeisenLogo, { ..._logoPropsComponent });
+};
+
+exports.default = Logo;

package/build/cjs/components/Logo/index.cjs

@@ -0,0 +1,12 @@
+"use strict";
+"use client";
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var Logo = require('./Logo.cjs');
+
+
+
+exports.default = Logo.default;