@vtex/faststore-plugin-buyer-portal 1.3.46 → 1.3.47

package/CHANGELOG.md

@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [1.3.47] - 2025-12-19
+
+- Alternative Login Keys:
+  - Add auth setup drawer
+  - Update AddUserDrawer to support username
+  
 ## [1.3.46] - 2025-12-19
 
 ### Fixed
@@ -400,7 +406,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add CHANGELOG file
 - Add README file
 
-[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.46...HEAD
+[unreleased]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.47...HEAD
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.2.2...1.2.3
 [1.2.3]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.3
 [1.2.4]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.2.4
@@ -450,6 +456,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [1.3.36]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.35...v1.3.36
 [1.3.35]: https://github.com/vtex/faststore-plugin-buyer-portal/releases/tag/1.3.35
 
+[1.3.47]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.46...v1.3.47
 [1.3.46]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.45...v1.3.46
 [1.3.45]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.44...v1.3.45
 [1.3.44]: https://github.com/vtex/faststore-plugin-buyer-portal/compare/v1.3.43...v1.3.44

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vtex/faststore-plugin-buyer-portal",
-  "version": "1.3.46",
+  "version": "1.3.47",
   "description": "A plugin for faststore with buyer portal",
   "main": "index.js",
   "scripts": {

package/public/buyer-portal-icons.svg

@@ -538,26 +538,48 @@
     />
   </symbol>
 
-  <symbol id="CircleQuestionMark" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <symbol id="CircleQuestionMark" viewBox="0 0 256 256" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
     <path
       d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"
-      fill="currentColor"/>
+      fill="currentColor" />
   </symbol>
 
-  <symbol id="OpenNewTab" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <symbol id="OpenNewTab" width="20" height="20" viewBox="0 0 20 20" fill="none"
+    xmlns="http://www.w3.org/2000/svg">
     <g clip-path="url(#clip0_401_516)">
-    <mask id="mask0_401_516" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="20" height="20">
-    <rect width="20" height="20" fill="#D9D9D9"/>
-    </mask>
-    <g mask="url(#mask0_401_516)">
-    <path d="M4.16667 17.5C3.70833 17.5 3.31597 17.3368 2.98958 17.0104C2.66319 16.684 2.5 16.2917 2.5 15.8333V4.16667C2.5 3.70833 2.66319 3.31597 2.98958 2.98958C3.31597 2.66319 3.70833 2.5 4.16667 2.5H10V4.16667H4.16667V15.8333H15.8333V10H17.5V15.8333C17.5 16.2917 17.3368 16.684 17.0104 17.0104C16.684 17.3368 16.2917 17.5 15.8333 17.5H4.16667ZM8.08333 13.0833L6.91667 11.9167L14.6667 4.16667H11.6667V2.5H17.5V8.33333H15.8333V5.33333L8.08333 13.0833Z" fill="#1F1F1F"/>
-    </g>
+      <mask id="mask0_401_516" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0"
+        width="20" height="20">
+        <rect width="20" height="20" fill="#D9D9D9" />
+      </mask>
+      <g mask="url(#mask0_401_516)">
+        <path
+          d="M4.16667 17.5C3.70833 17.5 3.31597 17.3368 2.98958 17.0104C2.66319 16.684 2.5 16.2917 2.5 15.8333V4.16667C2.5 3.70833 2.66319 3.31597 2.98958 2.98958C3.31597 2.66319 3.70833 2.5 4.16667 2.5H10V4.16667H4.16667V15.8333H15.8333V10H17.5V15.8333C17.5 16.2917 17.3368 16.684 17.0104 17.0104C16.684 17.3368 16.2917 17.5 15.8333 17.5H4.16667ZM8.08333 13.0833L6.91667 11.9167L14.6667 4.16667H11.6667V2.5H17.5V8.33333H15.8333V5.33333L8.08333 13.0833Z"
+          fill="#1F1F1F" />
+      </g>
     </g>
     <defs>
-    <clipPath id="clip0_401_516">
-    <rect width="20" height="20" fill="white"/>
-    </clipPath>
+      <clipPath id="clip0_401_516">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
     </defs>
   </symbol>
-</svg>
 
+  <symbol id="Refresh" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8 16C5.76667 16 3.875 15.225 2.325 13.675C0.775 12.125 0 10.2333 0 8C0 5.76667 0.775 3.875 2.325 2.325C3.875 0.775 5.76667 0 8 0C9.15 0 10.25 0.2375 11.3 0.7125C12.35 1.1875 13.25 1.86667 14 2.75V0H16V7H9V5H13.2C12.6667 4.06667 11.9375 3.33333 11.0125 2.8C10.0875 2.26667 9.08333 2 8 2C6.33333 2 4.91667 2.58333 3.75 3.75C2.58333 4.91667 2 6.33333 2 8C2 9.66667 2.58333 11.0833 3.75 12.25C4.91667 13.4167 6.33333 14 8 14C9.28333 14 10.4417 13.6333 11.475 12.9C12.5083 12.1667 13.2333 11.2 13.65 10H15.75C15.2833 11.7667 14.3333 13.2083 12.9 14.325C11.4667 15.4417 9.83333 16 8 16Z"
+      fill="currentColor" />
+  </symbol>
+
+  <symbol id="Copy" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M7.5 14.9998C7.04167 14.9998 6.64931 14.8366 6.32292 14.5103C5.99653 14.1839 5.83333 13.7915 5.83333 13.3332V3.33317C5.83333 2.87484 5.99653 2.48248 6.32292 2.15609C6.64931 1.8297 7.04167 1.6665 7.5 1.6665H15C15.4583 1.6665 15.8507 1.8297 16.1771 2.15609C16.5035 2.48248 16.6667 2.87484 16.6667 3.33317V13.3332C16.6667 13.7915 16.5035 14.1839 16.1771 14.5103C15.8507 14.8366 15.4583 14.9998 15 14.9998H7.5ZM7.5 13.3332H15V3.33317H7.5V13.3332ZM4.16667 18.3332C3.70833 18.3332 3.31597 18.17 2.98958 17.8436C2.66319 17.5172 2.5 17.1248 2.5 16.6665V4.99984H4.16667V16.6665H13.3333V18.3332H4.16667Z"
+      fill="currentColor" />
+  </symbol>
+
+  <symbol id="2FAEnabled" viewBox="0 0 13 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6.5 16C4.625 15.5417 3.07292 14.4803 1.84375 12.8158C0.614583 11.1513 0 9.30292 0 7.27083V2.5L6.5 0L13 2.5V7.27083C13 9.30292 12.3854 11.1513 11.1562 12.8158C9.92708 14.4803 8.375 15.5417 6.5 16ZM4.5 10.5H8.5C8.64167 10.5 8.76042 10.4521 8.85625 10.3563C8.95208 10.2604 9 10.1417 9 10V7C9 6.85833 8.95208 6.73958 8.85625 6.64375C8.76042 6.54792 8.64167 6.5 8.5 6.5H8V6C8 5.5875 7.85271 5.23438 7.55812 4.94063C7.26354 4.64688 6.90938 4.5 6.49563 4.5C6.08188 4.5 5.72917 4.64688 5.4375 4.94063C5.14583 5.23438 5 5.5875 5 6V6.5H4.5C4.35833 6.5 4.23958 6.54792 4.14375 6.64375C4.04792 6.73958 4 6.85833 4 7V10C4 10.1417 4.04792 10.2604 4.14375 10.3563C4.23958 10.4521 4.35833 10.5 4.5 10.5ZM5.75 6.5V6C5.75 5.7875 5.82146 5.60938 5.96438 5.46562C6.10729 5.32187 6.28438 5.25 6.49563 5.25C6.70688 5.25 6.88542 5.32187 7.03125 5.46562C7.17708 5.60938 7.25 5.7875 7.25 6V6.5H5.75Z"
+      fill="#157BF4" />
+  </symbol>
+</svg>

package/src/features/org-units/clients/OrgUnitClient.ts

@@ -6,6 +6,7 @@ import type {
   OrgUnitSummaryData,
   OrgUnitSearchParams,
   OrgUnitSearchResponse,
+  OrgUnitSettings,
 } from "../types";
 
 export class OrgUnitClient extends Client {
@@ -124,6 +125,22 @@ export class OrgUnitClient extends Client {
       }
     );
   }
+
+  getOrgUnitSettings(unitId: string, cookie: string) {
+    return this.get<OrgUnitSettings>(`units/${unitId}/settings`, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
+
+  updateOrgUnitSettings(unitId: string, data: OrgUnitSettings, cookie: string) {
+    return this.patch<null, OrgUnitSettings>(`units/${unitId}/settings`, data, {
+      headers: {
+        Cookie: cookie,
+      },
+    });
+  }
 }
 
 const orgUnitClient = new OrgUnitClient();

package/src/features/org-units/components/AddAllToOrgUnitDropdown/AddAllToOrgUnitDropdown.tsx

@@ -18,7 +18,7 @@ import {
 import { useGetRolesOptions } from "../../../roles/hooks";
 import { BasicDropdownMenu, Icon } from "../../../shared/components";
 import { useDrawerProps } from "../../../shared/hooks";
-import { CreateUserDrawer } from "../../../users/components";
+import { CreateUserDrawerSelector } from "../../../users/components";
 
 export type AddAllToOrgUnitDropdownProps = {
   isSingleContract: boolean;
@@ -223,7 +223,7 @@ export const AddAllToOrgUnitDropdown = ({
         />
       )}
       {isOpenUserDrawer && (
-        <CreateUserDrawer
+        <CreateUserDrawerSelector
           orgUnit={{ id: unitId, name: unitName }}
           {...userDrawerProps}
           isOpen={isOpenUserDrawer}

package/src/features/org-units/components/AuthSetupDrawer/AuthSetupDrawer.tsx

@@ -0,0 +1,346 @@
+import { useState } from "react";
+
+import { useRouter } from "next/router";
+
+import {
+  Checkbox,
+  RadioGroup,
+  RadioOption,
+  Tooltip,
+  useUI,
+} from "@faststore/ui";
+
+import {
+  BasicDrawer,
+  type BasicDrawerProps,
+  ErrorMessage,
+  Icon,
+} from "../../../shared/components";
+import { useAnalytics } from "../../../shared/hooks";
+import { useUpdateOrgUnitSettings } from "../../hooks";
+import {
+  AuthenticationMethod,
+  type Identifier,
+  type OrgUnitSettings,
+} from "../../types";
+
+export type AuthSetupDrawerProps = Omit<BasicDrawerProps, "children"> & {
+  id: string;
+  name: string;
+  settings: OrgUnitSettings;
+  onSuccess?: () => void;
+};
+
+const IDENTIFIERS: Identifier[] = [
+  {
+    id: "userName",
+    name: "Username",
+    disabled: true,
+    defaultChecked: true,
+  },
+  {
+    id: "email",
+    name: "Email",
+    disabled: false,
+    defaultChecked: false,
+  },
+  {
+    id: "phone",
+    name: "Phone",
+    disabled: false,
+    defaultChecked: false,
+  },
+];
+
+type AuthMethod = "password" | "ping-federate";
+
+const getInitialIdentifiers = (settings: OrgUnitSettings): string[] => {
+  const identifiers: string[] = [];
+  if (settings.userIdentification.userName) identifiers.push("userName");
+  if (settings.userIdentification.email) identifiers.push("email");
+  if (settings.userIdentification.phone) identifiers.push("phone");
+  return identifiers;
+};
+
+const getInitialAuthMethod = (settings: OrgUnitSettings): AuthMethod => {
+  return settings.authenticationMethods.method === AuthenticationMethod.PASSWORD
+    ? "password"
+    : "ping-federate";
+};
+
+export const AuthSetupDrawer = ({
+  close,
+  id,
+  name,
+  settings,
+  onSuccess,
+  ...props
+}: AuthSetupDrawerProps) => {
+  const router = useRouter();
+  const { pushToast } = useUI();
+  const { trackEntityEdited, trackEntityEditError } = useAnalytics({
+    entityType: "org_unit_auth",
+    entityId: id,
+    defaultTimerName: "org_unit_auth_setup",
+    shouldTrackDefaultTimer: true,
+  });
+
+  const [selectedIdentifiers, setSelectedIdentifiers] = useState<string[]>(() =>
+    getInitialIdentifiers(settings)
+  );
+  const [authMethod, setAuthMethod] = useState<AuthMethod>(() =>
+    getInitialAuthMethod(settings)
+  );
+  const [is2faEnabled, setIs2faEnabled] = useState(
+    () => settings["2FA"].verificationCode
+  );
+  const [isTouched, setIsTouched] = useState(false);
+
+  const handleSuccess = () => {
+    trackEntityEdited("auth_setup_configured", {
+      org_unit_id: id,
+      org_unit_name: name,
+      auth_method: authMethod,
+      identifiers: selectedIdentifiers,
+      two_factor_enabled: is2faEnabled,
+    });
+
+    pushToast({
+      message: "Authentication settings saved successfully",
+      status: "INFO",
+    });
+
+    close();
+    if (onSuccess) {
+      onSuccess();
+    } else {
+      router.reload();
+    }
+  };
+
+  const { updateOrgUnitSettings, isUpdateOrgUnitSettingsLoading } =
+    useUpdateOrgUnitSettings({
+      onSuccess: handleSuccess,
+      onError: (error) => {
+        trackEntityEditError(
+          "auth_setup_error",
+          "org_unit_auth",
+          id,
+          error,
+          {}
+        );
+
+        pushToast({
+          message: "An error occurred while updating authentication settings",
+          status: "ERROR",
+        });
+      },
+    });
+
+  const handleIdentifierChange = (identifierId: string) => {
+    if (identifierId === "userName") return; // Username is always required
+
+    setSelectedIdentifiers((prev) =>
+      prev.includes(identifierId)
+        ? prev.filter((id) => id !== identifierId)
+        : [...prev, identifierId]
+    );
+  };
+
+  const handleConfirmClick = () => {
+    setIsTouched(true);
+
+    if (!selectedIdentifiers.includes("userName")) {
+      return;
+    }
+
+    const updatedSettings: OrgUnitSettings = {
+      userIdentification: {
+        userName: selectedIdentifiers.includes("userName"),
+        email: selectedIdentifiers.includes("email"),
+        phone: selectedIdentifiers.includes("phone"),
+      },
+      authenticationMethods: {
+        method:
+          authMethod === "password"
+            ? AuthenticationMethod.PASSWORD
+            : AuthenticationMethod.SSO,
+      },
+      "2FA": {
+        verificationCode: is2faEnabled,
+      },
+    };
+
+    updateOrgUnitSettings({
+      unitId: id,
+      data: updatedSettings,
+    });
+  };
+
+  const isConfirmButtonEnabled =
+    !isUpdateOrgUnitSettingsLoading && selectedIdentifiers.includes("userName");
+
+  return (
+    <BasicDrawer data-fs-bp-auth-setup-drawer close={close} {...props}>
+      <BasicDrawer.Heading title="Authentication" onClose={close} />
+      <BasicDrawer.Body>
+        <section data-fs-bp-auth-setup-section>
+          <div data-fs-bp-auth-setup-section-header>
+            <h2 data-fs-bp-auth-setup-section-title>User identification</h2>
+          </div>
+          <p data-fs-bp-auth-setup-section-description>
+            Select the identifiers allowed for sign-in
+          </p>
+
+          <div data-fs-bp-auth-setup-identifiers>
+            {IDENTIFIERS.map((identifier) => (
+              <div data-fs-bp-auth-setup-identifier-group-item>
+                <label
+                  key={identifier.id}
+                  data-fs-bp-auth-setup-identifier
+                  data-disabled={identifier.disabled}
+                >
+                  <Checkbox
+                    id={identifier.id}
+                    checked={selectedIdentifiers.includes(identifier.id)}
+                    disabled={identifier.disabled}
+                    onChange={() => handleIdentifierChange(identifier.id)}
+                  />
+                  <span data-fs-bp-auth-setup-identifier-label>
+                    {identifier.name}
+                  </span>
+                </label>
+                <Tooltip
+                  content="Enables login through external identity providers, such as Google, Microsoft, or other supported IdPs"
+                  placement="left-center"
+                >
+                  <Icon
+                    name="InfoFilled"
+                    width={16}
+                    height={16}
+                    data-fs-bp-auth-setup-info-icon
+                  />
+                </Tooltip>
+              </div>
+            ))}
+          </div>
+
+          <ErrorMessage
+            show={isTouched && !selectedIdentifiers.includes("userName")}
+            message="Username is required"
+          />
+        </section>
+
+        <section data-fs-bp-auth-setup-section>
+          <div data-fs-bp-auth-setup-section-header>
+            <h2 data-fs-bp-auth-setup-section-title>Authentication methods</h2>
+          </div>
+          <p data-fs-bp-auth-setup-section-description>
+            Control which authentication methods are available
+          </p>
+
+          <div data-fs-bp-auth-setup-radio-group role="radiogroup">
+            <RadioGroup
+              name="authMethod"
+              selectedValue={authMethod}
+              onChange={(e) => {
+                setAuthMethod(e.target.value as AuthMethod);
+              }}
+            >
+              <div data-fs-bp-auth-setup-radio-group-item>
+                <RadioOption
+                  value="password"
+                  label="Password"
+                  name="authMethod"
+                >
+                  Password
+                </RadioOption>
+                <Tooltip
+                  content="Enables login through external identity providers, such as Google, Microsoft, or other supported IdPs"
+                  placement="left-center"
+                >
+                  <Icon
+                    name="InfoFilled"
+                    width={20}
+                    height={20}
+                    data-fs-bp-auth-setup-info-icon
+                  />
+                </Tooltip>
+              </div>
+
+              <div data-fs-bp-auth-setup-radio-group-item>
+                <RadioOption
+                  value="ping-federate"
+                  label="Ping federate (SSO)"
+                  name="authMethod"
+                >
+                  Ping federate (SSO)
+                </RadioOption>
+                <Tooltip
+                  content="Enables login through external identity providers, such as Google, Microsoft, or other supported IdPs"
+                  placement="left-center"
+                >
+                  <Icon
+                    name="InfoFilled"
+                    width={20}
+                    height={20}
+                    data-fs-bp-auth-setup-info-icon
+                  />
+                </Tooltip>
+              </div>
+            </RadioGroup>
+          </div>
+        </section>
+
+        <section data-fs-bp-auth-setup-section>
+          <div data-fs-bp-auth-setup-section-header>
+            <h2 data-fs-bp-auth-setup-section-title>
+              Two-factor authentication (2FA)
+            </h2>
+          </div>
+          <p data-fs-bp-auth-setup-section-description>
+            Require an additional factor for higher security
+          </p>
+
+          <div data-fs-bp-auth-setup-checkbox-group-item>
+            <label data-fs-bp-auth-setup-checkbox-label>
+              <Checkbox
+                id="2fa"
+                checked={is2faEnabled}
+                onChange={() => setIs2faEnabled(!is2faEnabled)}
+              />
+              <span data-fs-bp-auth-setup-checkbox-label-text>
+                Verification code
+              </span>
+            </label>
+            <Tooltip
+              content="Requires an additional factor for higher security"
+              placement="left-center"
+            >
+              <Icon
+                name="InfoFilled"
+                width={20}
+                height={20}
+                data-fs-bp-auth-setup-info-icon
+              />
+            </Tooltip>
+          </div>
+        </section>
+      </BasicDrawer.Body>
+
+      <BasicDrawer.Footer>
+        <BasicDrawer.Button variant="ghost" onClick={close}>
+          Cancel
+        </BasicDrawer.Button>
+        <BasicDrawer.Button
+          variant="confirm"
+          disabled={!isConfirmButtonEnabled}
+          onClick={handleConfirmClick}
+          isLoading={isUpdateOrgUnitSettingsLoading}
+        >
+          Save
+        </BasicDrawer.Button>
+      </BasicDrawer.Footer>
+    </BasicDrawer>
+  );
+};

package/src/features/org-units/components/AuthSetupDrawer/auth-setup-drawer.scss

@@ -0,0 +1,138 @@
+@import "@faststore/ui/src/components/molecules/Tooltip/styles.scss";
+
+[data-fs-bp-auth-setup-drawer] {
+  @import "@faststore/ui/src/components/atoms/Checkbox/styles.scss";
+  @import "@faststore/ui/src/components/atoms/Radio/styles.scss";
+
+  [data-fs-checkbox]:disabled {
+    border-color: var(--fs-bp-color-neutral-3);
+    background-color: var(--fs-bp-color-neutral-1);
+
+    &::before {
+      border-color: var(--fs-bp-color-neutral-5);
+    }
+  }
+
+  [data-fs-bp-auth-setup-section] {
+    padding: var(--fs-spacing-3) 0;
+
+    &:first-child {
+      padding-top: 0;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  [data-fs-bp-auth-setup-section-header] {
+    display: flex;
+    align-items: center;
+    gap: var(--fs-spacing-1);
+    margin-bottom: var(--fs-spacing-1);
+  }
+
+  [data-fs-bp-auth-setup-section-title] {
+    font-size: var(--fs-text-size-2);
+    font-weight: var(--fs-bp-weight-semibold);
+    font-style: normal;
+    line-height: 120%;
+    letter-spacing: -0.02em;
+    vertical-align: middle;
+    color: var(--fs-bp-color-neutral-9);
+    margin: 0;
+  }
+
+  [data-fs-bp-auth-setup-section-description] {
+    font-size: var(--fs-text-size-0);
+    font-weight: 400;
+    font-style: normal;
+    line-height: 120%;
+    letter-spacing: 0;
+    vertical-align: middle;
+    color: var(--fs-bp-color-neutral-6);
+    margin: 0 0 var(--fs-spacing-3) 0;
+  }
+
+  [data-fs-bp-auth-setup-identifiers] {
+    display: flex;
+    flex-direction: column;
+    margin-top: var(--fs-spacing-3);
+  }
+
+  [data-fs-bp-auth-setup-identifier] {
+    display: flex;
+    align-items: center;
+    gap: var(--fs-spacing-2);
+    cursor: pointer;
+    color: var(--fs-bp-color-neutral-9);
+    font-size: var(--fs-text-size-1);
+    padding: var(--fs-spacing-3) 0;
+
+    &[data-disabled="true"] {
+      color: var(--fs-bp-color-neutral-7)
+    }
+  }
+
+  // Radio Group
+  [data-fs-bp-auth-setup-radio-group] {
+    display: flex;
+    margin-top: var(--fs-spacing-3);
+    flex-wrap: wrap;
+    flex-direction: column;
+
+    label {
+      display: flex;
+      flex-direction: row;
+      gap: var(--fs-spacing-2);
+      cursor: pointer;
+      padding: var(--fs-spacing-3) 0;
+      color: var(--fs-bp-color-neutral-9);
+      font-size: var(--fs-text-size-1);
+
+      &:last-child {
+        border-top: 1px solid var(--fs-bp-color-neutral-1);
+      }
+    }
+  }
+
+  // Checkbox Label
+  [data-fs-bp-auth-setup-checkbox-label] {
+    display: flex;
+    align-items: center;
+    gap: var(--fs-spacing-2);
+    cursor: pointer;
+    padding: var(--fs-spacing-2) 0;
+    color: var(--fs-bp-color-neutral-9);
+
+    span {
+      font-size: var(--fs-text-size-1);
+      color: var(--fs-bp-color-neutral-9);
+      user-select: none;
+    }
+  }
+
+  [data-fs-bp-auth-setup-radio-group-item],
+  [data-fs-bp-auth-setup-checkbox-group-item],
+  [data-fs-bp-auth-setup-identifier-group-item] {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    border-bottom: 1px solid var(--fs-bp-color-neutral-1);
+    &:last-child {
+      border-bottom: none;
+    }
+  }
+
+  [data-fs-bp-auth-setup-info-icon] {
+    color: var(--fs-bp-color-neutral-4);
+  }
+
+  // Tooltip Styles
+  [data-fs-tooltip] {
+    [data-fs-tooltip-wrapper] {
+      z-index: 9999;
+    }
+  }
+}

package/src/features/org-units/components/AuthSetupDrawer/index.ts

@@ -0,0 +1 @@
+export { AuthSetupDrawer, type AuthSetupDrawerProps } from "./AuthSetupDrawer";