@thunderid/react 0.1.0 → 0.2.0

package/dist/cjs/components/presentation/OrganizationList/BaseOrganizationList.styles.cjs

@@ -0,0 +1,236 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts
+/**
+* Creates styles for the BaseOrganizationList component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
+	const root = __emotion_css.css`
+      padding: calc(${theme.vars.spacing.unit} * 4);
+      min-width: 600px;
+      margin: 0 auto;
+      font-family: ${theme.vars.typography.fontFamily};
+      background: ${theme.vars.colors.background.surface};
+      border-radius: ${theme.vars.borderRadius.large};
+    `;
+	const header = __emotion_css.css`
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: calc(${theme.vars.spacing.unit} * 3);
+      padding-bottom: calc(${theme.vars.spacing.unit} * 2);
+      border-bottom: 1px solid ${theme.vars.colors.border};
+    `;
+	const headerInfo = __emotion_css.css`
+      flex: 1;
+    `;
+	const title = __emotion_css.css`
+      font-size: 1.5rem;
+      font-weight: 600;
+      margin: 0 0 8px 0;
+      color: ${theme.vars.colors.text.primary};
+    `;
+	const subtitle = __emotion_css.css`
+      color: ${theme.vars.colors.text.secondary};
+      font-size: 0.875rem;
+      margin: 0;
+    `;
+	const refreshButton = __emotion_css.css`
+      background-color: ${theme.vars.colors.background.surface};
+      border: 1px solid ${theme.vars.colors.border};
+      border-radius: ${theme.vars.borderRadius.small};
+      color: ${theme.vars.colors.text.primary};
+      cursor: pointer;
+      font-size: 0.875rem;
+      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 2);
+      transition: all 0.2s;
+      &:hover {
+        background-color: ${theme.vars.colors.background.surface};
+        border-color: ${theme.vars.colors.primary.main};
+      }
+    `;
+	const listContainer = __emotion_css.css`
+      display: flex;
+      flex-direction: column;
+      gap: calc(${theme.vars.spacing.unit} * 1.5);
+    `;
+	const organizationItem = __emotion_css.css`
+      border: 1px solid ${theme.vars.colors.border};
+      border-radius: ${theme.vars.borderRadius.medium};
+      display: flex;
+      justify-content: space-between;
+      padding: calc(${theme.vars.spacing.unit} * 2);
+      transition: all 0.2s;
+      background-color: ${theme.vars.colors.background.surface};
+      &:hover {
+        border-color: ${theme.vars.colors.primary.main};
+        box-shadow: 0 2px 8px ${theme.vars.colors.primary.main}20;
+      }
+    `;
+	const organizationContent = __emotion_css.css`
+      display: flex;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} * 2);
+      flex: 1;
+    `;
+	const organizationInfo = __emotion_css.css`
+      flex: 1;
+    `;
+	const organizationName = __emotion_css.css`
+      font-size: 1.125rem;
+      font-weight: 600;
+      margin: 0 0 4px 0;
+      color: ${theme.vars.colors.text.primary};
+    `;
+	const organizationHandle = __emotion_css.css`
+      color: ${theme.vars.colors.text.secondary};
+      font-size: 0.875rem;
+      margin: 0 0 4px 0;
+      font-family: monospace;
+    `;
+	const organizationStatus = __emotion_css.css`
+      color: ${theme.vars.colors.text.secondary};
+      font-size: 0.875rem;
+      margin: 0;
+    `;
+	const statusText = __emotion_css.css`
+      font-weight: 500;
+    `;
+	const statusTextActive = __emotion_css.css`
+      color: ${theme.vars.colors.success.main};
+    `;
+	const statusTextInactive = __emotion_css.css`
+      color: ${theme.vars.colors.error.main};
+    `;
+	const organizationActions = __emotion_css.css`
+      display: flex;
+      align-items: center;
+    `;
+	const badge = __emotion_css.css`
+      border-radius: ${theme.vars.borderRadius.large};
+      font-size: 0.75rem;
+      font-weight: 500;
+      padding: calc(${theme.vars.spacing.unit} / 2) calc(${theme.vars.spacing.unit} * 1.5);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    `;
+	const badgeSuccess = __emotion_css.css`
+      background-color: color-mix(in srgb, ${theme.vars.colors.success.main} 20%, transparent);
+      color: ${theme.vars.colors.success.main};
+    `;
+	const badgeError = __emotion_css.css`
+      background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, transparent);
+      color: ${theme.vars.colors.error.main};
+    `;
+	const loadingContainer = __emotion_css.css`
+      padding: calc(${theme.vars.spacing.unit} * 4);
+      text-align: center;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const loadingText = __emotion_css.css`
+      margin-top: ${theme.vars.spacing.unit};
+    `;
+	const errorContainer = __emotion_css.css`
+      background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, transparent);
+      border: 1px solid ${theme.vars.colors.error.main};
+      border-radius: ${theme.vars.borderRadius.medium};
+      color: ${theme.vars.colors.error.main};
+      padding: calc(${theme.vars.spacing.unit} * 2);
+    `;
+	const emptyContainer = __emotion_css.css`
+      padding: calc(${theme.vars.spacing.unit} * 4);
+      text-align: center;
+    `;
+	const emptyText = __emotion_css.css`
+      color: ${theme.vars.colors.text.secondary};
+      font-size: 1rem;
+    `;
+	const loadMoreButton = __emotion_css.css`
+      background-color: ${theme.vars.colors.primary.main};
+      border: none;
+      border-radius: ${theme.vars.borderRadius.medium};
+      color: ${theme.vars.colors.primary.contrastText};
+      cursor: pointer;
+      font-size: 0.875rem;
+      font-weight: 500;
+      padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);
+      width: 100%;
+      transition: all 0.2s;
+      &:hover:not(:disabled) {
+        background-color: ${theme.vars.colors.primary.main};
+        opacity: 0.9;
+      }
+      &:disabled {
+        background-color: ${theme.vars.colors.text.secondary};
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+    `;
+	return {
+		badge,
+		badgeError,
+		badgeSuccess,
+		emptyContainer,
+		emptyText,
+		errorContainer,
+		errorMargin: __emotion_css.css`
+      margin-top: calc(${theme.vars.spacing.unit} * 2);
+    `,
+		header,
+		headerInfo,
+		listContainer,
+		loadMoreButton,
+		loadMoreMargin: __emotion_css.css`
+      margin-top: calc(${theme.vars.spacing.unit} * 3);
+    `,
+		loadingContainer,
+		loadingText,
+		organizationActions,
+		organizationContent,
+		organizationHandle,
+		organizationInfo,
+		organizationItem,
+		organizationName,
+		organizationStatus,
+		popupContent: __emotion_css.css`
+      padding: ${theme.vars.spacing.unit};
+    `,
+		refreshButton,
+		root,
+		statusText,
+		statusTextActive,
+		statusTextInactive,
+		subtitle,
+		title
+	};
+}, [
+	theme.vars.spacing.unit,
+	theme.vars.colors.background.surface,
+	theme.vars.colors.border,
+	theme.vars.borderRadius.large,
+	theme.vars.borderRadius.medium,
+	theme.vars.borderRadius.small,
+	theme.vars.colors.text.primary,
+	theme.vars.colors.text.secondary,
+	theme.vars.colors.primary.main,
+	theme.vars.colors.success.main,
+	theme.vars.colors.error.main,
+	theme.vars.colors.primary.contrastText,
+	theme.vars.typography.fontFamily,
+	colorScheme
+]);
+var BaseOrganizationList_styles_default = useStyles;
+
+//#endregion
+exports.default = BaseOrganizationList_styles_default;
+//# sourceMappingURL=BaseOrganizationList.styles.cjs.map

package/dist/cjs/components/presentation/OrganizationList/BaseOrganizationList.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"BaseOrganizationList.styles.cjs","names":["root: string","header: string","headerInfo: string","title: string","subtitle: string","refreshButton: string","listContainer: string","organizationItem: string","organizationContent: string","organizationInfo: string","organizationName: string","organizationHandle: string","organizationStatus: string","statusText: string","statusTextActive: string","statusTextInactive: string","organizationActions: string","badge: string","badgeSuccess: string","badgeError: string","loadingContainer: string","loadingText: string","errorContainer: string","emptyContainer: string","emptyText: string","loadMoreButton: string"],"sources":["../../../../../src/components/presentation/OrganizationList/BaseOrganizationList.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the BaseOrganizationList component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const root: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 4);\n      min-width: 600px;\n      margin: 0 auto;\n      font-family: ${theme.vars.typography.fontFamily};\n      background: ${theme.vars.colors.background.surface};\n      border-radius: ${theme.vars.borderRadius.large};\n    `;\n\n    const header: string = css`\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n      margin-bottom: calc(${theme.vars.spacing.unit} * 3);\n      padding-bottom: calc(${theme.vars.spacing.unit} * 2);\n      border-bottom: 1px solid ${theme.vars.colors.border};\n    `;\n\n    const headerInfo: string = css`\n      flex: 1;\n    `;\n\n    const title: string = css`\n      font-size: 1.5rem;\n      font-weight: 600;\n      margin: 0 0 8px 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const subtitle: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 0.875rem;\n      margin: 0;\n    `;\n\n    const refreshButton: string = css`\n      background-color: ${theme.vars.colors.background.surface};\n      border: 1px solid ${theme.vars.colors.border};\n      border-radius: ${theme.vars.borderRadius.small};\n      color: ${theme.vars.colors.text.primary};\n      cursor: pointer;\n      font-size: 0.875rem;\n      padding: ${theme.vars.spacing.unit} calc(${theme.vars.spacing.unit} * 2);\n      transition: all 0.2s;\n      &:hover {\n        background-color: ${theme.vars.colors.background.surface};\n        border-color: ${theme.vars.colors.primary.main};\n      }\n    `;\n\n    const listContainer: string = css`\n      display: flex;\n      flex-direction: column;\n      gap: calc(${theme.vars.spacing.unit} * 1.5);\n    `;\n\n    const organizationItem: string = css`\n      border: 1px solid ${theme.vars.colors.border};\n      border-radius: ${theme.vars.borderRadius.medium};\n      display: flex;\n      justify-content: space-between;\n      padding: calc(${theme.vars.spacing.unit} * 2);\n      transition: all 0.2s;\n      background-color: ${theme.vars.colors.background.surface};\n      &:hover {\n        border-color: ${theme.vars.colors.primary.main};\n        box-shadow: 0 2px 8px ${theme.vars.colors.primary.main}20;\n      }\n    `;\n\n    const organizationContent: string = css`\n      display: flex;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n      flex: 1;\n    `;\n\n    const organizationInfo: string = css`\n      flex: 1;\n    `;\n\n    const organizationName: string = css`\n      font-size: 1.125rem;\n      font-weight: 600;\n      margin: 0 0 4px 0;\n      color: ${theme.vars.colors.text.primary};\n    `;\n\n    const organizationHandle: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 0.875rem;\n      margin: 0 0 4px 0;\n      font-family: monospace;\n    `;\n\n    const organizationStatus: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 0.875rem;\n      margin: 0;\n    `;\n\n    const statusText: string = css`\n      font-weight: 500;\n    `;\n\n    const statusTextActive: string = css`\n      color: ${theme.vars.colors.success.main};\n    `;\n\n    const statusTextInactive: string = css`\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const organizationActions: string = css`\n      display: flex;\n      align-items: center;\n    `;\n\n    const badge: string = css`\n      border-radius: ${theme.vars.borderRadius.large};\n      font-size: 0.75rem;\n      font-weight: 500;\n      padding: calc(${theme.vars.spacing.unit} / 2) calc(${theme.vars.spacing.unit} * 1.5);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n    `;\n\n    const badgeSuccess: string = css`\n      background-color: color-mix(in srgb, ${theme.vars.colors.success.main} 20%, transparent);\n      color: ${theme.vars.colors.success.main};\n    `;\n\n    const badgeError: string = css`\n      background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, transparent);\n      color: ${theme.vars.colors.error.main};\n    `;\n\n    const loadingContainer: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 4);\n      text-align: center;\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const loadingText: string = css`\n      margin-top: ${theme.vars.spacing.unit};\n    `;\n\n    const errorContainer: string = css`\n      background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 20%, transparent);\n      border: 1px solid ${theme.vars.colors.error.main};\n      border-radius: ${theme.vars.borderRadius.medium};\n      color: ${theme.vars.colors.error.main};\n      padding: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const emptyContainer: string = css`\n      padding: calc(${theme.vars.spacing.unit} * 4);\n      text-align: center;\n    `;\n\n    const emptyText: string = css`\n      color: ${theme.vars.colors.text.secondary};\n      font-size: 1rem;\n    `;\n\n    const loadMoreButton: string = css`\n      background-color: ${theme.vars.colors.primary.main};\n      border: none;\n      border-radius: ${theme.vars.borderRadius.medium};\n      color: ${theme.vars.colors.primary.contrastText};\n      cursor: pointer;\n      font-size: 0.875rem;\n      font-weight: 500;\n      padding: calc(${theme.vars.spacing.unit} * 1.5) calc(${theme.vars.spacing.unit} * 3);\n      width: 100%;\n      transition: all 0.2s;\n      &:hover:not(:disabled) {\n        background-color: ${theme.vars.colors.primary.main};\n        opacity: 0.9;\n      }\n      &:disabled {\n        background-color: ${theme.vars.colors.text.secondary};\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n    `;\n\n    const errorMargin: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 2);\n    `;\n\n    const loadMoreMargin: string = css`\n      margin-top: calc(${theme.vars.spacing.unit} * 3);\n    `;\n\n    const popupContent: string = css`\n      padding: ${theme.vars.spacing.unit};\n    `;\n\n    return {\n      badge,\n      badgeError,\n      badgeSuccess,\n      emptyContainer,\n      emptyText,\n      errorContainer,\n      errorMargin,\n      header,\n      headerInfo,\n      listContainer,\n      loadMoreButton,\n      loadMoreMargin,\n      loadingContainer,\n      loadingText,\n      organizationActions,\n      organizationContent,\n      organizationHandle,\n      organizationInfo,\n      organizationItem,\n      organizationName,\n      organizationStatus,\n      popupContent,\n      refreshButton,\n      root,\n      statusText,\n      statusTextActive,\n      statusTextInactive,\n      subtitle,\n      title,\n    };\n  }, [\n    theme.vars.spacing.unit,\n    theme.vars.colors.background.surface,\n    theme.vars.colors.border,\n    theme.vars.borderRadius.large,\n    theme.vars.borderRadius.medium,\n    theme.vars.borderRadius.small,\n    theme.vars.colors.text.primary,\n    theme.vars.colors.text.secondary,\n    theme.vars.colors.primary.main,\n    theme.vars.colors.success.main,\n    theme.vars.colors.error.main,\n    theme.vars.colors.primary.contrastText,\n    theme.vars.typography.fontFamily,\n    colorScheme,\n  ]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAMA,OAAe,iBAAG;sBACN,MAAM,KAAK,QAAQ,KAAK;;;qBAGzB,MAAM,KAAK,WAAW,WAAW;oBAClC,MAAM,KAAK,OAAO,WAAW,QAAQ;uBAClC,MAAM,KAAK,aAAa,MAAM;;CAGjD,MAAMC,SAAiB,iBAAG;;;;4BAIF,MAAM,KAAK,QAAQ,KAAK;6BACvB,MAAM,KAAK,QAAQ,KAAK;iCACpB,MAAM,KAAK,OAAO,OAAO;;CAGtD,MAAMC,aAAqB,iBAAG;;;CAI9B,MAAMC,QAAgB,iBAAG;;;;eAId,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAG1C,MAAMC,WAAmB,iBAAG;eACjB,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK5C,MAAMC,gBAAwB,iBAAG;0BACX,MAAM,KAAK,OAAO,WAAW,QAAQ;0BACrC,MAAM,KAAK,OAAO,OAAO;uBAC5B,MAAM,KAAK,aAAa,MAAM;eACtC,MAAM,KAAK,OAAO,KAAK,QAAQ;;;iBAG7B,MAAM,KAAK,QAAQ,KAAK,QAAQ,MAAM,KAAK,QAAQ,KAAK;;;4BAG7C,MAAM,KAAK,OAAO,WAAW,QAAQ;wBACzC,MAAM,KAAK,OAAO,QAAQ,KAAK;;;CAInD,MAAMC,gBAAwB,iBAAG;;;kBAGnB,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,mBAA2B,iBAAG;0BACd,MAAM,KAAK,OAAO,OAAO;uBAC5B,MAAM,KAAK,aAAa,OAAO;;;sBAGhC,MAAM,KAAK,QAAQ,KAAK;;0BAEpB,MAAM,KAAK,OAAO,WAAW,QAAQ;;wBAEvC,MAAM,KAAK,OAAO,QAAQ,KAAK;gCACvB,MAAM,KAAK,OAAO,QAAQ,KAAK;;;CAI3D,MAAMC,sBAA8B,iBAAG;;;kBAGzB,MAAM,KAAK,QAAQ,KAAK;;;CAItC,MAAMC,mBAA2B,iBAAG;;;CAIpC,MAAMC,mBAA2B,iBAAG;;;;eAIzB,MAAM,KAAK,OAAO,KAAK,QAAQ;;CAG1C,MAAMC,qBAA6B,iBAAG;eAC3B,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;CAM5C,MAAMC,qBAA6B,iBAAG;eAC3B,MAAM,KAAK,OAAO,KAAK,UAAU;;;;CAK5C,MAAMC,aAAqB,iBAAG;;;CAI9B,MAAMC,mBAA2B,iBAAG;eACzB,MAAM,KAAK,OAAO,QAAQ,KAAK;;CAG1C,MAAMC,qBAA6B,iBAAG;eAC3B,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,sBAA8B,iBAAG;;;;CAKvC,MAAMC,QAAgB,iBAAG;uBACN,MAAM,KAAK,aAAa,MAAM;;;sBAG/B,MAAM,KAAK,QAAQ,KAAK,aAAa,MAAM,KAAK,QAAQ,KAAK;;;;CAK/E,MAAMC,eAAuB,iBAAG;6CACS,MAAM,KAAK,OAAO,QAAQ,KAAK;eAC7D,MAAM,KAAK,OAAO,QAAQ,KAAK;;CAG1C,MAAMC,aAAqB,iBAAG;6CACW,MAAM,KAAK,OAAO,MAAM,KAAK;eAC3D,MAAM,KAAK,OAAO,MAAM,KAAK;;CAGxC,MAAMC,mBAA2B,iBAAG;sBAClB,MAAM,KAAK,QAAQ,KAAK;;;;;kBAK5B,MAAM,KAAK,QAAQ,KAAK;;CAGtC,MAAMC,cAAsB,iBAAG;oBACf,MAAM,KAAK,QAAQ,KAAK;;CAGxC,MAAMC,iBAAyB,iBAAG;6CACO,MAAM,KAAK,OAAO,MAAM,KAAK;0BAChD,MAAM,KAAK,OAAO,MAAM,KAAK;uBAChC,MAAM,KAAK,aAAa,OAAO;eACvC,MAAM,KAAK,OAAO,MAAM,KAAK;sBACtB,MAAM,KAAK,QAAQ,KAAK;;CAG1C,MAAMC,iBAAyB,iBAAG;sBAChB,MAAM,KAAK,QAAQ,KAAK;;;CAI1C,MAAMC,YAAoB,iBAAG;eAClB,MAAM,KAAK,OAAO,KAAK,UAAU;;;CAI5C,MAAMC,iBAAyB,iBAAG;0BACZ,MAAM,KAAK,OAAO,QAAQ,KAAK;;uBAElC,MAAM,KAAK,aAAa,OAAO;eACvC,MAAM,KAAK,OAAO,QAAQ,aAAa;;;;sBAIhC,MAAM,KAAK,QAAQ,KAAK,eAAe,MAAM,KAAK,QAAQ,KAAK;;;;4BAIzD,MAAM,KAAK,OAAO,QAAQ,KAAK;;;;4BAI/B,MAAM,KAAK,OAAO,KAAK,UAAU;;;;;AAkBzD,QAAO;EACL;EACA;EACA;EACA;EACA;EACA;EACA,aAnB0B,iBAAG;yBACV,MAAM,KAAK,QAAQ,KAAK;;EAmB3C;EACA;EACA;EACA;EACA,gBApB6B,iBAAG;yBACb,MAAM,KAAK,QAAQ,KAAK;;EAoB3C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cA1B2B,iBAAG;iBACnB,MAAM,KAAK,QAAQ,KAAK;;EA0BnC;EACA;EACA;EACA;EACA;EACA;EACA;EACD;GACA;CACD,MAAM,KAAK,QAAQ;CACnB,MAAM,KAAK,OAAO,WAAW;CAC7B,MAAM,KAAK,OAAO;CAClB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,aAAa;CACxB,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,KAAK;CACvB,MAAM,KAAK,OAAO,QAAQ;CAC1B,MAAM,KAAK,OAAO,QAAQ;CAC1B,MAAM,KAAK,OAAO,MAAM;CACxB,MAAM,KAAK,OAAO,QAAQ;CAC1B,MAAM,KAAK,WAAW;CACtB;CACD,CAAC;AAEJ,0CAAe"}

package/dist/cjs/components/presentation/OrganizationList/OrganizationList.cjs

@@ -0,0 +1,86 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+const require_useOrganization = require('../../../contexts/Organization/useOrganization.cjs');
+const require_useTheme = require('../../../contexts/Theme/useTheme.cjs');
+const require_BaseOrganizationList = require('./BaseOrganizationList.cjs');
+const require_OrganizationList_styles = require('./OrganizationList.styles.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/presentation/OrganizationList/OrganizationList.tsx
+/**
+* OrganizationList component that provides organization listing functionality with pagination.
+* This component uses the enhanced OrganizationContext, eliminating the polling issue and
+* providing better integration with the existing context system.
+*
+* @example
+* ```tsx
+* import { OrganizationList } from '@thunderid/react';
+*
+* // Basic usage
+* <OrganizationList />
+*
+* // With custom limit and filter
+* <OrganizationList
+*   limit={20}
+*   filter="active"
+*   onOrganizationSelect={(org) => {
+*     console.log('Selected organization:', org.name);
+*   }}
+* />
+*
+* // As a popup dialog
+* <OrganizationList
+*   mode="popup"
+*   open={isOpen}
+*   onOpenChange={setIsOpen}
+*   title="Select Organization"
+* />
+*
+* // With custom organization renderer
+* <OrganizationList
+*   renderOrganization={(org) => (
+*     <div key={org.id}>
+*       <h3>{org.name}</h3>
+*       <p>Can switch: {org.canSwitch ? 'Yes' : 'No'}</p>
+*     </div>
+*   )}
+* />
+* ```
+*/
+const OrganizationList = (props) => {
+	const { onOrganizationSelect, className = "", style,...baseProps } = props;
+	const { autoFetch, filter, limit, recursive,...filteredBaseProps } = baseProps;
+	const { theme, colorScheme } = require_useTheme.default();
+	const styles = require_OrganizationList_styles.default(theme, colorScheme);
+	const { getAllOrganizations, error, isLoading, myOrganizations } = require_useOrganization.default();
+	const [allOrganizations, setAllOrganizations] = (0, react.useState)({ organizations: [] });
+	(0, react.useEffect)(() => {
+		(async () => {
+			setAllOrganizations(await getAllOrganizations());
+		})();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: (0, __emotion_css.cx)(styles["root"], className),
+		style,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, __emotion_css.cx)(styles["container"]),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_BaseOrganizationList.BaseOrganizationList, {
+				allOrganizations,
+				myOrganizations,
+				error,
+				isLoading,
+				onOrganizationSelect,
+				...filteredBaseProps
+			})
+		})
+	});
+};
+var OrganizationList_default = OrganizationList;
+
+//#endregion
+exports.default = OrganizationList_default;
+//# sourceMappingURL=OrganizationList.cjs.map

package/dist/cjs/components/presentation/OrganizationList/OrganizationList.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationList.cjs","names":["OrganizationList: FC<OrganizationListProps>","useTheme","styles: ReturnType<typeof useStyles>","useStyles","useOrganization","BaseOrganizationListComponent"],"sources":["../../../../../src/components/presentation/OrganizationList/OrganizationList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {cx} from '@emotion/css';\nimport {AllOrganizationsApiResponse} from '@thunderid/browser';\nimport {FC, ReactElement, useEffect, useState} from 'react';\nimport {\n  BaseOrganizationList as BaseOrganizationListComponent,\n  BaseOrganizationListProps,\n  OrganizationWithSwitchAccess,\n} from './BaseOrganizationList';\nimport useStyles from './OrganizationList.styles';\nimport useOrganization from '../../../contexts/Organization/useOrganization';\nimport useTheme from '../../../contexts/Theme/useTheme';\n\n/**\n * Configuration options for the OrganizationList component.\n */\nexport interface OrganizationListConfig {\n  /**\n   * Whether to automatically fetch organizations on mount\n   */\n  autoFetch?: boolean;\n  /**\n   * Filter string for organizations\n   */\n  filter?: string;\n  /**\n   * Number of organizations to fetch per page\n   */\n  limit?: number;\n  /**\n   * Whether to include recursive organizations\n   */\n  recursive?: boolean;\n}\n\n/**\n * Props interface for the OrganizationList component.\n * Uses the enhanced OrganizationContext instead of the useOrganizations hook.\n */\nexport interface OrganizationListProps\n  extends Omit<\n      BaseOrganizationListProps,\n      'myOrganizations' | 'allOrganizations' | 'error' | 'fetchMore' | 'hasMore' | 'isLoading' | 'isLoadingMore'\n    >,\n    OrganizationListConfig {\n  /**\n   * Function called when an organization is selected/clicked\n   */\n  onOrganizationSelect?: (organization: OrganizationWithSwitchAccess) => void;\n}\n\n/**\n * OrganizationList component that provides organization listing functionality with pagination.\n * This component uses the enhanced OrganizationContext, eliminating the polling issue and\n * providing better integration with the existing context system.\n *\n * @example\n * ```tsx\n * import { OrganizationList } from '@thunderid/react';\n *\n * // Basic usage\n * <OrganizationList />\n *\n * // With custom limit and filter\n * <OrganizationList\n *   limit={20}\n *   filter=\"active\"\n *   onOrganizationSelect={(org) => {\n *     console.log('Selected organization:', org.name);\n *   }}\n * />\n *\n * // As a popup dialog\n * <OrganizationList\n *   mode=\"popup\"\n *   open={isOpen}\n *   onOpenChange={setIsOpen}\n *   title=\"Select Organization\"\n * />\n *\n * // With custom organization renderer\n * <OrganizationList\n *   renderOrganization={(org) => (\n *     <div key={org.id}>\n *       <h3>{org.name}</h3>\n *       <p>Can switch: {org.canSwitch ? 'Yes' : 'No'}</p>\n *     </div>\n *   )}\n * />\n * ```\n */\nexport const OrganizationList: FC<OrganizationListProps> = (props: OrganizationListProps): ReactElement => {\n  const {onOrganizationSelect, className = '', style, ...baseProps} = props;\n  const {autoFetch, filter, limit, recursive, ...filteredBaseProps} = baseProps;\n\n  const {theme, colorScheme} = useTheme();\n  const styles: ReturnType<typeof useStyles> = useStyles(theme, colorScheme);\n  const {getAllOrganizations, error, isLoading, myOrganizations} = useOrganization();\n\n  const [allOrganizations, setAllOrganizations] = useState<AllOrganizationsApiResponse>({\n    organizations: [],\n  });\n\n  useEffect(() => {\n    (async (): Promise<void> => {\n      setAllOrganizations(await getAllOrganizations());\n    })();\n  }, []);\n\n  return (\n    <div className={cx(styles['root'], className)} style={style}>\n      <div className={cx(styles['container'])}>\n        <BaseOrganizationListComponent\n          allOrganizations={allOrganizations}\n          myOrganizations={myOrganizations}\n          error={error}\n          isLoading={isLoading}\n          onOrganizationSelect={onOrganizationSelect}\n          {...filteredBaseProps}\n        />\n      </div>\n    </div>\n  );\n};\n\nexport default OrganizationList;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4GA,MAAaA,oBAA+C,UAA+C;CACzG,MAAM,EAAC,sBAAsB,YAAY,IAAI,MAAO,GAAG,cAAa;CACpE,MAAM,EAAC,WAAW,QAAQ,OAAO,UAAW,GAAG,sBAAqB;CAEpE,MAAM,EAAC,OAAO,gBAAeC,0BAAU;CACvC,MAAMC,SAAuCC,wCAAU,OAAO,YAAY;CAC1E,MAAM,EAAC,qBAAqB,OAAO,WAAW,oBAAmBC,iCAAiB;CAElF,MAAM,CAAC,kBAAkB,2CAA6D,EACpF,eAAe,EAAE,EAClB,CAAC;AAEF,4BAAgB;AACd,GAAC,YAA2B;AAC1B,uBAAoB,MAAM,qBAAqB,CAAC;MAC9C;IACH,EAAE,CAAC;AAEN,QACE,2CAAC;EAAI,iCAAc,OAAO,SAAS,UAAU;EAAS;YACpD,2CAAC;GAAI,iCAAc,OAAO,aAAa;aACrC,2CAACC;IACmB;IACD;IACV;IACI;IACW;IACtB,GAAI;KACJ;IACE;GACF;;AAIV,+BAAe"}

package/dist/cjs/components/presentation/OrganizationList/OrganizationList.styles.cjs

@@ -0,0 +1,75 @@
+const require_rolldown_runtime = require('../../../_virtual/rolldown_runtime.cjs');
+let react = require("react");
+react = require_rolldown_runtime.__toESM(react);
+let __emotion_css = require("@emotion/css");
+__emotion_css = require_rolldown_runtime.__toESM(__emotion_css);
+
+//#region src/components/presentation/OrganizationList/OrganizationList.styles.ts
+/**
+* Creates styles for the OrganizationList component using BEM methodology
+* @param theme - The theme object containing design tokens
+* @param colorScheme - The current color scheme (used for memoization)
+* @returns Object containing CSS class names for component styling
+*/
+const useStyles = (theme, colorScheme) => (0, react.useMemo)(() => {
+	const cssOrganizationListWrapper = __emotion_css.css`
+      /* Container wrapper styles for OrganizationList component */
+      width: 100%;
+      font-family: ${theme.vars.typography.fontFamily};
+
+      &__container {
+        position: relative;
+        width: 100%;
+      }
+
+      &__error-state {
+        padding: calc(${theme.vars.spacing.unit} * 2);
+        background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 10%, transparent);
+        border: 1px solid ${theme.vars.colors.error.main};
+        border-radius: ${theme.vars.borderRadius.medium};
+        color: ${theme.vars.colors.error.main};
+        text-align: center;
+      }
+
+      &__loading-overlay {
+        position: absolute;
+        inset: 0;
+        background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: ${theme.vars.borderRadius.large};
+        backdrop-filter: blur(2px);
+      }
+    `;
+	return {
+		container: __emotion_css.css`
+        position: relative;
+        width: 100%;
+      `,
+		errorState: __emotion_css.css`
+        padding: calc(${theme.vars.spacing.unit} * 2);
+        background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 10%, transparent);
+        border: 1px solid ${theme.vars.colors.error.main};
+        border-radius: ${theme.vars.borderRadius.medium};
+        color: ${theme.vars.colors.error.main};
+        text-align: center;
+      `,
+		loadingOverlay: __emotion_css.css`
+        position: absolute;
+        inset: 0;
+        background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: ${theme.vars.borderRadius.large};
+        backdrop-filter: blur(2px);
+      `,
+		root: cssOrganizationListWrapper
+	};
+}, [theme, colorScheme]);
+var OrganizationList_styles_default = useStyles;
+
+//#endregion
+exports.default = OrganizationList_styles_default;
+//# sourceMappingURL=OrganizationList.styles.cjs.map

package/dist/cjs/components/presentation/OrganizationList/OrganizationList.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrganizationList.styles.cjs","names":["cssOrganizationListWrapper: string"],"sources":["../../../../../src/components/presentation/OrganizationList/OrganizationList.styles.ts"],"sourcesContent":["/**\n * Copyright (c) 2025, WSO2 LLC. (https://www.wso2.com).\n *\n * WSO2 LLC. licenses this file to you under the Apache License,\n * Version 2.0 (the \"License\"); you may not use this file except\n * in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing,\n * software distributed under the License is distributed on an\n * \"AS IS\" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\n * KIND, either express or implied. See the License for the\n * specific language governing permissions and limitations\n * under the License.\n */\n\nimport {css} from '@emotion/css';\nimport {Theme} from '@thunderid/browser';\nimport {useMemo} from 'react';\n\n/**\n * Creates styles for the OrganizationList component using BEM methodology\n * @param theme - The theme object containing design tokens\n * @param colorScheme - The current color scheme (used for memoization)\n * @returns Object containing CSS class names for component styling\n */\nconst useStyles = (theme: Theme, colorScheme: string): Record<string, string> =>\n  useMemo(() => {\n    const cssOrganizationListWrapper: string = css`\n      /* Container wrapper styles for OrganizationList component */\n      width: 100%;\n      font-family: ${theme.vars.typography.fontFamily};\n\n      &__container {\n        position: relative;\n        width: 100%;\n      }\n\n      &__error-state {\n        padding: calc(${theme.vars.spacing.unit} * 2);\n        background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 10%, transparent);\n        border: 1px solid ${theme.vars.colors.error.main};\n        border-radius: ${theme.vars.borderRadius.medium};\n        color: ${theme.vars.colors.error.main};\n        text-align: center;\n      }\n\n      &__loading-overlay {\n        position: absolute;\n        inset: 0;\n        background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: ${theme.vars.borderRadius.large};\n        backdrop-filter: blur(2px);\n      }\n    `;\n\n    return {\n      container: css`\n        position: relative;\n        width: 100%;\n      `,\n      errorState: css`\n        padding: calc(${theme.vars.spacing.unit} * 2);\n        background-color: color-mix(in srgb, ${theme.vars.colors.error.main} 10%, transparent);\n        border: 1px solid ${theme.vars.colors.error.main};\n        border-radius: ${theme.vars.borderRadius.medium};\n        color: ${theme.vars.colors.error.main};\n        text-align: center;\n      `,\n      loadingOverlay: css`\n        position: absolute;\n        inset: 0;\n        background-color: color-mix(in srgb, ${theme.vars.colors.background.surface} 80%, transparent);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: ${theme.vars.borderRadius.large};\n        backdrop-filter: blur(2px);\n      `,\n      root: cssOrganizationListWrapper,\n    };\n  }, [theme, colorScheme]);\n\nexport default useStyles;\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,aAAa,OAAc,yCACjB;CACZ,MAAMA,6BAAqC,iBAAG;;;qBAG7B,MAAM,KAAK,WAAW,WAAW;;;;;;;;wBAQ9B,MAAM,KAAK,QAAQ,KAAK;+CACD,MAAM,KAAK,OAAO,MAAM,KAAK;4BAChD,MAAM,KAAK,OAAO,MAAM,KAAK;yBAChC,MAAM,KAAK,aAAa,OAAO;iBACvC,MAAM,KAAK,OAAO,MAAM,KAAK;;;;;;;+CAOC,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;yBAI3D,MAAM,KAAK,aAAa,MAAM;;;;AAKnD,QAAO;EACL,WAAW,iBAAG;;;;EAId,YAAY,iBAAG;wBACG,MAAM,KAAK,QAAQ,KAAK;+CACD,MAAM,KAAK,OAAO,MAAM,KAAK;4BAChD,MAAM,KAAK,OAAO,MAAM,KAAK;yBAChC,MAAM,KAAK,aAAa,OAAO;iBACvC,MAAM,KAAK,OAAO,MAAM,KAAK;;;EAGxC,gBAAgB,iBAAG;;;+CAGsB,MAAM,KAAK,OAAO,WAAW,QAAQ;;;;yBAI3D,MAAM,KAAK,aAAa,MAAM;;;EAGjD,MAAM;EACP;GACA,CAAC,OAAO,YAAY,CAAC;AAE1B,sCAAe"}