@porsche-design-system/components-react 3.31.0 → 4.0.0-alpha.0

package/ssr/esm/provider.d.ts

@@ -1,13 +1,10 @@
-import type { PropsWithChildren, JSX } from 'react';
-import type { Theme } from './lib/types';
+import type { JSX, PropsWithChildren } from 'react';
 export declare const PorscheDesignSystemContext: import("react").Context<{
     prefix?: string;
-    theme: Theme;
 }>;
 type Props = {
     prefix?: string;
     cdn?: 'auto' | 'cn';
-    theme?: Theme;
 };
-export declare const PorscheDesignSystemProvider: ({ prefix, cdn, theme, ...props }: PropsWithChildren<Props>) => JSX.Element;
+export declare const PorscheDesignSystemProvider: ({ prefix, cdn, ...props }: PropsWithChildren<Props>) => JSX.Element;
 export {};

package/ssr/esm/public-api.d.ts

@@ -1,6 +1,6 @@
 export { componentsReady } from '@porsche-design-system/components-js';
+export { skipCheckForPorscheDesignSystemProviderDuringTests, useToastManager } from './hooks';
 export * from './lib/components';
 export * from './lib/types';
-export { PorscheDesignSystemProvider, PorscheDesignSystemContext } from './provider';
-export { skipCheckForPorscheDesignSystemProviderDuringTests, useToastManager } from './hooks';
+export { PorscheDesignSystemContext, PorscheDesignSystemProvider } from './provider';
 export { skipPorscheDesignSystemCDNRequestsDuringTests } from './utils';

package/styles/package.json

@@ -10,9 +10,9 @@
       "default": "./cjs/index.cjs"
     },
     "./vanilla-extract": {
-      "types": "./vanilla-extract/esm/vanilla-extract/index.d.ts",
-      "import": "./vanilla-extract/esm/vanilla-extract/index.mjs",
-      "default": "./vanilla-extract/cjs/vanilla-extract/index.cjs"
+      "types": "./vanilla-extract/esm/index.d.ts",
+      "import": "./vanilla-extract/esm/index.mjs",
+      "default": "./vanilla-extract/cjs/index.cjs"
     }
   }
 }

package/tailwindcss/index.css

@@ -1,75 +1,52 @@
 @custom-variant dark (&:where(.dark, .dark *));
 
 @theme {
+  /* Reset */
+  --color-*: initial;
+
   /* Color */
-  --color-primary: #010205;
-  --color-canvas: #FFF;
-  --color-surface: #EEEFF2;
-  --color-shading: rgba(1,2,5,.67);
-  --color-frosted: hsl(240 4% 85%/35%);
-  --color-contrast-low: #D8D8DB;
-  --color-contrast-medium: #6B6D70;
-  --color-contrast-high: #535457;
-  --color-success: #197E10;
-  --color-success-soft: #E4FFEC;
-  --color-warning: #F3BE00;
-  --color-warning-soft: #FFF4D2;
-  --color-error: #CC1922;
-  --color-error-soft: #FFE2E4;
-  --color-info: #2762EC;
-  --color-info-soft: #D3E1FF;
-  --color-hover: rgba(148,149,152,.18);
-  --color-active: rgba(148,149,152,.2);
-  --color-focus: #1A44EA;
-  --color-disabled: #949598;
+  --color-black: #000;
+  --color-white: #fff;
+
+  --color-focus: #1a44ea;
+  --color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
+  --color-canvas: #fff;
+  --color-surface: hsl(240, 7.7%, 97.5%);
+  --color-frosted: hsla(236, 6.4%, 51%, 0.148);
+  --color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
+  --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+  --color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
+  --color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
+  --color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
+  --color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
+  --color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
+  --color-primary: hsl(225, 66.7%, 1.2%);
+  --color-success: hsl(115, 77.5%, 27.8%);
+  --color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
+  --color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
+  --color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
+  --color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
+  --color-warning: hsl(28, 97.7%, 34.1%);
+  --color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
+  --color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
+  --color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
+  --color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
+  --color-error: hsl(357, 78%, 41%);
+  --color-error-low: hsla(357, 78%, 41%, 0.18);
+  --color-error-medium: hsla(357, 78%, 41%, 0.6);
+  --color-error-frosted: hsla(357, 78%, 41%, 0.18);
+  --color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
+  --color-info: hsl(228, 83.2%, 51%);
+  --color-info-low: hsla(228, 83.2%, 51%, 0.18);
+  --color-info-medium: hsla(228, 83.2%, 51%, 0.6);
+  --color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
+  --color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
   --color-skeleton: #f7f7f7;
 
-  --color-primary-light: #010205;
-  --color-canvas-light: #FFF;
-  --color-surface-light: #EEEFF2;
-  --color-shading-light: rgba(1,2,5,.67);
-  --color-frosted-light: hsl(240 4% 85%/35%);
-  --color-contrast-low-light: #D8D8DB;
-  --color-contrast-medium-light: #6B6D70;
-  --color-contrast-high-light: #535457;
-  --color-success-light: #197E10;
-  --color-success-soft-light: #E4FFEC;
-  --color-warning-light: #F3BE00;
-  --color-warning-soft-light: #FFF4D2;
-  --color-error-light: #CC1922;
-  --color-error-soft-light: #FFE2E4;
-  --color-info-light: #2762EC;
-  --color-info-soft-light: #D3E1FF;
-  --color-hover-light: rgba(148,149,152,.18);
-  --color-active-light: rgba(148,149,152,.2);
-  --color-focus-light: #1A44EA;
-  --color-disabled-light: #949598;
-  --color-skeleton-light: #f7f7f7;
-
-  --color-primary-dark: #FBFCFF;
-  --color-canvas-dark: #0E0E12;
-  --color-surface-dark: #212225;
-  --color-shading-dark: rgba(38,38,41,.67);
-  --color-frosted-dark: hsl(240 3% 26%/35%);
-  --color-contrast-low-dark: #404044;
-  --color-contrast-medium-dark: #88898C;
-  --color-contrast-high-dark: #AFB0B3;
-  --color-success-dark: #09D087;
-  --color-success-soft-dark: #003320;
-  --color-warning-dark: #F7CB47;
-  --color-warning-soft-dark: #362B0A;
-  --color-error-dark: #FC4040;
-  --color-error-soft-dark: #3A0F0F;
-  --color-info-dark: #178BFF;
-  --color-info-soft-dark: #04294E;
-  --color-hover-dark: rgba(148,149,152,.18);
-  --color-active-dark: rgba(126,127,130,.2);
-  --color-focus-dark: #1A44EA;
-  --color-disabled-dark: #7E7F82;
-  --color-skeleton-dark: #1a1b1e;
-
   /* Typography */
-  --font-porsche-next: 'Porsche Next','Arial Narrow',Arial,'Heiti SC',SimHei,sans-serif;
+  --font-porsche-next:
+    "Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif;
+  --font-sans: var(--font-porsche-next);
 
   --font-weight-normal: 400;
   --font-weight-semibold: 600;
@@ -77,7 +54,7 @@
 
   --leading-normal: calc(6px + 2.125ex);
 
-  --text-2xs: .75rem;
+  --text-2xs: 0.75rem;
   --text-2xs--line-height: calc(6px + 2.125ex);
   --text-xs: clamp(0.81rem, 0.23vw + 0.77rem, 0.88rem);
   --text-xs--line-height: calc(6px + 2.125ex);
@@ -103,7 +80,7 @@
   --breakpoint-2xl: 1920px;
 
   /* Spacing */
-  --spacing: .25rem;
+  --spacing: 0.25rem;
 
   --spacing-fluid-xs: clamp(4px, 0.25vw + 3px, 8px);
   --spacing-fluid-sm: clamp(8px, 0.5vw + 6px, 16px);
@@ -120,11 +97,17 @@
   --spacing-static-2xl: 80px;
 
   /* Border */
+  --radius-xs: 2px;
   --radius-sm: 4px;
-  --radius-md: 8px;
-  --radius-lg: 12px;
-
-  --default-border-width: 2px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-xl: 12px;
+  --radius-2xl: 16px;
+  --radius-3xl: 24px;
+  --radius-4xl: 32px;
+  --radius-full: calc(infinity * 1px);
+
+  --default-border-width: 1px;
   --border-width-regular: 2px;
   --border-width-thin: 1px;
 
@@ -132,27 +115,28 @@
   --blur-frosted: 32px;
 
   /* Shadow */
-  --shadow-low: 0px 3px 8px rgba(0,0,0,.16);
-  --shadow-medium: 0px 4px 16px rgba(0,0,0,.16);
-  --shadow-high: 0px 8px 40px rgba(0,0,0,.16);
+  --shadow-low: 0px 3px 8px rgba(0, 0, 0, 0.16);
+  --shadow-medium: 0px 4px 16px rgba(0, 0, 0, 0.16);
+  --shadow-high: 0px 8px 40px rgba(0, 0, 0, 0.16);
 
   /* Outline */
   --default-outline-width: 2px;
 
   /* Motion */
-  --default-transition-timing-function: cubic-bezier(.25,.1,.25,1);
-  --ease-in-out: cubic-bezier(.25,.1,.25,1);
-  --ease-in: cubic-bezier(0,0,.2,1);
-  --ease-out: cubic-bezier(.4,0,.5,1);
-
-  --default-transition-duration: .25s;
-  --transition-duration-short: .25s;
-  --transition-duration-moderate: .4s;
-  --transition-duration-long: .6s;
+  --default-transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-in-out: cubic-bezier(0.25, 0.1, 0.25, 1);
+  --ease-in: cubic-bezier(0, 0, 0.2, 1);
+  --ease-out: cubic-bezier(0.4, 0, 0.5, 1);
+
+  --default-transition-duration: 0.25s;
+  --transition-duration-short: 0.25s;
+  --transition-duration-moderate: 0.4s;
+  --transition-duration-long: 0.6s;
   --transition-duration-very-long: 1.2s;
 
   /* Animation */
-  --animate-skeleton: skeleton var(--transition-duration-long) var(--ease-in-out) infinite;
+  --animate-skeleton: skeleton var(--transition-duration-long)
+    var(--ease-in-out) infinite;
 
   @keyframes skeleton {
     from {
@@ -166,75 +150,114 @@
 
 @layer theme {
   .light {
-    --color-primary: #010205;
-    --color-canvas: #FFF;
-    --color-surface: #EEEFF2;
-    --color-shading: rgba(1,2,5,.67);
-    --color-frosted: hsl(240 4% 85%/35%);
-    --color-contrast-low: #D8D8DB;
-    --color-contrast-medium: #6B6D70;
-    --color-contrast-high: #535457;
-    --color-success: #197E10;
-    --color-success-soft: #E4FFEC;
-    --color-warning: #F3BE00;
-    --color-warning-soft: #FFF4D2;
-    --color-error: #CC1922;
-    --color-error-soft: #FFE2E4;
-    --color-info: #2762EC;
-    --color-info-soft: #D3E1FF;
-    --color-hover: rgba(148,149,152,.18);
-    --color-active: rgba(148,149,152,.2);
-    --color-focus: #1A44EA;
-    --color-disabled: #949598;
+    --color-focus: #1a44ea;
+    --color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
+    --color-canvas: #fff;
+    --color-surface: hsl(240, 7.7%, 97.5%);
+    --color-frosted: hsla(236, 6.4%, 51%, 0.148);
+    --color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
+    --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+    --color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
+    --color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
+    --color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
+    --color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
+    --color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
+    --color-primary: hsl(225, 66.7%, 1.2%);
+    --color-success: hsl(115, 77.5%, 27.8%);
+    --color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
+    --color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
+    --color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
+    --color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
+    --color-warning: hsl(28, 97.7%, 34.1%);
+    --color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
+    --color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
+    --color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
+    --color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
+    --color-error: hsl(357, 78%, 41%);
+    --color-error-low: hsla(357, 78%, 41%, 0.18);
+    --color-error-medium: hsla(357, 78%, 41%, 0.6);
+    --color-error-frosted: hsla(357, 78%, 41%, 0.18);
+    --color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
+    --color-info: hsl(228, 83.2%, 51%);
+    --color-info-low: hsla(228, 83.2%, 51%, 0.18);
+    --color-info-medium: hsla(228, 83.2%, 51%, 0.6);
+    --color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
+    --color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
     --color-skeleton: #f7f7f7;
   }
 
   .dark {
-    --color-primary: #FBFCFF;
-    --color-canvas: #0E0E12;
-    --color-surface: #212225;
-    --color-shading: rgba(38,38,41,.67);
-    --color-frosted: hsl(240 3% 26%/35%);
-    --color-contrast-low: #404044;
-    --color-contrast-medium: #88898C;
-    --color-contrast-high: #AFB0B3;
-    --color-success: #09D087;
-    --color-success-soft: #003320;
-    --color-warning: #F7CB47;
-    --color-warning-soft: #362B0A;
-    --color-error: #FC4040;
-    --color-error-soft: #3A0F0F;
-    --color-info: #178BFF;
-    --color-info-soft: #04294E;
-    --color-hover: rgba(148,149,152,.18);
-    --color-active: rgba(126,127,130,.2);
-    --color-focus: #1A44EA;
-    --color-disabled: #7E7F82;
+    --color-focus: #1a44ea;
+    --color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
+    --color-canvas: hsl(225, 66.7%, 1.2%);
+    --color-surface: hsl(240, 2%, 10%);
+    --color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
+    --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
+    --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+    --color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
+    --color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
+    --color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
+    --color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
+    --color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
+    --color-primary: hsl(240, 12.5%, 96.9%);
+    --color-success: hsl(157, 84.9%, 41.6%);
+    --color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
+    --color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
+    --color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
+    --color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
+    --color-warning: hsl(28, 90.2%, 56.1%);
+    --color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
+    --color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
+    --color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
+    --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
+    --color-error: hsl(0, 96.9%, 62%);
+    --color-error-low: hsla(0, 96.9%, 62%, 0.18);
+    --color-error-medium: hsla(0, 96.9%, 62%, 0.6);
+    --color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
+    --color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
+    --color-info: hsl(210, 100%, 54.5%);
+    --color-info-low: hsla(210, 100%, 54.5%, 0.18);
+    --color-info-medium: hsla(210, 100%, 54.5%, 0.6);
+    --color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
+    --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
     --color-skeleton: #1a1b1e;
   }
 
   .auto {
     @media (prefers-color-scheme: dark) {
-      --color-primary: #FBFCFF;
-      --color-canvas: #0E0E12;
-      --color-surface: #212225;
-      --color-shading: rgba(38,38,41,.67);
-      --color-frosted: hsl(240 3% 26%/35%);
-      --color-contrast-low: #404044;
-      --color-contrast-medium: #88898C;
-      --color-contrast-high: #AFB0B3;
-      --color-success: #09D087;
-      --color-success-soft: #003320;
-      --color-warning: #F7CB47;
-      --color-warning-soft: #362B0A;
-      --color-error: #FC4040;
-      --color-error-soft: #3A0F0F;
-      --color-info: #178BFF;
-      --color-info-soft: #04294E;
-      --color-hover: rgba(148,149,152,.18);
-      --color-active: rgba(126,127,130,.2);
-      --color-focus: #1A44EA;
-      --color-disabled: #7E7F82;
+      --color-focus: #1a44ea;
+      --color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
+      --color-canvas: hsl(225, 66.7%, 1.2%);
+      --color-surface: hsl(240, 2%, 10%);
+      --color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
+      --color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
+      --color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+      --color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
+      --color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
+      --color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
+      --color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
+      --color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
+      --color-primary: hsl(240, 12.5%, 96.9%);
+      --color-success: hsl(157, 84.9%, 41.6%);
+      --color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
+      --color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
+      --color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
+      --color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
+      --color-warning: hsl(28, 90.2%, 56.1%);
+      --color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
+      --color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
+      --color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
+      --color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
+      --color-error: hsl(0, 96.9%, 62%);
+      --color-error-low: hsla(0, 96.9%, 62%, 0.18);
+      --color-error-medium: hsla(0, 96.9%, 62%, 0.6);
+      --color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
+      --color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
+      --color-info: hsl(210, 100%, 54.5%);
+      --color-info-low: hsla(210, 100%, 54.5%, 0.18);
+      --color-info-medium: hsla(210, 100%, 54.5%, 0.6);
+      --color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
+      --color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
       --color-skeleton: #1a1b1e;
     }
   }
@@ -259,8 +282,7 @@
 
 /* Grid */
 @utility grid-template {
-  @apply
-    [--pds-internal-grid-safe-zone:max(22px,10.625vw-12px)]
+  @apply [--pds-internal-grid-safe-zone:max(22px,10.625vw-12px)]
     [--_pds-grid-col:minmax(0,var(--pds-internal-grid-outer-column,calc(var(--pds-internal-grid-safe-zone)-var(--spacing-fluid-md))))]
     grid
     grid-cols-[[full-start]_var(--_pds-grid-col)_[wide-start_extended-start_basic-start_narrow-start]_repeat(6,minmax(0,1fr))_[narrow-end_basic-end_extended-end_wide-end]_var(--_pds-grid-col)_[full-end]]
@@ -382,19 +404,19 @@
 
 /* Typography: Heading */
 @utility prose-heading-sm {
-  @apply font-porsche-next not-italic font-semibold text-sm text-primary;
+  @apply font-porsche-next not-italic font-normal text-sm text-primary;
 }
 @utility prose-heading-md {
-  @apply font-porsche-next not-italic font-semibold text-md text-primary;
+  @apply font-porsche-next not-italic font-normal text-md text-primary;
 }
 @utility prose-heading-lg {
-  @apply font-porsche-next not-italic font-semibold text-lg text-primary;
+  @apply font-porsche-next not-italic font-normal text-lg text-primary;
 }
 @utility prose-heading-xl {
-  @apply font-porsche-next not-italic font-semibold text-xl text-primary;
+  @apply font-porsche-next not-italic font-normal text-xl text-primary;
 }
 @utility prose-heading-2xl {
-  @apply font-porsche-next not-italic font-semibold text-2xl text-primary;
+  @apply font-porsche-next not-italic font-normal text-2xl text-primary;
 }
 
 /* Typography: Display */
@@ -406,4 +428,4 @@
 }
 @utility prose-display-lg {
   @apply font-porsche-next not-italic font-normal leading-normal text-primary text-[clamp(2.28rem,5.2vw+1.24rem,7.48rem)];
-}
+}

package/tokens/cjs/index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+var tokens = require('@porsche-design-system/components-js/tokens');
+
+
+
+Object.keys(tokens).forEach(function (k) {
+	if (k !== 'default' && !Object.prototype.hasOwnProperty.call(exports, k)) Object.defineProperty(exports, k, {
+		enumerable: true,
+		get: function () { return tokens[k]; }
+	});
+});

package/tokens/esm/index.d.ts

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/tokens';

package/tokens/esm/index.mjs

@@ -0,0 +1 @@
+export * from '@porsche-design-system/components-js/tokens';

package/tokens/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "cjs/index.cjs",
+  "module": "esm/index.mjs",
+  "types": "esm/index.d.ts",
+  "sideEffects": false
+}

package/cjs/lib/components/button-group.wrapper.cjs

@@ -1,24 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var hooks = require('../../hooks.cjs');
-var utils = require('../../utils.cjs');
-
-const PButtonGroup = /*#__PURE__*/ react.forwardRef(({ direction = { base: 'column', xs: 'row' }, className, ...rest }, ref) => {
-    const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-button-group');
-    hooks.useBrowserLayoutEffect(() => {
-        elementRef.current.direction = direction;
-    }, [direction]);
-    const props = {
-        ...rest,
-        class: hooks.useMergedClass(elementRef, className),
-        ref: utils.syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsxRuntime.jsx(WebComponentTag, { ...props });
-});
-
-exports.PButtonGroup = PButtonGroup;

package/cjs/lib/components/checkbox-wrapper.wrapper.cjs

@@ -1,27 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var hooks = require('../../hooks.cjs');
-var utils = require('../../utils.cjs');
-
-/** @deprecated since v3.29.0, will be removed with next major release. Please use `p-checkbox` instead. */
-const PCheckboxWrapper = /*#__PURE__*/ react.forwardRef(({ hideLabel = false, label = '', loading = false, message = '', state = 'none', theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-checkbox-wrapper');
-    const propsToSync = [hideLabel, label, loading, message, state, theme || hooks.useTheme()];
-    hooks.useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['hideLabel', 'label', 'loading', 'message', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: hooks.useMergedClass(elementRef, className),
-        ref: utils.syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsxRuntime.jsx(WebComponentTag, { ...props });
-});
-
-exports.PCheckboxWrapper = PCheckboxWrapper;

package/cjs/lib/components/content-wrapper.wrapper.cjs

@@ -1,27 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var hooks = require('../../hooks.cjs');
-var utils = require('../../utils.cjs');
-
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Grid instead. */
-const PContentWrapper = /*#__PURE__*/ react.forwardRef(({ backgroundColor = 'transparent', theme, width = 'extended', className, ...rest }, ref) => {
-    const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-content-wrapper');
-    const propsToSync = [backgroundColor, theme || hooks.useTheme(), width];
-    hooks.useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['backgroundColor', 'theme', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: hooks.useMergedClass(elementRef, className),
-        ref: utils.syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsxRuntime.jsx(WebComponentTag, { ...props });
-});
-
-exports.PContentWrapper = PContentWrapper;

package/cjs/lib/components/fieldset-wrapper.wrapper.cjs

@@ -1,27 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var hooks = require('../../hooks.cjs');
-var utils = require('../../utils.cjs');
-
-/** @deprecated since v3.0.0, will be removed with next major release. Please use `p-fieldset` instead. */
-const PFieldsetWrapper = /*#__PURE__*/ react.forwardRef(({ label = '', labelSize = 'medium', message = '', required = false, state = 'none', theme, className, ...rest }, ref) => {
-    const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-fieldset-wrapper');
-    const propsToSync = [label, labelSize, message, required, state, theme || hooks.useTheme()];
-    hooks.useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['label', 'labelSize', 'message', 'required', 'state', 'theme'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: hooks.useMergedClass(elementRef, className),
-        ref: utils.syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsxRuntime.jsx(WebComponentTag, { ...props });
-});
-
-exports.PFieldsetWrapper = PFieldsetWrapper;

package/cjs/lib/components/flex-item.wrapper.cjs

@@ -1,27 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var hooks = require('../../hooks.cjs');
-var utils = require('../../utils.cjs');
-
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-const PFlexItem = /*#__PURE__*/ react.forwardRef(({ alignSelf = 'auto', flex = 'initial', grow = 0, offset = 'none', shrink = 1, width = 'auto', className, ...rest }, ref) => {
-    const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-flex-item');
-    const propsToSync = [alignSelf, flex, grow, offset, shrink, width];
-    hooks.useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['alignSelf', 'flex', 'grow', 'offset', 'shrink', 'width'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: hooks.useMergedClass(elementRef, className),
-        ref: utils.syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsxRuntime.jsx(WebComponentTag, { ...props });
-});
-
-exports.PFlexItem = PFlexItem;

package/cjs/lib/components/flex.wrapper.cjs

@@ -1,27 +0,0 @@
-"use client";
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var hooks = require('../../hooks.cjs');
-var utils = require('../../utils.cjs');
-
-/** @deprecated since v3.0.0, will be removed with next major release. Use native CSS Flex instead. */
-const PFlex = /*#__PURE__*/ react.forwardRef(({ alignContent = 'stretch', alignItems = 'stretch', direction = 'row', inline = false, justifyContent = 'flex-start', wrap = 'nowrap', className, ...rest }, ref) => {
-    const elementRef = react.useRef(undefined);
-    const WebComponentTag = hooks.usePrefix('p-flex');
-    const propsToSync = [alignContent, alignItems, direction, inline, justifyContent, wrap];
-    hooks.useBrowserLayoutEffect(() => {
-        const { current } = elementRef;
-        ['alignContent', 'alignItems', 'direction', 'inline', 'justifyContent', 'wrap'].forEach((propName, i) => (current[propName] = propsToSync[i]));
-    }, propsToSync);
-    const props = {
-        ...rest,
-        class: hooks.useMergedClass(elementRef, className),
-        ref: utils.syncRef(elementRef, ref)
-    };
-    // @ts-ignore
-    return jsxRuntime.jsx(WebComponentTag, { ...props });
-});
-
-exports.PFlex = PFlex;