@pallasoft/ps-core-components 2.34.0 → 2.35.1

package/dist/components/ps-analytics-provider.d.ts

@@ -9,6 +9,7 @@ export interface PsAnalyticsProviderProps {
     appVersion?: string;
     nonce?: string;
     consentCookieName?: string;
+    requireConsent?: boolean;
     pathname?: string;
 }
-export declare const PsAnalyticsProvider: ({ children, googleAnalyticsId, googleTagManagerUrl, postHogKey, postHogApiHost, userId, appVersion, nonce, consentCookieName, pathname, }: PsAnalyticsProviderProps) => import("react").JSX.Element;
+export declare const PsAnalyticsProvider: ({ children, googleAnalyticsId, googleTagManagerUrl, postHogKey, postHogApiHost, userId, appVersion, nonce, consentCookieName, requireConsent, pathname, }: PsAnalyticsProviderProps) => import("react").JSX.Element;

package/dist/components/ps-analytics-provider.js

@@ -8,8 +8,9 @@ const use_consent_1 = require("../hooks/use-consent");
 const ps_analytics_key_service_1 = require("../services/ps-analytics-key-service");
 const ps_google_analytics_service_1 = require("../services/ps-google-analytics-service");
 const ps_post_hog_service_1 = require("../services/ps-post-hog-service");
-const PsAnalyticsProvider = ({ children, googleAnalyticsId, googleTagManagerUrl = ps_analytics_config_1.PsAnalyticsConfig.defaultTagManagerUrl, postHogKey, postHogApiHost, userId, appVersion, nonce, consentCookieName = ps_analytics_config_1.PsAnalyticsConfig.defaultConsentCookieName, pathname, }) => {
-    const { isGranted } = (0, use_consent_1.useConsent)(consentCookieName);
+const PsAnalyticsProvider = ({ children, googleAnalyticsId, googleTagManagerUrl = ps_analytics_config_1.PsAnalyticsConfig.defaultTagManagerUrl, postHogKey, postHogApiHost, userId, appVersion, nonce, consentCookieName = ps_analytics_config_1.PsAnalyticsConfig.defaultConsentCookieName, requireConsent = ps_analytics_config_1.PsAnalyticsConfig.defaultRequireConsent, pathname, }) => {
+    const consent = (0, use_consent_1.useConsent)(consentCookieName);
+    const isGranted = requireConsent ? consent.isGranted : true;
     const [postHog, setPostHog] = (0, react_1.useState)(null);
     const identifiedRef = (0, react_1.useRef)(null);
     const isGoogleOn = ps_analytics_key_service_1.PsAnalyticsKeyService.isEnabled(googleAnalyticsId);

package/dist/components/ps-reflective-app-shell.js

@@ -12,6 +12,6 @@ const PsReflectiveAppShell = ({ children, className, contentClassName, frameClas
         contentRef.current?.scrollTo({ top: 0, left: 0 });
         window.scrollTo({ top: 0, left: 0 });
     }, [scrollResetKey]);
-    return ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-reflective-frame h-[100dvh] overflow-hidden text-ink', className), children: (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-liquid-strong grid h-full min-h-0 w-full overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)]', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, (0, jsx_runtime_1.jsx)("main", { ref: contentRef, className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: children })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)("section", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-reflective-frame h-[100dvh] overflow-hidden text-ink', className), children: (0, jsx_runtime_1.jsxs)("div", { className: ps_design_system_1.PallasoftClassNameService.merge('ps-liquid-strong grid h-full min-h-0 w-full overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)]', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, (0, jsx_runtime_1.jsxs)("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, (0, jsx_runtime_1.jsx)("main", { ref: contentRef, className: ps_design_system_1.PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: (0, jsx_runtime_1.jsx)("div", { className: 'py-5', children: children }) })] })] }) }));
 };
 exports.PsReflectiveAppShell = PsReflectiveAppShell;

package/dist/constants/ps-analytics-config.d.ts

@@ -1,6 +1,7 @@
 export declare const PsAnalyticsConfig: {
     readonly offValues: readonly ["", "_"];
     readonly defaultConsentCookieName: "ps_consent";
+    readonly defaultRequireConsent: true;
     readonly consentGranted: "granted";
     readonly consentDenied: "denied";
     readonly consentMaxAgeSeconds: 31536000;

package/dist/constants/ps-analytics-config.js

@@ -4,6 +4,7 @@ exports.PsAnalyticsConfig = void 0;
 exports.PsAnalyticsConfig = {
     offValues: ['', '_'],
     defaultConsentCookieName: 'ps_consent',
+    defaultRequireConsent: true,
     consentGranted: 'granted',
     consentDenied: 'denied',
     consentMaxAgeSeconds: 31536000,

package/dist/esm/analytics/index.js

@@ -1,12 +1,12 @@
-export * from '../components/ps-analytics-provider';
-export * from '../components/ps-client-error-reporter';
-export * from '../components/ps-consent-banner';
-export * from '../constants/ps-analytics-config';
-export * from '../constants/ps-client-error-config';
-export * from '../hooks/use-consent';
-export * from '../models/analytics-csp-input';
-export * from '../models/analytics-csp-origins';
-export * from '../models/ps-consent-api';
-export * from '../models/ps-consent-choice';
-export * from '../services/analytics-csp-service';
-export * from './report-client-error';
+export * from '../components/ps-analytics-provider.js';
+export * from '../components/ps-client-error-reporter.js';
+export * from '../components/ps-consent-banner.js';
+export * from '../constants/ps-analytics-config.js';
+export * from '../constants/ps-client-error-config.js';
+export * from '../hooks/use-consent.js';
+export * from '../models/analytics-csp-input.js';
+export * from '../models/analytics-csp-origins.js';
+export * from '../models/ps-consent-api.js';
+export * from '../models/ps-consent-choice.js';
+export * from '../services/analytics-csp-service.js';
+export * from './report-client-error.js';

package/dist/esm/analytics/report-client-error.js

@@ -1,2 +1,2 @@
-import { PsClientErrorService } from '../services/ps-client-error-service';
+import { PsClientErrorService } from '../services/ps-client-error-service.js';
 export const reportClientError = (error, context) => PsClientErrorService.report(error, context);

package/dist/esm/components/ps-accordion.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
-import { PsSkeleton } from './ps-skeleton';
-import { PsSkeletonGroup } from './ps-skeleton-group';
+import { PsSkeleton } from './ps-skeleton.js';
+import { PsSkeletonGroup } from './ps-skeleton-group.js';
 export const PsAccordion = ({ children, className, isLoading = false, isOpen, label, onToggle, trailing, }) => isLoading ? (_jsx(PsSkeletonGroup, { className: PallasoftClassNameService.merge('rounded-ps-card border border-line/70 bg-surface/60 px-4 py-3.5', className), label: 'Loading', children: _jsx(PsSkeleton, { className: 'h-4 w-40' }) })) : (_jsx(AccordionPrimitive.Root, { type: 'single', collapsible: true, value: isOpen ? 'open' : '', onValueChange: onToggle, className: PallasoftClassNameService.merge('overflow-hidden rounded-ps-card border border-line/70 bg-surface/60 transition-colors duration-200', isOpen ? 'border-primary/25 bg-surface' : 'hover:border-line hover:bg-surface/90', className), children: _jsxs(AccordionPrimitive.Item, { value: 'open', children: [_jsx(AccordionPrimitive.Header, { children: _jsxs(AccordionPrimitive.Trigger, { className: 'ps-focus-ring flex w-full items-center justify-between gap-3 px-4 py-3.5 text-left', children: [_jsx("span", { className: 'text-body-2 font-semibold text-ink', children: label }), _jsxs("span", { className: 'flex shrink-0 items-center gap-2', children: [trailing, _jsx(PsIcon, { iconKey: PsIconKey.ChevronRight, className: PallasoftClassNameService.merge('h-4 w-4 text-ink/40 transition-transform duration-200', isOpen ? 'rotate-90 text-primary' : '') })] })] }) }), _jsx(AccordionPrimitive.Content, { className: 'ps-accordion-content', children: _jsx("div", { className: 'border-t border-line/70 p-4', children: children }) })] }) }));

package/dist/esm/components/ps-action-tile.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
-import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
+import { PsSkeleton } from './ps-skeleton.js';
 const variantClassNames = {
     default: 'ps-action-tile',
     primary: 'ps-action-tile ps-action-tile-primary',

package/dist/esm/components/ps-active-filter-chip.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
-import { PsPill } from './ps-pill';
+import { PsPill } from './ps-pill.js';
 export const PsActiveFilterChip = ({ id, label, onRemove, removeLabel, }) => (_jsx("button", { "aria-label": removeLabel, className: 'ps-focus-ring shrink-0 rounded-ps-control', id: id, onClick: onRemove, type: 'button', children: _jsx(PsPill, { className: 'pr-2', tone: 'primary', children: _jsxs("span", { className: 'flex items-center gap-1.5', children: [label, _jsx(PsIcon, { className: 'h-3 w-3', iconKey: PsIconKey.Close })] }) }) }));

package/dist/esm/components/ps-analytics-provider.js

@@ -1,12 +1,13 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
-import { PsAnalyticsConfig } from '../constants/ps-analytics-config';
-import { useConsent } from '../hooks/use-consent';
-import { PsAnalyticsKeyService } from '../services/ps-analytics-key-service';
-import { PsGoogleAnalyticsService } from '../services/ps-google-analytics-service';
-import { PsPostHogService } from '../services/ps-post-hog-service';
-export const PsAnalyticsProvider = ({ children, googleAnalyticsId, googleTagManagerUrl = PsAnalyticsConfig.defaultTagManagerUrl, postHogKey, postHogApiHost, userId, appVersion, nonce, consentCookieName = PsAnalyticsConfig.defaultConsentCookieName, pathname, }) => {
-    const { isGranted } = useConsent(consentCookieName);
+import { PsAnalyticsConfig } from '../constants/ps-analytics-config.js';
+import { useConsent } from '../hooks/use-consent.js';
+import { PsAnalyticsKeyService } from '../services/ps-analytics-key-service.js';
+import { PsGoogleAnalyticsService } from '../services/ps-google-analytics-service.js';
+import { PsPostHogService } from '../services/ps-post-hog-service.js';
+export const PsAnalyticsProvider = ({ children, googleAnalyticsId, googleTagManagerUrl = PsAnalyticsConfig.defaultTagManagerUrl, postHogKey, postHogApiHost, userId, appVersion, nonce, consentCookieName = PsAnalyticsConfig.defaultConsentCookieName, requireConsent = PsAnalyticsConfig.defaultRequireConsent, pathname, }) => {
+    const consent = useConsent(consentCookieName);
+    const isGranted = requireConsent ? consent.isGranted : true;
     const [postHog, setPostHog] = useState(null);
     const identifiedRef = useRef(null);
     const isGoogleOn = PsAnalyticsKeyService.isEnabled(googleAnalyticsId);

package/dist/esm/components/ps-app-store-buttons.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsStoreBadgeClasses } from '../constants/ps-store-badge-config';
-import { PsStorePlatform } from '../constants/ps-store-platform';
-import { PsStoreBadge } from './ps-store-badge';
+import { PsStoreBadgeClasses } from '../constants/ps-store-badge-config.js';
+import { PsStorePlatform } from '../constants/ps-store-platform.js';
+import { PsStoreBadge } from './ps-store-badge.js';
 const isLinked = (url) => url !== undefined && url.trim() !== '';
 export const PsAppStoreButtons = ({ appStoreLabels, appStoreUrl, className, playStoreLabels, playStoreUrl, size = 'default', }) => {
     const appStoreHref = isLinked(appStoreUrl) ? appStoreUrl : undefined;

package/dist/esm/components/ps-audio-spectrum.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsAudioSpectrumConfig } from '../constants/ps-audio-spectrum-config';
+import { PsAudioSpectrumConfig } from '../constants/ps-audio-spectrum-config.js';
 const scaleFor = (level) => {
     const bounded = Math.max(0, Math.min(1, level));
     return PsAudioSpectrumConfig.minimumScale + bounded * (1 - PsAudioSpectrumConfig.minimumScale);

package/dist/esm/components/ps-badge.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
-import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
+import { PsSkeleton } from './ps-skeleton.js';
 const toneClassNames = {
     danger: 'bg-danger-soft text-danger dark:bg-rose-500/18 dark:text-rose-100',
     neutral: 'bg-slate-100 text-slate-700 dark:bg-white/10 dark:text-slate-100',

package/dist/esm/components/ps-button.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsButtonBaseClassName, PsButtonSizeClassNames, PsButtonVariantClassNames, } from '../constants/ps-button-classes';
-import { PsSpinner } from './ps-spinner';
+import { PsButtonBaseClassName, PsButtonSizeClassNames, PsButtonVariantClassNames, } from '../constants/ps-button-classes.js';
+import { PsSpinner } from './ps-spinner.js';
 export const PsButton = ({ children, className, disabled, isLabelHiddenOnMobile = false, isLoading = false, leadingIcon, loadingLabel, size = 'default', trailingIcon, type = 'button', variant = 'secondary', ...props }) => (_jsxs("button", { className: PallasoftClassNameService.merge(PsButtonBaseClassName, 'disabled:cursor-not-allowed disabled:opacity-50', PsButtonSizeClassNames[size], isLabelHiddenOnMobile && leadingIcon ? 'min-w-11 max-sm:px-0' : '', PsButtonVariantClassNames[variant], className), "aria-busy": isLoading || undefined, disabled: disabled || isLoading, type: type, ...props, children: [isLoading ? (_jsx(PsSpinner, { className: 'absolute inset-0 m-auto', color: 'current', label: loadingLabel !== null && loadingLabel !== undefined ? loadingLabel : 'Loading', size: 'small' })) : null, _jsxs("span", { "aria-hidden": isLoading || undefined, className: PallasoftClassNameService.merge('inline-flex min-w-0 items-center gap-2', isLoading ? 'invisible' : ''), children: [leadingIcon ? _jsx("span", { className: 'shrink-0', children: leadingIcon }) : null, _jsx("span", { className: isLabelHiddenOnMobile && leadingIcon ? 'sr-only sm:not-sr-only sm:truncate' : 'truncate', children: children }), trailingIcon ? _jsx("span", { className: 'shrink-0', children: trailingIcon }) : null] })] }));

package/dist/esm/components/ps-capped-list.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { PsCappedListConfig } from '../constants/ps-capped-list-config';
-import { PsButton } from './ps-button';
+import { PsCappedListConfig } from '../constants/ps-capped-list-config.js';
+import { PsButton } from './ps-button.js';
 export const PsCappedList = ({ getKey, items, renderItem, showAllLabel, visibleRows = PsCappedListConfig.defaultVisibleRows, }) => {
     const [isExpanded, setIsExpanded] = useState(false);
     const isCapped = !isExpanded && items.length > visibleRows;

package/dist/esm/components/ps-card-block-skeleton.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
-import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
+import { PsSkeleton } from './ps-skeleton.js';
 export const PsCardBlockSkeleton = ({ height }) => (_jsx(PsSkeleton, { height: height, radius: '1.25rem', shape: PsSkeletonShape.Block, width: '100%' }));

package/dist/esm/components/ps-card.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
-import { PsSkeleton } from './ps-skeleton';
-import { PsSkeletonGroup } from './ps-skeleton-group';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
+import { PsSkeleton } from './ps-skeleton.js';
+import { PsSkeletonGroup } from './ps-skeleton-group.js';
 const densityClassNames = {
     compact: 'p-3',
     normal: 'p-4',

package/dist/esm/components/ps-client-error-reporter.js

@@ -1,6 +1,6 @@
 import { useEffect } from 'react';
-import { PsClientErrorConfig } from '../constants/ps-client-error-config';
-import { PsClientErrorService } from '../services/ps-client-error-service';
+import { PsClientErrorConfig } from '../constants/ps-client-error-config.js';
+import { PsClientErrorService } from '../services/ps-client-error-service.js';
 export const PsClientErrorReporter = ({ endpoint, appVersion }) => {
     useEffect(() => {
         PsClientErrorService.configure({ endpoint, appVersion });

package/dist/esm/components/ps-client-only.js

@@ -1,3 +1,3 @@
 import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { usePsHydrated } from '../hooks/use-ps-hydrated';
+import { usePsHydrated } from '../hooks/use-ps-hydrated.js';
 export const PsClientOnly = ({ children, fallback = null }) => usePsHydrated() ? _jsx(_Fragment, { children: children() }) : _jsx(_Fragment, { children: fallback });

package/dist/esm/components/ps-consent-banner.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import { PallasoftZIndex } from '@pallasoft/ps-design-system';
-import { PsAnalyticsConfig } from '../constants/ps-analytics-config';
-import { useConsent } from '../hooks/use-consent';
-import { PsButton } from './ps-button';
+import { PsAnalyticsConfig } from '../constants/ps-analytics-config.js';
+import { useConsent } from '../hooks/use-consent.js';
+import { PsButton } from './ps-button.js';
 export const PsConsentBanner = ({ title, message, acceptLabel, rejectLabel, privacyPolicyHref, privacyPolicyLabel, consentCookieName = PsAnalyticsConfig.defaultConsentCookieName, className, }) => {
     const { isBannerOpen, accept, reject } = useConsent(consentCookieName);
     const ref = useRef(null);

package/dist/esm/components/ps-drag-overlay.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { DragOverlay, defaultDropAnimationSideEffects } from '@dnd-kit/core';
 import { createPortal } from 'react-dom';
-import { PsDragConfig } from '../constants/ps-drag-config';
-import { usePsReducedMotion } from '../hooks/use-ps-reduced-motion';
+import { PsDragConfig } from '../constants/ps-drag-config.js';
+import { usePsReducedMotion } from '../hooks/use-ps-reduced-motion.js';
 const dropAnimation = {
     duration: PsDragConfig.dropDuration,
     easing: PsDragConfig.dropEasing,

package/dist/esm/components/ps-draggable-grid.js

@@ -3,11 +3,11 @@ import { useState } from 'react';
 import { DndContext, closestCenter } from '@dnd-kit/core';
 import { SortableContext, arrayMove, rectSortingStrategy, useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { PsDragConfig } from '../constants/ps-drag-config';
-import { PsDraggableGridClasses, PsDraggableGridLiftFrames } from '../constants/ps-draggable-grid';
-import { usePsDragSensors } from '../hooks/use-ps-drag-sensors';
-import { PsDragGrip } from './ps-drag-grip';
-import { PsDragOverlay } from './ps-drag-overlay';
+import { PsDragConfig } from '../constants/ps-drag-config.js';
+import { PsDraggableGridClasses, PsDraggableGridLiftFrames } from '../constants/ps-draggable-grid.js';
+import { usePsDragSensors } from '../hooks/use-ps-drag-sensors.js';
+import { PsDragGrip } from './ps-drag-grip.js';
+import { PsDragOverlay } from './ps-drag-overlay.js';
 const PsDraggableGridHandle = ({ attributes, label, listeners, setActivatorNodeRef, }) => (_jsx("button", { ...attributes, ...listeners, "aria-label": `Move ${label}`, className: PsDraggableGridClasses.handle, ref: setActivatorNodeRef, title: `Move ${label}`, type: 'button', children: _jsx(PsDragGrip, {}) }));
 const PsSortableGridItem = ({ className, index, item, renderItem, }) => {
     const { attributes, isDragging, listeners, setActivatorNodeRef, setNodeRef, transform, transition, } = useSortable({ id: item.id });

package/dist/esm/components/ps-fab.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsButton } from './ps-button';
+import { PsButton } from './ps-button.js';
 const positionClassNames = {
     'bottom-right': 'bottom-6 right-6',
     'bottom-left': 'bottom-6 left-6',

package/dist/esm/components/ps-faq-answer.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PsFaqBlockKind } from '../constants/ps-faq-block-kind';
+import { PsFaqBlockKind } from '../constants/ps-faq-block-kind.js';
 export const PsFaqAnswer = ({ blocks }) => (_jsx("div", { className: 'flex flex-col gap-3', children: blocks.map((block, index) => block.kind === PsFaqBlockKind.List ? (_jsx("ul", { className: 'list-disc pl-5', children: block.items.map((item) => (_jsx("li", { children: item }, item))) }, index)) : (_jsx("div", { className: 'flex flex-col gap-3', children: block.items.map((item) => (_jsx("p", { children: item }, item))) }, index))) }));

package/dist/esm/components/ps-feature-card.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsIcon } from '@pallasoft/ps-icons';
-import { PsCard } from './ps-card';
+import { PsCard } from './ps-card.js';
 export const PsFeatureCard = ({ description, iconKey, title }) => (_jsxs(PsCard, { className: 'h-full text-center', density: 'spacious', children: [_jsx("span", { className: 'ps-icon-surface mx-auto h-12 w-12', children: _jsx(PsIcon, { className: 'h-6 w-6', iconKey: iconKey }) }), _jsx("h3", { className: 'text-header-4 mb-2 mt-4 text-ink', children: title }), _jsx("p", { className: 'text-body-2 text-ink/60', children: description })] }));

package/dist/esm/components/ps-feature-grid.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PsStaggerContainer, PsStaggerItem } from '@pallasoft/ps-motion-components';
-import { PsWebsiteSectionConfig } from '../constants/ps-website-section-config';
-import { PsFeatureCard } from './ps-feature-card';
-import { PsSectionIntro } from './ps-section-intro';
+import { PsWebsiteSectionConfig } from '../constants/ps-website-section-config.js';
+import { PsFeatureCard } from './ps-feature-card.js';
+import { PsSectionIntro } from './ps-section-intro.js';
 export const PsFeatureGrid = ({ description, eyebrow, features, title }) => (_jsxs("div", { className: 'flex w-full flex-col items-center gap-8', children: [_jsx(PsSectionIntro, { description: description, eyebrow: eyebrow, title: title }), _jsx(PsStaggerContainer, { className: 'grid w-full grid-cols-1 gap-5 md:grid-cols-3', staggerDelay: PsWebsiteSectionConfig.staggerDelay, children: features.map((feature) => (_jsx(PsStaggerItem, { children: _jsx(PsFeatureCard, { description: feature.description, iconKey: feature.iconKey, title: feature.title }) }, feature.title))) })] }));

package/dist/esm/components/ps-form-fields-skeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsPageSkeletonConfig } from '../constants/ps-page-skeleton-config';
-import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
-import { PsSkeleton } from './ps-skeleton';
+import { PsPageSkeletonConfig } from '../constants/ps-page-skeleton-config.js';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
+import { PsSkeleton } from './ps-skeleton.js';
 export const PsFormFieldsSkeleton = ({ columnsClassName = PsPageSkeletonConfig.formColumnsClassName, fields = PsPageSkeletonConfig.formFields, }) => (_jsx("div", { className: PallasoftClassNameService.merge('grid gap-4', columnsClassName), children: fields.map((field) => (_jsxs("div", { className: 'flex flex-col gap-2', children: [_jsx(PsSkeleton, { className: PsPageSkeletonConfig.formLabelClassName }), _jsx(PsSkeleton, { className: 'h-ps-control w-full', shape: PsSkeletonShape.Block })] }, field))) }));

package/dist/esm/components/ps-form-footer.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PsButton } from './ps-button';
+import { PsButton } from './ps-button.js';
 export const PsFormFooter = ({ isSaving, isSecondaryVisible = true, isSubmitDisabled, onSecondary, savingLabel, secondaryLabel, submitLabel, }) => (_jsxs("div", { className: 'sticky bottom-0 z-docked -mx-4 flex justify-end gap-2 border-t border-line bg-surface/90 px-4 py-3 backdrop-blur sm:bottom-4 sm:mx-0 sm:border-0 sm:bg-transparent sm:px-0 sm:py-0 sm:backdrop-blur-none', children: [isSecondaryVisible ? (_jsx(PsButton, { disabled: isSaving, onClick: onSecondary, type: 'button', variant: 'surface', children: secondaryLabel })) : null, _jsx(PsButton, { disabled: isSubmitDisabled || isSaving, isLoading: isSaving, loadingLabel: savingLabel, type: 'submit', variant: 'primary', children: submitLabel })] }));

package/dist/esm/components/ps-form-page-skeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PsPageSkeletonConfig } from '../constants/ps-page-skeleton-config';
-import { PsFormFieldsSkeleton } from './ps-form-fields-skeleton';
-import { PsPageSkeleton } from './ps-page-skeleton';
-import { PsSectionPanelSkeleton } from './ps-section-panel-skeleton';
+import { PsPageSkeletonConfig } from '../constants/ps-page-skeleton-config.js';
+import { PsFormFieldsSkeleton } from './ps-form-fields-skeleton.js';
+import { PsPageSkeleton } from './ps-page-skeleton.js';
+import { PsSectionPanelSkeleton } from './ps-section-panel-skeleton.js';
 export const PsFormPageSkeleton = ({ loadingLabel, title }) => (_jsx(PsPageSkeleton, { hasActions: true, loadingLabel: loadingLabel, title: title, children: PsPageSkeletonConfig.formSections.map((section) => (_jsx(PsSectionPanelSkeleton, { children: _jsx(PsFormFieldsSkeleton, {}) }, section))) }));

package/dist/esm/components/ps-icon-button.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon } from '@pallasoft/ps-icons';
-import { PsIconActionConfig } from '../constants/ps-icon-action-config';
+import { PsIconActionConfig } from '../constants/ps-icon-action-config.js';
 export const PsIconButton = ({ className, iconKey, label, size = 'default', type, ...props }) => (_jsx("button", { ...props, "aria-label": label, className: PallasoftClassNameService.merge(PsIconActionConfig.className, PsIconActionConfig.sizeClassNames[size], PsIconActionConfig.disabledClassName, className), title: label, type: type === 'submit' || type === 'reset' ? type : 'button', children: _jsx(PsIcon, { "aria-hidden": 'true', className: PsIconActionConfig.iconClassName, iconKey: iconKey }) }));

package/dist/esm/components/ps-icon-link.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon } from '@pallasoft/ps-icons';
-import { PsIconActionConfig } from '../constants/ps-icon-action-config';
+import { PsIconActionConfig } from '../constants/ps-icon-action-config.js';
 export const PsIconLink = ({ className, href, iconKey, label, LinkComponent, size = 'default', }) => {
     const linkClassName = PallasoftClassNameService.merge(PsIconActionConfig.className, PsIconActionConfig.sizeClassNames[size], className);
     const icon = (_jsx(PsIcon, { "aria-hidden": 'true', className: PsIconActionConfig.iconClassName, iconKey: iconKey }));

package/dist/esm/components/ps-infinite-scroll.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import InfiniteScroll from 'react-infinite-scroll-component';
-import { PsSpinner } from './ps-spinner';
+import { PsSpinner } from './ps-spinner.js';
 const defaultLoader = (_jsx("div", { className: 'flex w-full justify-center py-8', children: _jsx(PsSpinner, {}) }));
 export const PsInfiniteScroll = ({ children, className, dataLength, hasMore, loader, next, }) => (_jsx(InfiniteScroll, { className: className, dataLength: dataLength, hasMore: hasMore, loader: loader !== null && loader !== undefined ? loader : defaultLoader, next: next, children: children }));

package/dist/esm/components/ps-intro-skeleton.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PsSkeleton } from './ps-skeleton';
+import { PsSkeleton } from './ps-skeleton.js';
 export const PsIntroSkeleton = () => (_jsxs("div", { className: 'mx-auto flex w-full max-w-3xl flex-col items-center gap-4', children: [_jsx(PsSkeleton, { height: '0.875rem', radius: '999px', width: '6rem' }), _jsx(PsSkeleton, { height: '2.5rem', radius: '0.75rem', width: '70%' }), _jsx(PsSkeleton, { height: '1.125rem', radius: '0.5rem', width: '85%' })] }));

package/dist/esm/components/ps-layer.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PsLayerContext } from '../contexts/ps-layer-context';
+import { PsLayerContext } from '../contexts/ps-layer-context.js';
 export const PsLayer = ({ children, zIndex }) => (_jsx(PsLayerContext.Provider, { value: zIndex, children: children }));

package/dist/esm/components/ps-link-button.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsButtonBaseClassName, PsButtonSizeClassNames, PsLinkButtonVariantClassNames, } from '../constants/ps-button-classes';
+import { PsButtonBaseClassName, PsButtonSizeClassNames, PsLinkButtonVariantClassNames, } from '../constants/ps-button-classes.js';
 export const PsLinkButton = ({ children, className, href, leadingIcon, LinkComponent, size = 'default', trailingIcon, variant = 'secondary', ...props }) => {
     const linkClassName = PallasoftClassNameService.merge(PsButtonBaseClassName, PsButtonSizeClassNames[size], PsLinkButtonVariantClassNames[variant], className);
     const content = (_jsxs("span", { className: 'inline-flex min-w-0 items-center gap-2', children: [leadingIcon ? _jsx("span", { className: 'shrink-0', children: leadingIcon }) : null, _jsx("span", { className: 'truncate', children: children }), trailingIcon ? _jsx("span", { className: 'shrink-0', children: trailingIcon }) : null] }));

package/dist/esm/components/ps-link-tile-grid.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
 import { PsStaggerContainer, PsStaggerItem } from '@pallasoft/ps-motion-components';
-import { PsWebsiteSectionConfig } from '../constants/ps-website-section-config';
+import { PsWebsiteSectionConfig } from '../constants/ps-website-section-config.js';
 const tileClassName = 'ps-pressable ps-focus-ring group flex h-full items-center justify-between gap-3 rounded-ps-card border border-line bg-surface px-4 py-3 transition-colors hover:border-primary/50';
 export const PsLinkTileGrid = ({ LinkComponent, tiles }) => {
     const renderTile = (tile, content) => LinkComponent ? (_jsx(LinkComponent, { "aria-label": tile.ariaLabel, className: tileClassName, prefetch: 'intent', to: tile.href, children: content })) : (_jsx("a", { "aria-label": tile.ariaLabel, className: tileClassName, href: tile.href, children: content }));

package/dist/esm/components/ps-list-tile.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsSkeleton } from './ps-skeleton';
-import { PsSkeletonGroup } from './ps-skeleton-group';
+import { PsSkeleton } from './ps-skeleton.js';
+import { PsSkeletonGroup } from './ps-skeleton-group.js';
 const densityClassNames = {
     compact: 'py-2',
     normal: 'py-2.5',

package/dist/esm/components/ps-metric-card.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsSkeleton } from './ps-skeleton';
-import { PsSkeletonGroup } from './ps-skeleton-group';
+import { PsSkeleton } from './ps-skeleton.js';
+import { PsSkeletonGroup } from './ps-skeleton-group.js';
 export const PsMetricCard = ({ changeLabel, className, icon, isLoading = false, label, value, }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: PallasoftClassNameService.merge('ps-metric-card flex min-w-0 flex-col gap-3 p-3.5 sm:p-4', className), label: label, children: [_jsx(PsSkeleton, { className: 'h-2.5 w-24' }), _jsx(PsSkeleton, { className: 'h-6 w-32' })] })) : (_jsx("section", { className: PallasoftClassNameService.merge('ps-metric-card min-w-0 p-3.5 sm:p-4', className), children: _jsxs("div", { className: 'flex items-start justify-between gap-3', children: [_jsxs("div", { className: 'min-w-0', children: [_jsx("p", { className: 'ps-eyebrow truncate', children: label }), _jsx("p", { className: 'mt-2 truncate text-2xl font-semibold text-ink', children: value }), changeLabel ? _jsx("p", { className: 'mt-1 text-sm text-slate-500', children: changeLabel }) : null] }), icon ? (_jsx("div", { className: 'flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-primary-soft text-primary', children: icon })) : null] }) }));

package/dist/esm/components/ps-metric-grid-skeleton.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PsMetricCard } from './ps-metric-card';
+import { PsMetricCard } from './ps-metric-card.js';
 export const PsMetricGridSkeleton = ({ count }) => (_jsx("div", { className: 'grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4', children: Array.from({ length: count }, (_, index) => (_jsx(PsMetricCard, { isLoading: true, label: '', value: '' }, index))) }));

package/dist/esm/components/ps-metric-grid.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsMetricGridColumns, PsMetricGridConfig } from '../constants/ps-metric-grid-config';
-import { PsMetricCard } from './ps-metric-card';
+import { PsMetricGridColumns, PsMetricGridConfig } from '../constants/ps-metric-grid-config.js';
+import { PsMetricCard } from './ps-metric-card.js';
 export const PsMetricGrid = ({ items }) => {
     const columns = PsMetricGridColumns[Math.min(items.length, PsMetricGridConfig.maxColumns)];
     return (_jsx("div", { className: PallasoftClassNameService.merge('grid grid-cols-1 gap-3', columns === undefined ? PsMetricGridColumns[PsMetricGridConfig.defaultColumns] : columns), children: items.map((item) => (_jsx(PsMetricCard, { label: item.label, value: item.value }, item.label))) }));

package/dist/esm/components/ps-metric-row.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PsStaggerContainer, PsStaggerItem } from '@pallasoft/ps-motion-components';
-import { PsWebsiteSectionConfig } from '../constants/ps-website-section-config';
-import { PsMetricCard } from './ps-metric-card';
+import { PsWebsiteSectionConfig } from '../constants/ps-website-section-config.js';
+import { PsMetricCard } from './ps-metric-card.js';
 export const PsMetricRow = ({ metrics }) => (_jsx(PsStaggerContainer, { className: 'grid w-full grid-cols-1 gap-5 md:grid-cols-3', staggerDelay: PsWebsiteSectionConfig.staggerDelay, children: metrics.map((metric) => (_jsx(PsStaggerItem, { children: _jsx(PsMetricCard, { label: metric.label, value: metric.value }) }, metric.label))) }));

package/dist/esm/components/ps-navigation-progress.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService, PallasoftZIndex } from '@pallasoft/ps-design-system';
-import { PsNavigationProgressConfig } from '../constants/ps-navigation-progress-config';
-import { usePsNavigationProgress } from '../hooks/use-ps-navigation-progress';
+import { PsNavigationProgressConfig } from '../constants/ps-navigation-progress-config.js';
+import { usePsNavigationProgress } from '../hooks/use-ps-navigation-progress.js';
 export const PsNavigationProgress = ({ className, color = PsNavigationProgressConfig.defaultColor, delayMs = PsNavigationProgressConfig.showDelayMs, height = PsNavigationProgressConfig.defaultHeight, isLoading, label = PsNavigationProgressConfig.defaultLabel, progress, shadow = true, }) => {
     const { isAnimated, isVisible, width } = usePsNavigationProgress(isLoading !== undefined
         ? isLoading

package/dist/esm/components/ps-page-header.js

@@ -1,4 +1,4 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { PsBackLink } from './ps-back-link';
-import { PsSectionHeader } from './ps-section-header';
+import { PsBackLink } from './ps-back-link.js';
+import { PsSectionHeader } from './ps-section-header.js';
 export const PsPageHeader = ({ actions, backLink, title }) => (_jsx(PsSectionHeader, { leading: backLink ? _jsx(PsBackLink, { ...backLink }) : undefined, title: title, trailing: actions ? (_jsx("div", { className: 'flex flex-wrap items-center justify-end gap-2', children: actions })) : undefined }));

package/dist/esm/components/ps-page-skeleton.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
-import { PsPageHeader } from './ps-page-header';
-import { PsPageLayout } from './ps-page-layout';
-import { PsPageStack } from './ps-page-stack';
-import { PsSectionHeader } from './ps-section-header';
-import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
+import { PsPageHeader } from './ps-page-header.js';
+import { PsPageLayout } from './ps-page-layout.js';
+import { PsPageStack } from './ps-page-stack.js';
+import { PsSectionHeader } from './ps-section-header.js';
+import { PsSkeleton } from './ps-skeleton.js';
 export const PsPageSkeleton = ({ children, hasActions = false, isNarrow = false, loadingLabel, title, }) => (_jsx(PsPageLayout, { isNarrow: isNarrow, children: _jsxs(PsPageStack, { children: [title === undefined ? (_jsx(PsSectionHeader, { isLoading: true, title: loadingLabel, trailing: hasActions })) : (_jsx(PsPageHeader, { actions: hasActions ? (_jsx(PsSkeleton, { height: '2.5rem', radius: '9999px', shape: PsSkeletonShape.Block, width: '9rem' })) : undefined, title: title })), children] }) }));

package/dist/esm/components/ps-pallasoft-mark.js

@@ -1,3 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PsPallasoftMarkConfig } from '../constants/ps-pallasoft-mark-config';
+import { PsPallasoftMarkConfig } from '../constants/ps-pallasoft-mark-config.js';
 export const PsPallasoftMark = ({ className, title }) => (_jsxs("svg", { "aria-hidden": title === undefined ? true : undefined, className: className, fill: 'none', role: title === undefined ? undefined : 'img', viewBox: PsPallasoftMarkConfig.viewBox, xmlns: 'http://www.w3.org/2000/svg', children: [title === undefined ? null : _jsx("title", { children: title }), _jsx("path", { clipRule: 'evenodd', d: PsPallasoftMarkConfig.primaryPath, fill: PsPallasoftMarkConfig.primaryColor, fillRule: 'evenodd' }), _jsx("path", { clipRule: 'evenodd', d: PsPallasoftMarkConfig.secondaryPath, fill: PsPallasoftMarkConfig.secondaryColor, fillRule: 'evenodd' })] }));

package/dist/esm/components/ps-pallasoft-sign-in-button.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsPallasoftSignInClasses } from '../constants/ps-pallasoft-sign-in-classes';
-import { PsPallasoftMark } from './ps-pallasoft-mark';
+import { PsPallasoftSignInClasses } from '../constants/ps-pallasoft-sign-in-classes.js';
+import { PsPallasoftMark } from './ps-pallasoft-mark.js';
 export const PsPallasoftSignInButton = ({ children, className, href, LinkComponent, size = 'default', ...props }) => {
     const linkClassName = PallasoftClassNameService.merge(PsPallasoftSignInClasses.base, PsPallasoftSignInClasses.sizes[size], className);
     const content = (_jsxs(_Fragment, { children: [_jsx(PsPallasoftMark, { className: PallasoftClassNameService.merge('shrink-0', PsPallasoftSignInClasses.markSizes[size]) }), _jsx("span", { className: 'truncate', children: children })] }));

package/dist/esm/components/ps-pill.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
-import { PsSkeleton } from './ps-skeleton';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
+import { PsSkeleton } from './ps-skeleton.js';
 const toneClassNames = {
     danger: 'bg-rose-50 text-rose-700 ring-rose-100 dark:bg-rose-500/18 dark:text-rose-100 dark:ring-rose-300/22',
     neutral: 'bg-slate-100 text-slate-700 ring-slate-200 dark:bg-white/10 dark:text-slate-100 dark:ring-white/12',

package/dist/esm/components/ps-rating-display.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
 import { PsIcon, PsIconKey } from '@pallasoft/ps-icons';
-import { PsRatingDisplayConfig } from '../constants/ps-rating-display-config';
-import { PsRatingDisplaySize } from '../constants/ps-rating-display-size';
+import { PsRatingDisplayConfig } from '../constants/ps-rating-display-config.js';
+import { PsRatingDisplaySize } from '../constants/ps-rating-display-size.js';
 export const PsRatingDisplay = ({ className, label, max = PsRatingDisplayConfig.defaultMax, score, size = PsRatingDisplaySize.Medium, }) => (_jsx("div", { "aria-label": label, className: PallasoftClassNameService.merge('flex items-center gap-1', className), role: 'img', children: Array.from({ length: max }, (_, index) => index + 1).map((value) => (_jsx(PsIcon, { className: PallasoftClassNameService.merge(PsRatingDisplayConfig.iconClassNames[size], value <= score
             ? PsRatingDisplayConfig.filledClassName
             : PsRatingDisplayConfig.emptyClassName), iconKey: PsIconKey.Star }, value))) }));

package/dist/esm/components/ps-reflective-app-shell.js

@@ -9,5 +9,5 @@ export const PsReflectiveAppShell = ({ children, className, contentClassName, fr
         contentRef.current?.scrollTo({ top: 0, left: 0 });
         window.scrollTo({ top: 0, left: 0 });
     }, [scrollResetKey]);
-    return (_jsx("section", { className: PallasoftClassNameService.merge('ps-reflective-frame h-[100dvh] overflow-hidden text-ink', className), children: _jsxs("div", { className: PallasoftClassNameService.merge('ps-liquid-strong grid h-full min-h-0 w-full overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)]', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, _jsxs("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, _jsx("main", { ref: contentRef, className: PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 py-5 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: children })] })] }) }));
+    return (_jsx("section", { className: PallasoftClassNameService.merge('ps-reflective-frame h-[100dvh] overflow-hidden text-ink', className), children: _jsxs("div", { className: PallasoftClassNameService.merge('ps-liquid-strong grid h-full min-h-0 w-full overflow-hidden border-line/70 bg-white/70 backdrop-blur-2xl transition-[grid-template-columns] duration-200 dark:border-white/10 dark:bg-surface/70 md:grid-cols-[var(--ps-sidebar-width)_minmax(0,1fr)]', frameClassName), style: { ['--ps-sidebar-width']: sidebarWidth }, children: [sidebar, _jsxs("div", { className: 'flex min-h-0 min-w-0 flex-col bg-white/32 dark:bg-white/[0.02]', children: [topbar, _jsx("main", { ref: contentRef, className: PallasoftClassNameService.merge('ps-scrollbar min-h-0 flex-1 overflow-y-auto px-4 ps-page-enter sm:px-5 lg:px-6 xl:px-7', contentClassName), children: _jsx("div", { className: 'py-5', children: children }) })] })] }) }));
 };

package/dist/esm/components/ps-scaled-preview.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { PallasoftClassNameService } from '@pallasoft/ps-design-system';
-import { PsScaledPreviewConfig } from '../constants/ps-scaled-preview-config';
-import { usePsElementSize } from '../hooks/use-ps-element-size';
+import { PsScaledPreviewConfig } from '../constants/ps-scaled-preview-config.js';
+import { usePsElementSize } from '../hooks/use-ps-element-size.js';
 export const PsScaledPreview = ({ children, className, designWidth = PsScaledPreviewConfig.designWidth, isDecorative = true, }) => {
     const [frameRef, frame] = usePsElementSize();
     const [contentRef, content] = usePsElementSize();

package/dist/esm/components/ps-section-header.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { PsSkeletonShape } from '../constants/ps-skeleton-shape';
-import { PsSkeleton } from './ps-skeleton';
-import { PsSkeletonGroup } from './ps-skeleton-group';
+import { PsSkeletonShape } from '../constants/ps-skeleton-shape.js';
+import { PsSkeleton } from './ps-skeleton.js';
+import { PsSkeletonGroup } from './ps-skeleton-group.js';
 export const PsSectionHeader = ({ description, eyebrow, isLoading = false, leading, title, trailing, }) => isLoading ? (_jsxs(PsSkeletonGroup, { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', label: title, children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [eyebrow ? _jsx(PsSkeleton, { className: 'h-2.5 w-24' }) : null, _jsx(PsSkeleton, { className: 'h-6 w-52' }), description ? _jsx(PsSkeleton, { className: 'h-3 w-72' }) : null] }), trailing ? _jsx(PsSkeleton, { className: 'h-ps-control w-32', shape: PsSkeletonShape.Block }) : null] })) : (_jsxs("div", { className: 'flex flex-wrap items-end justify-between gap-x-4 gap-y-3', children: [_jsxs("div", { className: 'flex min-w-0 flex-1 basis-auto flex-col gap-2', children: [leading, eyebrow ? (_jsx("p", { className: 'text-[0.68rem] font-semibold uppercase tracking-[0.22em] text-ink/50', children: eyebrow })) : null, _jsx("h1", { className: 'break-words text-xl font-extrabold text-ink sm:text-2xl', children: title }), description ? (_jsx("p", { className: 'max-w-3xl text-sm leading-6 text-ink/60', children: description })) : null] }), trailing ? (_jsx("div", { className: 'flex w-full shrink-0 items-center justify-end sm:ml-auto sm:w-auto', children: trailing })) : null] }));