@stokr/components-library 3.0.41 → 3.0.43

package/dist/components/Header/Header.js

@@ -298,7 +298,15 @@ function HeaderView({
       ] }),
       /* @__PURE__ */ jsxs(MobileMenu, { isActive: currentActiveMenu === "main", withSidebar, children: [
         /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(MobileMenuPart, { withPadding: true, children: /* @__PURE__ */ jsx(MenuNav, { mobile: true, children: /* @__PURE__ */ jsxs("ul", { children: [
-          /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(MobileMenuLink, { to: newPlatformUrl + "/featured-assets", "data-cy": "invest-nav-link", children: "Invest" }) }),
+          /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(
+            MobileMenuLink,
+            {
+              to: newPlatformUrl + "/featured-assets",
+              "data-cy": "invest-nav-link",
+              onClick: () => toggleMenu("main"),
+              children: "Invest"
+            }
+          ) }),
           /* @__PURE__ */ jsx(
             RenderSubMenu,
             {
@@ -323,7 +331,7 @@ function HeaderView({
               }
             }
           ),
-          /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(MobileMenuLink, { to: newPlatformUrl + "/team", children: "Team" }) })
+          /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(MobileMenuLink, { to: newPlatformUrl + "/team", onClick: () => toggleMenu("main"), children: "Team" }) })
         ] }) }) }) }),
         hasLoggedInSession(user) ? /* @__PURE__ */ jsxs(Fragment, { children: [
           !signupFlow && /* @__PURE__ */ jsx(MobileMenuPart, { withPadding: true, flexColumn: true, borderTop: true, children: /* @__PURE__ */ jsx(MenuNav, { mobile: true, children: /* @__PURE__ */ jsx("ul", { children: isAdmin ? /* @__PURE__ */ jsx(Fragment, { children: isVentureDashboard ? /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(stdin_default$1, { to: "/settings", children: "Settings" }) }) : /* @__PURE__ */ jsx(MobileMenuItem, { children: /* @__PURE__ */ jsx(stdin_default$1, { to: getConfig("adminUrl"), onClick: () => toggleMenu("main"), children: "Dashboard" }) }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [

package/dist/components/IdentityInfo/IdentityInfo.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import "react";
+import PropTypes from "prop-types";
+import { FlagFor } from "../Country/CountrySelect.js";
+import { CountryRowRoot, FlagSlot, CountryCode, ResidencyItemRoot, FieldLabel, FieldValue, SectionHeaderRoot, SectionHeaderIconWrap } from "./IdentityInfo.styles.js";
+const IdentitySectionHeader = ({ icon, count, children, style, className }) => /* @__PURE__ */ jsxs(SectionHeaderRoot, { style, className, children: [
+  icon && /* @__PURE__ */ jsx(SectionHeaderIconWrap, { children: icon }),
+  /* @__PURE__ */ jsxs("span", { children: [
+    children,
+    count !== void 0 && count !== null && ` (${count})`
+  ] })
+] });
+IdentitySectionHeader.propTypes = {
+  icon: PropTypes.node,
+  count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  children: PropTypes.node.isRequired,
+  style: PropTypes.object,
+  className: PropTypes.string
+};
+const IdentityCountryRow = ({ code, name, showCode = false, style, className }) => /* @__PURE__ */ jsxs(CountryRowRoot, { style, className, children: [
+  /* @__PURE__ */ jsx(FlagSlot, { children: /* @__PURE__ */ jsx(FlagFor, { code }) }),
+  /* @__PURE__ */ jsx("span", { children: name }),
+  showCode && /* @__PURE__ */ jsx(CountryCode, { children: code })
+] });
+IdentityCountryRow.propTypes = {
+  code: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  showCode: PropTypes.bool,
+  style: PropTypes.object,
+  className: PropTypes.string
+};
+const IdentityResidencyItem = ({
+  country,
+  tin,
+  reason,
+  residencyLabel = "Residency",
+  tinLabel = "TIN",
+  reasonLabel = "Reason details",
+  style,
+  className
+}) => /* @__PURE__ */ jsxs(ResidencyItemRoot, { style, className, children: [
+  /* @__PURE__ */ jsx(FieldLabel, { children: residencyLabel }),
+  /* @__PURE__ */ jsx(IdentityCountryRow, { code: country.code, name: country.name }),
+  /* @__PURE__ */ jsx(FieldLabel, { style: { marginTop: 8 }, children: tinLabel }),
+  /* @__PURE__ */ jsx(FieldValue, { children: tin }),
+  reason && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(FieldLabel, { style: { marginTop: 8 }, children: reasonLabel }),
+    /* @__PURE__ */ jsx(FieldValue, { children: reason })
+  ] })
+] });
+IdentityResidencyItem.propTypes = {
+  country: PropTypes.shape({
+    code: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired
+  }).isRequired,
+  tin: PropTypes.node.isRequired,
+  reason: PropTypes.node,
+  residencyLabel: PropTypes.node,
+  tinLabel: PropTypes.node,
+  reasonLabel: PropTypes.node,
+  style: PropTypes.object,
+  className: PropTypes.string
+};
+export {
+  IdentityCountryRow,
+  FieldLabel as IdentityFieldLabel,
+  FieldValue as IdentityFieldValue,
+  IdentityResidencyItem,
+  IdentitySectionHeader
+};

package/dist/components/IdentityInfo/IdentityInfo.styles.js

@@ -0,0 +1,82 @@
+import styled from "styled-components";
+import { colors } from "../../styles/colors.js";
+const SectionHeaderRoot = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  color: ${colors.blue};
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 600;
+  letter-spacing: 0.6px;
+  margin-bottom: 12px;
+`;
+const SectionHeaderIconWrap = styled.span`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+
+  svg {
+    width: 18px;
+    height: 18px;
+  }
+`;
+const FieldLabel = styled.p`
+  margin: 0;
+  font-size: 11px;
+  line-height: 20px;
+  letter-spacing: 2px;
+  text-transform: uppercase;
+  color: ${colors.black};
+  font-weight: 400;
+`;
+const FieldValue = styled.p`
+  margin: 0 0 4px;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  color: ${colors.black};
+  letter-spacing: 0.5px;
+`;
+const CountryRowRoot = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 0;
+  font-size: 14px;
+  line-height: 20px;
+  font-weight: 600;
+  color: ${colors.black};
+  letter-spacing: 0.5px;
+`;
+const FlagSlot = styled.span`
+  display: inline-flex;
+  align-items: center;
+  width: 22px;
+  height: auto;
+  flex-shrink: 0;
+  border-radius: 4px;
+  overflow: hidden;
+`;
+const CountryCode = styled.span`
+  font-family: monospace;
+  font-size: 12px;
+  color: ${colors.grey2};
+  margin-left: auto;
+`;
+const ResidencyItemRoot = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 16px;
+`;
+export {
+  CountryCode,
+  CountryRowRoot,
+  FieldLabel,
+  FieldValue,
+  FlagSlot,
+  ResidencyItemRoot,
+  SectionHeaderIconWrap,
+  SectionHeaderRoot
+};

package/dist/components/Input/Select.js

@@ -97,6 +97,7 @@ const Select = (props) => {
     multiple = false,
     menuHeight,
     selectedLabel = "Selected",
+    floatingLabel = true,
     formatCreateLabel,
     dataCy,
     onChange,
@@ -157,9 +158,15 @@ const Select = (props) => {
     }
     return options?.find((o) => o.value === value) || null;
   }, [multiple, creatable, value, options]);
+  const hasValue = useMemo(() => {
+    if (multiple) return currentValue.length > 0;
+    return currentValue != null && currentValue.value !== "";
+  }, [multiple, currentValue]);
+  const isLabelUp = floatingLabel ? hasFocus || hasValue : Boolean(label);
+  const effectivePlaceholder = label ? hasFocus && placeholder ? placeholder : "" : placeholder;
   return /* @__PURE__ */ jsxs(Wrapper, { children: [
     /* @__PURE__ */ jsx(IoniconsStyles, {}),
-    label && /* @__PURE__ */ jsx(Label, { isUp: Boolean(label), active: hasFocus, error: error && touched, htmlFor: id, children: label }),
+    label && /* @__PURE__ */ jsx(Label, { isUp: isLabelUp, active: hasFocus, error: error && touched, htmlFor: id, children: label }),
     /* @__PURE__ */ jsx(
       SelectComponent,
       {
@@ -168,7 +175,7 @@ const Select = (props) => {
         name,
         options,
         value: currentValue,
-        placeholder,
+        placeholder: effectivePlaceholder,
         isMulti: multiple,
         isDisabled: disabled,
         isSearchable: search,
@@ -242,6 +249,8 @@ Select.propTypes = {
   menuHeight: PropTypes.number,
   /** Heading shown above the chips list in multi mode (default: "Selected"). */
   selectedLabel: PropTypes.string,
+  /** Input-like floating label behavior: label starts in-field, moves up on focus/value. */
+  floatingLabel: PropTypes.bool,
   formatCreateLabel: PropTypes.func,
   onChange: PropTypes.func,
   onBlur: PropTypes.func,

package/dist/index.js

@@ -119,6 +119,7 @@ import { StepIndicator } from "./components/StepsProgress/StepIndicator.js";
 import { Layout } from "./components/Layout/Layout.js";
 import { AnimatedSpan, LoadingDots, StokrLoader, StokrLoaderBox, loaderGif } from "./components/StokrLoader/StokrLoader.js";
 import { InfoBox } from "./components/InfoBox/InfoBox.js";
+import { IdentityCountryRow, IdentityResidencyItem, IdentitySectionHeader } from "./components/IdentityInfo/IdentityInfo.js";
 import { Inner, Outer, ThumbH, ThumbV, TrackH, TrackV } from "./components/ComponentScroll/ComponentScroll.styles.js";
 import { LoginModal } from "./components/LoginModal/LoginModal.js";
 import { CheckboxContext, CheckboxProvider, useCheckboxActions, useCheckboxes } from "./context/Checkbox/CheckboxContext.js";
@@ -185,6 +186,7 @@ import { FormContainer, FormError, FormField, FormInfo } from "./components/Form
 import { default as default24 } from "./components/SvgIcons/FourSvg.js";
 import { default as default25 } from "./components/SvgIcons/Glassess.js";
 import { HeaderHo } from "./components/headerHo/HeaderHo.js";
+import { FieldLabel, FieldValue } from "./components/IdentityInfo/IdentityInfo.styles.js";
 import { Info } from "./components/icons/Info.js";
 import { Container as Container2, Icon as Icon3 } from "./components/InfoIcon/InfoIcon.styles.js";
 import { Label, InputWrap, Wrapper as Wrapper2 } from "./components/Input/Input.styles.js";
@@ -367,6 +369,11 @@ export {
   HeroVideoBlock,
   Icon,
   Icon2,
+  IdentityCountryRow,
+  FieldLabel as IdentityFieldLabel,
+  FieldValue as IdentityFieldValue,
+  IdentityResidencyItem,
+  IdentitySectionHeader,
   ImageSlide,
   ImageSlideWrapper,
   Info,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stokr/components-library",
-  "version": "3.0.41",
+  "version": "3.0.43",
   "description": "STOKR - Components Library",
   "author": "Bilal Hodzic <bilal@stokr.io>",
   "license": "MIT",