@nibssplc/cams-sdk-react 1.0.0-rc.46 → 1.0.0-rc.47

package/README.md

@@ -13,6 +13,19 @@ For MSAL mode, also install:
 npm install @azure/msal-browser @azure/msal-react
 ```
 
+### Importing Styles
+
+The SDK includes bundled Tailwind CSS. Import it in your app entry point:
+
+```tsx
+import '@nibssplc/cams-sdk-react/dist/styles.css';
+```
+
+For Next.js, add to `app/layout.tsx` or `pages/_app.tsx`:
+```tsx
+import '@nibssplc/cams-sdk-react/dist/styles.css';
+```
+
 ## Features
 
 - ⚛️ React hooks for authentication
@@ -273,13 +286,14 @@ export default function RootLayout({ children }) {
 
 ## Styling
 
-Components use Tailwind CSS. Ensure Tailwind is configured in your project:
+The SDK bundles all required Tailwind CSS, so you don't need to configure Tailwind in your project. Simply import the styles:
 
-```bash
-npm install -D tailwindcss
-npx tailwindcss init
+```tsx
+import '@nibssplc/cams-sdk-react/dist/styles.css';
 ```
 
+If your project already uses Tailwind, the SDK styles will work alongside your existing configuration.
+
 ## Examples
 
 See the [examples](../../examples) directory for complete implementations:

package/dist/index.cjs.js

@@ -1844,36 +1844,6 @@ function DialogTitle(_a) {
 
 var a="container_f782f4",i="inner_37f4c9",c="bar_409d0f";const r=({size:r=35,color:l="black",speed:d=1,stroke:o=3.5})=>jsxRuntimeExports.jsx("div",{className:a,style:{"--uib-size":r+"px","--uib-color":l,"--uib-speed":d+"s","--uib-stroke":o+"px"},children:jsxRuntimeExports.jsxs("div",{className:i,children:[jsxRuntimeExports.jsx("div",{className:c}),jsxRuntimeExports.jsx("div",{className:c}),jsxRuntimeExports.jsx("div",{className:c}),jsxRuntimeExports.jsx("div",{className:c})]})});
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-var css_248z = ".container_f782f4 {\n  flex-shrink: 0;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  height: calc(var(--uib-size) * 0.9);\n  width: var(--uib-size);\n}\n\n.inner_37f4c9 {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: var(--uib-size);\n  height: calc(var(--uib-size) * 0.9);\n}\n\n.bar_409d0f {\n  width: var(--uib-stroke);\n  height: 100%;\n  background-color: var(--uib-color);\n  transition: background-color 0.3s ease;\n}\n\n.bar_409d0f:nth-child(1) {\n  animation: grow_ca6a4e var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.45) infinite;\n}\n\n.bar_409d0f:nth-child(2) {\n  animation: grow_ca6a4e var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.3) infinite;\n}\n\n.bar_409d0f:nth-child(3) {\n  animation: grow_ca6a4e var(--uib-speed) ease-in-out calc(var(--uib-speed) * -0.15) infinite;\n}\n\n.bar_409d0f:nth-child(4) {\n  animation: grow_ca6a4e var(--uib-speed) ease-in-out infinite;\n}\n\n@keyframes grow_ca6a4e {\n  0%, 100% {\n    transform: scaleY(0.3);\n  }\n  50% {\n    transform: scaleY(1);\n  }\n}";
-styleInject(css_248z);
-
 var LoadingSpinner = function (_a) {
     var loadingText = _a.loadingText;
     return (jsxRuntimeExports.jsxs("div", { className: "flex flex-col justify-center items-center h-full w-full py-10", children: [jsxRuntimeExports.jsx("script", { type: "module", defer: true, src: "https://cdn.jsdelivr.net/npm/ldrs/dist/auto/waveform.js" }), jsxRuntimeExports.jsx(r, { size: "35", stroke: "3.5", speed: "1", color: "green" }), loadingText && (jsxRuntimeExports.jsx("p", { className: "text-center font-semibold mt-3", children: "Loading..." }))] }));