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

package/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/esm/provider.mjs

@@ -1,18 +1,17 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { createContext, useEffect } from 'react';
 import { load } from '@porsche-design-system/components-js';
+import { createContext, useEffect } from 'react';
 
 // to warn users about missing PorscheDesignSystemProvider, we set the default values as undefined
 const PorscheDesignSystemContext = createContext({
     prefix: undefined,
-    theme: 'light',
 });
-const PorscheDesignSystemProvider = ({ prefix = '', cdn, theme = 'light', ...props }) => {
+const PorscheDesignSystemProvider = ({ prefix = '', cdn, ...props }) => {
     useEffect(() => {
         load({ prefix, cdn });
     }, []); // runtime prefix or cdn change is not supported
-    return jsx(PorscheDesignSystemContext.Provider, { value: { prefix, theme }, ...props });
+    return jsx(PorscheDesignSystemContext.Provider, { value: { prefix }, ...props });
 };
 
 export { PorscheDesignSystemContext, PorscheDesignSystemProvider };

package/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/esm/public-api.mjs

@@ -1,15 +1,13 @@
 export { componentsReady } from '@porsche-design-system/components-js';
+export { skipCheckForPorscheDesignSystemProviderDuringTests, useToastManager } from './hooks.mjs';
 export { PAccordion } from './lib/components/accordion.wrapper.mjs';
 export { PBanner } from './lib/components/banner.wrapper.mjs';
 export { PButton } from './lib/components/button.wrapper.mjs';
-export { PButtonGroup } from './lib/components/button-group.wrapper.mjs';
 export { PButtonPure } from './lib/components/button-pure.wrapper.mjs';
 export { PButtonTile } from './lib/components/button-tile.wrapper.mjs';
 export { PCanvas } from './lib/components/canvas.wrapper.mjs';
 export { PCarousel } from './lib/components/carousel.wrapper.mjs';
 export { PCheckbox } from './lib/components/checkbox.wrapper.mjs';
-export { PCheckboxWrapper } from './lib/components/checkbox-wrapper.wrapper.mjs';
-export { PContentWrapper } from './lib/components/content-wrapper.wrapper.mjs';
 export { PCrest } from './lib/components/crest.wrapper.mjs';
 export { PDisplay } from './lib/components/display.wrapper.mjs';
 export { PDivider } from './lib/components/divider.wrapper.mjs';
@@ -17,19 +15,14 @@ export { PDrilldown } from './lib/components/drilldown.wrapper.mjs';
 export { PDrilldownItem } from './lib/components/drilldown-item.wrapper.mjs';
 export { PDrilldownLink } from './lib/components/drilldown-link.wrapper.mjs';
 export { PFieldset } from './lib/components/fieldset.wrapper.mjs';
-export { PFieldsetWrapper } from './lib/components/fieldset-wrapper.wrapper.mjs';
 export { PFlag } from './lib/components/flag.wrapper.mjs';
-export { PFlex } from './lib/components/flex.wrapper.mjs';
-export { PFlexItem } from './lib/components/flex-item.wrapper.mjs';
 export { PFlyout } from './lib/components/flyout.wrapper.mjs';
-export { PGrid } from './lib/components/grid.wrapper.mjs';
-export { PGridItem } from './lib/components/grid-item.wrapper.mjs';
 export { PHeading } from './lib/components/heading.wrapper.mjs';
-export { PHeadline } from './lib/components/headline.wrapper.mjs';
 export { PIcon } from './lib/components/icon.wrapper.mjs';
 export { PInlineNotification } from './lib/components/inline-notification.wrapper.mjs';
 export { PInputDate } from './lib/components/input-date.wrapper.mjs';
 export { PInputEmail } from './lib/components/input-email.wrapper.mjs';
+export { PInputMonth } from './lib/components/input-month.wrapper.mjs';
 export { PInputNumber } from './lib/components/input-number.wrapper.mjs';
 export { PInputPassword } from './lib/components/input-password.wrapper.mjs';
 export { PInputSearch } from './lib/components/input-search.wrapper.mjs';
@@ -37,13 +30,11 @@ export { PInputTel } from './lib/components/input-tel.wrapper.mjs';
 export { PInputText } from './lib/components/input-text.wrapper.mjs';
 export { PInputTime } from './lib/components/input-time.wrapper.mjs';
 export { PInputUrl } from './lib/components/input-url.wrapper.mjs';
+export { PInputWeek } from './lib/components/input-week.wrapper.mjs';
 export { PLink } from './lib/components/link.wrapper.mjs';
 export { PLinkPure } from './lib/components/link-pure.wrapper.mjs';
-export { PLinkSocial } from './lib/components/link-social.wrapper.mjs';
 export { PLinkTile } from './lib/components/link-tile.wrapper.mjs';
-export { PLinkTileModelSignature } from './lib/components/link-tile-model-signature.wrapper.mjs';
 export { PLinkTileProduct } from './lib/components/link-tile-product.wrapper.mjs';
-export { PMarque } from './lib/components/marque.wrapper.mjs';
 export { PModal } from './lib/components/modal.wrapper.mjs';
 export { PModelSignature } from './lib/components/model-signature.wrapper.mjs';
 export { PMultiSelect } from './lib/components/multi-select.wrapper.mjs';
@@ -52,7 +43,6 @@ export { POptgroup } from './lib/components/optgroup.wrapper.mjs';
 export { PPagination } from './lib/components/pagination.wrapper.mjs';
 export { PPinCode } from './lib/components/pin-code.wrapper.mjs';
 export { PPopover } from './lib/components/popover.wrapper.mjs';
-export { PRadioButtonWrapper } from './lib/components/radio-button-wrapper.wrapper.mjs';
 export { PRadioGroup } from './lib/components/radio-group.wrapper.mjs';
 export { PRadioGroupOption } from './lib/components/radio-group-option.wrapper.mjs';
 export { PScroller } from './lib/components/scroller.wrapper.mjs';
@@ -60,7 +50,6 @@ export { PSegmentedControl } from './lib/components/segmented-control.wrapper.mj
 export { PSegmentedControlItem } from './lib/components/segmented-control-item.wrapper.mjs';
 export { PSelect } from './lib/components/select.wrapper.mjs';
 export { PSelectOption } from './lib/components/select-option.wrapper.mjs';
-export { PSelectWrapper } from './lib/components/select-wrapper.wrapper.mjs';
 export { PSheet } from './lib/components/sheet.wrapper.mjs';
 export { PSpinner } from './lib/components/spinner.wrapper.mjs';
 export { PStepperHorizontal } from './lib/components/stepper-horizontal.wrapper.mjs';
@@ -79,13 +68,10 @@ export { PTabsItem } from './lib/components/tabs-item.wrapper.mjs';
 export { PTag } from './lib/components/tag.wrapper.mjs';
 export { PTagDismissible } from './lib/components/tag-dismissible.wrapper.mjs';
 export { PText } from './lib/components/text.wrapper.mjs';
-export { PTextFieldWrapper } from './lib/components/text-field-wrapper.wrapper.mjs';
 export { PTextList } from './lib/components/text-list.wrapper.mjs';
 export { PTextListItem } from './lib/components/text-list-item.wrapper.mjs';
 export { PTextarea } from './lib/components/textarea.wrapper.mjs';
-export { PTextareaWrapper } from './lib/components/textarea-wrapper.wrapper.mjs';
 export { PToast } from './lib/components/toast.wrapper.mjs';
 export { PWordmark } from './lib/components/wordmark.wrapper.mjs';
 export { PorscheDesignSystemContext, PorscheDesignSystemProvider } from './provider.mjs';
-export { skipCheckForPorscheDesignSystemProviderDuringTests, useToastManager } from './hooks.mjs';
 export { skipPorscheDesignSystemCDNRequestsDuringTests } from './utils.mjs';

package/global-styles/cn/font-face.css

@@ -0,0 +1 @@
+@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-arabic-bold.1796b39.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-arabic-regular.413b375.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-bold.4cb90bb.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-regular.b845952.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-semi-bold.378f7d5.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-bold.d2546b1.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-regular.0b3d9b3.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-semi-bold.f3a9ae0.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-bold.0fbdc6d.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-regular.b8f1c20.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-semi-bold.b5f6fca.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-pashto-bold.f30f194.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-pashto-regular.3989814.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-bold.b9e9f23.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-regular.ac04c30.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-semi-bold.8d53572.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-urdu-bold.49a86a4.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-urdu-regular.ad23819.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}

package/global-styles/cn/index.css

@@ -0,0 +1,168 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family:
+    "Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif;
+  line-height: calc(6px + 2.125ex);
+  letter-spacing: normal;
+  text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+}
+:root {
+  --p-color-focus: #1a44ea;
+  --p-color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
+  --p-color-canvas: #fff;
+  --p-color-surface: hsl(240, 7.7%, 97.5%);
+  --p-color-frosted: hsla(236, 6.4%, 51%, 0.148);
+  --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
+  --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+  --p-color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
+  --p-color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
+  --p-color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
+  --p-color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
+  --p-color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
+  --p-color-primary: hsl(225, 66.7%, 1.2%);
+  --p-color-success: hsl(115, 77.5%, 27.8%);
+  --p-color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
+  --p-color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
+  --p-color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
+  --p-color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
+  --p-color-warning: hsl(28, 97.7%, 34.1%);
+  --p-color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
+  --p-color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
+  --p-color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
+  --p-color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
+  --p-color-error: hsl(357, 78%, 41%);
+  --p-color-error-low: hsla(357, 78%, 41%, 0.18);
+  --p-color-error-medium: hsla(357, 78%, 41%, 0.6);
+  --p-color-error-frosted: hsla(357, 78%, 41%, 0.18);
+  --p-color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
+  --p-color-info: hsl(228, 83.2%, 51%);
+  --p-color-info-low: hsla(228, 83.2%, 51%, 0.18);
+  --p-color-info-medium: hsla(228, 83.2%, 51%, 0.6);
+  --p-color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
+  --p-color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
+  --p-color-skeleton: #f7f7f7;
+
+  --p-radius-xs: 2px;
+  --p-radius-sm: 4px;
+  --p-radius-md: 6px;
+  --p-radius-lg: 8px;
+  --p-radius-xl: 12px;
+  --p-radius-2xl: 16px;
+  --p-radius-3xl: 24px;
+  --p-radius-4xl: 32px;
+  --p-radius-full: calc(infinity * 1px);
+}
+.light {
+  --p-color-focus: #1a44ea;
+  --p-color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
+  --p-color-canvas: #fff;
+  --p-color-surface: hsl(240, 7.7%, 97.5%);
+  --p-color-frosted: hsla(236, 6.4%, 51%, 0.148);
+  --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
+  --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+  --p-color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
+  --p-color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
+  --p-color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
+  --p-color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
+  --p-color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
+  --p-color-primary: hsl(225, 66.7%, 1.2%);
+  --p-color-success: hsl(115, 77.5%, 27.8%);
+  --p-color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
+  --p-color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
+  --p-color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
+  --p-color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
+  --p-color-warning: hsl(28, 97.7%, 34.1%);
+  --p-color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
+  --p-color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
+  --p-color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
+  --p-color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
+  --p-color-error: hsl(357, 78%, 41%);
+  --p-color-error-low: hsla(357, 78%, 41%, 0.18);
+  --p-color-error-medium: hsla(357, 78%, 41%, 0.6);
+  --p-color-error-frosted: hsla(357, 78%, 41%, 0.18);
+  --p-color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
+  --p-color-info: hsl(228, 83.2%, 51%);
+  --p-color-info-low: hsla(228, 83.2%, 51%, 0.18);
+  --p-color-info-medium: hsla(228, 83.2%, 51%, 0.6);
+  --p-color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
+  --p-color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
+  --p-color-skeleton: #f7f7f7;
+}
+.dark {
+  --p-color-focus: #1a44ea;
+  --p-color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
+  --p-color-canvas: hsl(225, 66.7%, 1.2%);
+  --p-color-surface: hsl(240, 2%, 10%);
+  --p-color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
+  --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
+  --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+  --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
+  --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
+  --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
+  --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
+  --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
+  --p-color-primary: hsl(240, 12.5%, 96.9%);
+  --p-color-success: hsl(157, 84.9%, 41.6%);
+  --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
+  --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
+  --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
+  --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
+  --p-color-warning: hsl(28, 90.2%, 56.1%);
+  --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
+  --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
+  --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
+  --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
+  --p-color-error: hsl(0, 96.9%, 62%);
+  --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
+  --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
+  --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
+  --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
+  --p-color-info: hsl(210, 100%, 54.5%);
+  --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
+  --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
+  --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
+  --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
+  --p-color-skeleton: #1a1b1e;
+}
+.auto {
+  @media (prefers-color-scheme: dark) {
+    --p-color-focus: #1a44ea;
+    --p-color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
+    --p-color-canvas: hsl(225, 66.7%, 1.2%);
+    --p-color-surface: hsl(240, 2%, 10%);
+    --p-color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
+    --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
+    --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+    --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
+    --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
+    --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
+    --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
+    --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
+    --p-color-primary: hsl(240, 12.5%, 96.9%);
+    --p-color-success: hsl(157, 84.9%, 41.6%);
+    --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
+    --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
+    --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
+    --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
+    --p-color-warning: hsl(28, 90.2%, 56.1%);
+    --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
+    --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
+    --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
+    --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
+    --p-color-error: hsl(0, 96.9%, 62%);
+    --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
+    --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
+    --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
+    --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
+    --p-color-info: hsl(210, 100%, 54.5%);
+    --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
+    --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
+    --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
+    --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
+    --p-color-skeleton: #1a1b1e;
+  }
+}
+@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-arabic-bold.1796b39.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-arabic-regular.413b375.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-bold.4cb90bb.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-regular.b845952.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-cyril-semi-bold.378f7d5.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-bold.d2546b1.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-regular.0b3d9b3.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-greek-semi-bold.f3a9ae0.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-bold.0fbdc6d.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-regular.b8f1c20.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-latin-semi-bold.b5f6fca.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-pashto-bold.f30f194.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-pashto-regular.3989814.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-bold.b9e9f23.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-regular.ac04c30.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-thai-semi-bold.8d53572.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-urdu-bold.49a86a4.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.cn/porsche-design-system/fonts/porsche-next-urdu-regular.ad23819.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}

package/global-styles/font-face.css

@@ -0,0 +1 @@
+@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-arabic-bold.1796b39.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-arabic-regular.413b375.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-cyril-bold.4cb90bb.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-cyril-regular.b845952.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-cyril-semi-bold.378f7d5.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-greek-bold.d2546b1.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-greek-regular.0b3d9b3.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-greek-semi-bold.f3a9ae0.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-bold.0fbdc6d.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-regular.b8f1c20.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-semi-bold.b5f6fca.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-pashto-bold.f30f194.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-pashto-regular.3989814.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-thai-bold.b9e9f23.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-thai-regular.ac04c30.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-thai-semi-bold.8d53572.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-urdu-bold.49a86a4.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-urdu-regular.ad23819.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}

package/global-styles/index.css

@@ -0,0 +1,168 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family:
+    "Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif;
+  line-height: calc(6px + 2.125ex);
+  letter-spacing: normal;
+  text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+}
+:root {
+  --p-color-focus: #1a44ea;
+  --p-color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
+  --p-color-canvas: #fff;
+  --p-color-surface: hsl(240, 7.7%, 97.5%);
+  --p-color-frosted: hsla(236, 6.4%, 51%, 0.148);
+  --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
+  --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+  --p-color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
+  --p-color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
+  --p-color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
+  --p-color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
+  --p-color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
+  --p-color-primary: hsl(225, 66.7%, 1.2%);
+  --p-color-success: hsl(115, 77.5%, 27.8%);
+  --p-color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
+  --p-color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
+  --p-color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
+  --p-color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
+  --p-color-warning: hsl(28, 97.7%, 34.1%);
+  --p-color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
+  --p-color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
+  --p-color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
+  --p-color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
+  --p-color-error: hsl(357, 78%, 41%);
+  --p-color-error-low: hsla(357, 78%, 41%, 0.18);
+  --p-color-error-medium: hsla(357, 78%, 41%, 0.6);
+  --p-color-error-frosted: hsla(357, 78%, 41%, 0.18);
+  --p-color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
+  --p-color-info: hsl(228, 83.2%, 51%);
+  --p-color-info-low: hsla(228, 83.2%, 51%, 0.18);
+  --p-color-info-medium: hsla(228, 83.2%, 51%, 0.6);
+  --p-color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
+  --p-color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
+  --p-color-skeleton: #f7f7f7;
+
+  --p-radius-xs: 2px;
+  --p-radius-sm: 4px;
+  --p-radius-md: 6px;
+  --p-radius-lg: 8px;
+  --p-radius-xl: 12px;
+  --p-radius-2xl: 16px;
+  --p-radius-3xl: 24px;
+  --p-radius-4xl: 32px;
+  --p-radius-full: calc(infinity * 1px);
+}
+.light {
+  --p-color-focus: #1a44ea;
+  --p-color-disabled: hsla(233, 6.6%, 23.9%, 0.412);
+  --p-color-canvas: #fff;
+  --p-color-surface: hsl(240, 7.7%, 97.5%);
+  --p-color-frosted: hsla(236, 6.4%, 51%, 0.148);
+  --p-color-frosted-soft: hsla(234, 9.8%, 60%, 0.06);
+  --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+  --p-color-contrast-lower: hsla(234, 6%, 32.9%, 0.324);
+  --p-color-contrast-low: hsla(240, 5.3%, 14.9%, 0.5);
+  --p-color-contrast-medium: hsla(240, 6.1%, 7%, 0.6);
+  --p-color-contrast-high: hsla(240, 7.1%, 11%, 0.7);
+  --p-color-contrast-higher: hsla(240, 8.7%, 9%, 0.8);
+  --p-color-primary: hsl(225, 66.7%, 1.2%);
+  --p-color-success: hsl(115, 77.5%, 27.8%);
+  --p-color-success-low: hsla(115, 77.5%, 27.8%, 0.18);
+  --p-color-success-medium: hsla(115, 77.5%, 27.8%, 0.6);
+  --p-color-success-frosted: hsla(115, 77.5%, 27.8%, 0.18);
+  --p-color-success-frosted-soft: hsla(115, 77.5%, 27.8%, 0.1);
+  --p-color-warning: hsl(28, 97.7%, 34.1%);
+  --p-color-warning-low: hsla(28, 97.7%, 34.1%, 0.18);
+  --p-color-warning-medium: hsla(28, 97.7%, 34.1%, 0.6);
+  --p-color-warning-frosted: hsla(28, 97.7%, 34.1%, 0.18);
+  --p-color-warning-frosted-soft: hsla(28, 97.7%, 34.1%, 0.1);
+  --p-color-error: hsl(357, 78%, 41%);
+  --p-color-error-low: hsla(357, 78%, 41%, 0.18);
+  --p-color-error-medium: hsla(357, 78%, 41%, 0.6);
+  --p-color-error-frosted: hsla(357, 78%, 41%, 0.18);
+  --p-color-error-frosted-soft: hsla(357, 78%, 41%, 0.1);
+  --p-color-info: hsl(228, 83.2%, 51%);
+  --p-color-info-low: hsla(228, 83.2%, 51%, 0.18);
+  --p-color-info-medium: hsla(228, 83.2%, 51%, 0.6);
+  --p-color-info-frosted: hsla(228, 83.2%, 51%, 0.18);
+  --p-color-info-frosted-soft: hsla(228, 83.2%, 51%, 0.1);
+  --p-color-skeleton: #f7f7f7;
+}
+.dark {
+  --p-color-focus: #1a44ea;
+  --p-color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
+  --p-color-canvas: hsl(225, 66.7%, 1.2%);
+  --p-color-surface: hsl(240, 2%, 10%);
+  --p-color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
+  --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
+  --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+  --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
+  --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
+  --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
+  --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
+  --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
+  --p-color-primary: hsl(240, 12.5%, 96.9%);
+  --p-color-success: hsl(157, 84.9%, 41.6%);
+  --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
+  --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
+  --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
+  --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
+  --p-color-warning: hsl(28, 90.2%, 56.1%);
+  --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
+  --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
+  --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
+  --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
+  --p-color-error: hsl(0, 96.9%, 62%);
+  --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
+  --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
+  --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
+  --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
+  --p-color-info: hsl(210, 100%, 54.5%);
+  --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
+  --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
+  --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
+  --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
+  --p-color-skeleton: #1a1b1e;
+}
+.auto {
+  @media (prefers-color-scheme: dark) {
+    --p-color-focus: #1a44ea;
+    --p-color-disabled: hsla(240, 1.5%, 61.8%, 0.302);
+    --p-color-canvas: hsl(225, 66.7%, 1.2%);
+    --p-color-surface: hsl(240, 2%, 10%);
+    --p-color-frosted: hsla(240, 2.2%, 44.1%, 0.228);
+    --p-color-frosted-soft: hsla(240, 3.7%, 26.5%, 0.154);
+    --p-color-backdrop: hsla(240, 5.3%, 14.9%, 0.5);
+    --p-color-contrast-lower: hsla(240, 1.5%, 61.8%, 0.302);
+    --p-color-contrast-low: hsla(240, 12.5%, 96.9%, 0.45);
+    --p-color-contrast-medium: hsla(240, 12.5%, 96.9%, 0.56);
+    --p-color-contrast-high: hsla(240, 12.5%, 96.9%, 0.67);
+    --p-color-contrast-higher: hsla(240, 12.5%, 96.9%, 0.78);
+    --p-color-primary: hsl(240, 12.5%, 96.9%);
+    --p-color-success: hsl(157, 84.9%, 41.6%);
+    --p-color-success-low: hsla(157, 84.9%, 41.6%, 0.18);
+    --p-color-success-medium: hsla(157, 84.9%, 41.6%, 0.6);
+    --p-color-success-frosted: hsla(157, 84.9%, 41.6%, 0.18);
+    --p-color-success-frosted-soft: hsla(157, 84.9%, 41.6%, 0.1);
+    --p-color-warning: hsl(28, 90.2%, 56.1%);
+    --p-color-warning-low: hsla(28, 90.2%, 56.1%, 0.18);
+    --p-color-warning-medium: hsla(28, 90.2%, 56.1%, 0.6);
+    --p-color-warning-frosted: hsla(28, 90.2%, 56.1%, 0.18);
+    --p-color-warning-frosted-soft: hsla(28, 90.2%, 56.1%, 0.1);
+    --p-color-error: hsl(0, 96.9%, 62%);
+    --p-color-error-low: hsla(0, 96.9%, 62%, 0.18);
+    --p-color-error-medium: hsla(0, 96.9%, 62%, 0.6);
+    --p-color-error-frosted: hsla(0, 96.9%, 62%, 0.18);
+    --p-color-error-frosted-soft: hsla(0, 96.9%, 62%, 0.1);
+    --p-color-info: hsl(210, 100%, 54.5%);
+    --p-color-info-low: hsla(210, 100%, 54.5%, 0.18);
+    --p-color-info-medium: hsla(210, 100%, 54.5%, 0.6);
+    --p-color-info-frosted: hsla(210, 100%, 54.5%, 0.18);
+    --p-color-info-frosted-soft: hsla(210, 100%, 54.5%, 0.1);
+    --p-color-skeleton: #1a1b1e;
+  }
+}
+@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-arabic-bold.1796b39.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-arabic-regular.413b375.woff2') format('woff2');unicode-range:U+0600-0671,U+06A1,U+06A4,U+06BA,U+06CC,U+06D5,U+06F8,U+06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-cyril-bold.4cb90bb.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-cyril-regular.b845952.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-cyril-semi-bold.378f7d5.woff2') format('woff2');unicode-range:U+0400-04FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-greek-bold.d2546b1.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-greek-regular.0b3d9b3.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-greek-semi-bold.f3a9ae0.woff2') format('woff2');unicode-range:U+0370-03FF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-bold.0fbdc6d.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-regular.b8f1c20.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-latin-semi-bold.b5f6fca.woff2') format('woff2');unicode-range:U+0020-007F,U+0080-00FF,U+0100-017F,U+0180-024F,U+0250-02AF,U+02B0-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+2070-209F,U+20A0-20CF,U+2100-214F,U+2150-218F,U+2190-21FF,U+2200-22FF,U+25A0-25FF,U+2600-26FF,U+FB00-FB4F,U+FE70-FEFF;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-pashto-bold.f30f194.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-pashto-regular.3989814.woff2') format('woff2');unicode-range:U+067C,U+067E,U+0681,U+0682,U+0685,U+0686,U+0689,U+067C,U+0693,U+0696,U+0698,U+069A,U+06A9,U+06AB,U+06AF,U+06BC,U+06CD,U+06D0;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-thai-bold.b9e9f23.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-thai-regular.ac04c30.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:600;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-thai-semi-bold.8d53572.woff2') format('woff2');unicode-range:U+0E00-0E7F;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:700;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-urdu-bold.49a86a4.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}@font-face{font-family:Porsche Next;font-style:normal;font-weight:400;src:url('https://cdn.ui.porsche.com/porsche-design-system/fonts/porsche-next-urdu-regular.ad23819.woff2') format('woff2');unicode-range:U+0679,U+0688,U+0691,U+06BE,U+06C0-06C3,U+06D2-06D5,U+06F0-06F9;font-display:swap}

package/global-styles/legacy-radius.css

@@ -0,0 +1,5 @@
+:root {
+  --_p-legacy-radius-small: 4px;
+  --_p-legacy-radius-medium: 8px;
+  --_p-legacy-radius-large: 12px;
+}

package/global-styles/normalize.css

@@ -0,0 +1,11 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+  font-family:
+    "Porsche Next", "Arial Narrow", Arial, "Heiti SC", SimHei, sans-serif;
+  line-height: calc(6px + 2.125ex);
+  letter-spacing: normal;
+  text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+}