@porsche-design-system/components-react 3.16.0-rc.0 → 3.16.0-rc.1

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/multi-select.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pagination.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/pin-code.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/popover.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/radio-button-wrapper.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/scroller.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/segmented-control-item.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');
@@ -86,7 +87,7 @@ class DSRSegmentedControlItem extends react.Component {
         const hasSlottedContent = !!children.length;
         const style = minifyCss.minifyCss(stripFocusAndHoverStyles.stripFocusAndHoverStyles(stylesEntry.getSegmentedControlItemCss(this.props.disabled, this.props.selected, hasIcon, hasSlottedContent, this.props.theme || 'light' // default as fallback
         )));
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("button", { type: "button", ...utilsEntry.getButtonAttributes(this.props.selected, this.props.disabled), children: [this.props.label && jsxRuntime.jsx("span", { children: this.props.label }), hasIcon && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", size: "inherit", name: this.props.icon, source: this.props.iconSource, color: utilsEntry.getIconColor(this.props.disabled), theme: this.props.theme || 'light', "aria-hidden": "true" })), jsxRuntime.jsx("slot", {})] })] }), this.props.children] }));
+        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("template", { shadowroot: "open", shadowrootmode: "open", shadowrootdelegatesfocus: "true", children: [jsxRuntime.jsx("style", { dangerouslySetInnerHTML: { __html: style } }), jsxRuntime.jsxs("button", { type: "button", ...utilsEntry.getSegmentedControlItemAriaAttributes(this.props.selected, this.props.disabled, this.props.aria), children: [this.props.label && jsxRuntime.jsx("span", { children: this.props.label }), hasIcon && (jsxRuntime.jsx(icon_wrapper.PIcon, { className: "icon", size: "inherit", name: this.props.icon, source: this.props.iconSource, color: utilsEntry.getIconColor(this.props.disabled), theme: this.props.theme || 'light', "aria-hidden": "true" })), jsxRuntime.jsx("slot", {})] })] }), this.props.children] }));
     }
 }
 

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-option.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper-dropdown.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-wrapper.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/state-message.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal-item.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/switch.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table-head-cell.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-bar.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag-dismissible.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tag.cjs

@@ -7,6 +7,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/text-field-wrapper.cjs

@@ -8,6 +8,7 @@ require('../components/button.wrapper.cjs');
 require('../components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('../components/button-pure.wrapper.cjs');
 require('../components/button-tile.wrapper.cjs');
+require('../components/canvas.wrapper.cjs');
 require('../components/carousel.wrapper.cjs');
 require('../components/checkbox-wrapper.wrapper.cjs');
 require('../components/content-wrapper.wrapper.cjs');

package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/public-api.cjs

@@ -7,6 +7,7 @@ var button_wrapper = require('./lib/components/button.wrapper.cjs');
 var buttonGroup_wrapper = require('./lib/components/button-group.wrapper.cjs');
 var buttonPure_wrapper = require('./lib/components/button-pure.wrapper.cjs');
 var buttonTile_wrapper = require('./lib/components/button-tile.wrapper.cjs');
+var canvas_wrapper = require('./lib/components/canvas.wrapper.cjs');
 var carousel_wrapper = require('./lib/components/carousel.wrapper.cjs');
 var checkboxWrapper_wrapper = require('./lib/components/checkbox-wrapper.wrapper.cjs');
 var contentWrapper_wrapper = require('./lib/components/content-wrapper.wrapper.cjs');
@@ -86,6 +87,7 @@ exports.PButton = button_wrapper.PButton;
 exports.PButtonGroup = buttonGroup_wrapper.PButtonGroup;
 exports.PButtonPure = buttonPure_wrapper.PButtonPure;
 exports.PButtonTile = buttonTile_wrapper.PButtonTile;
+exports.PCanvas = canvas_wrapper.PCanvas;
 exports.PCarousel = carousel_wrapper.PCarousel;
 exports.PCheckboxWrapper = checkboxWrapper_wrapper.PCheckboxWrapper;
 exports.PContentWrapper = contentWrapper_wrapper.PContentWrapper;

package/ssr/esm/BaseProps.d.ts

@@ -0,0 +1,2 @@
+import type { DOMAttributes, HTMLAttributes } from 'react';
+export type BaseProps = DOMAttributes<{}> & Pick<HTMLAttributes<{}>, 'suppressHydrationWarning' | 'autoFocus' | 'className' | 'dir' | 'hidden' | 'id' | 'lang' | 'slot' | 'style' | 'tabIndex' | 'title' | 'translate' | 'role'>;

package/ssr/esm/components/dist/styles/esm/styles-entry.mjs

@@ -4084,7 +4084,7 @@ const formatObjectOutput = (value) => {
 'value, ' +
     formatObjectOutput(breakpoints.reduce((prev, key) => ({ ...prev, [key + (key !== 'base' ? '?' : '')]: 'value' }), {})).replace(/"/g, '');
 
-const getComponentCss$15 = (size, compact, open, theme, sticky) => {
+const getComponentCss$16 = (size, compact, open, theme, sticky) => {
     const { primaryColor, hoverColor, contrastLowColor, backgroundColor } = getThemedColors(theme);
     const { primaryColor: primaryColorDark, hoverColor: hoverColorDark, contrastLowColor: contrastLowColorDark, backgroundColor: backgroundColorDark, } = getThemedColors('dark');
     const cssVariablePositionStickyTop = '--p-accordion-position-sticky-top';
@@ -4253,7 +4253,7 @@ const cssVariableTop = '--p-banner-position-top';
 const cssVariableBottom = '--p-banner-position-bottom';
 const cssVariableZIndex = '--p-internal-banner-z-index';
 const topBottomFallback = '56px';
-const getComponentCss$14 = (isOpen) => {
+const getComponentCss$15 = (isOpen) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4324,7 +4324,7 @@ const getGroupDirectionJssStyles = (direction) => {
     return groupDirectionJssStyles[direction];
 };
 
-const getComponentCss$13 = (direction) => {
+const getComponentCss$14 = (direction) => {
     return getCss({
         '@global': {
             ':host': {
@@ -4476,7 +4476,7 @@ const getFunctionalComponentLoadingMessageStyles = () => {
     };
 };
 
-const getComponentCss$12 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
+const getComponentCss$13 = (icon, iconSource, active, isLoading, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, theme) => {
     const hasIcon = hasVisibleIcon(icon, iconSource);
     return getCss(mergeDeep(getLinkButtonPureStyles(icon, iconSource, active, isDisabledOrLoading, stretch, size, hideLabel, alignLabel, underline, false, theme), {
         root: {
@@ -4654,7 +4654,7 @@ background, align, compact, hasGradient, isDisabled) => {
     });
 };
 
-const getComponentCss$11 = (isDisabledOrLoading, ...args) => {
+const getComponentCss$12 = (isDisabledOrLoading, ...args) => {
     const buttonLinkTileStyles = getButtonLinkTileStyles(...args);
     return getCss({
         ...buttonLinkTileStyles,
@@ -4778,7 +4778,7 @@ const getDisabledColors = (variant, loading, theme) => {
     };
     return colors[variant === 'tertiary' ? 'secondary' : variant];
 };
-const getComponentCss$10 = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
+const getComponentCss$11 = (icon, iconSource, variant, hideLabel, disabled, loading, theme) => {
     const disabledOrLoading = isDisabledOrLoading(disabled, loading);
     const { textColor, borderColor, backgroundColor } = getDisabledColors(variant, loading, theme);
     const { textColor: textColorDark, borderColor: borderColorDark, backgroundColor: backgroundColorDark, } = getDisabledColors(variant, loading, 'dark');
@@ -4833,6 +4833,96 @@ const getComponentCss$10 = (icon, iconSource, variant, hideLabel, disabled, load
     }));
 };
 
+const cssVariableSidebarStartWidth = '--p-canvas-sidebar-start-width';
+const cssVariableSidebarEndWidth = '--p-canvas-sidebar-end-width';
+// TODO: maybe default grid gap would also work
+const gridProductiveGap = gridGap.replace('36px', '24px');
+const mediaQueryDesktopView = getMediaQueryMin('m');
+const sidebarWidths = {
+    medium: '320px',
+    large: '480px', // TODO: won't work at viewport 1000px when both sidebars are opened
+};
+const getComponentCss$10 = (isSidebarStartOpen, sidebarStartWidth, isSidebarEndOpen, sidebarEndWidth) => {
+    return getCss({
+        '@global': {
+            ':host': {
+                display: 'block',
+                ...addImportantToEachRule({
+                    ...colorSchemeStyles,
+                    ...hostHiddenStyles,
+                }),
+            },
+            ':is(header, main, footer, aside)': {
+                padding: gridProductiveGap,
+                boxSizing: 'border-box',
+                zIndex: 0,
+            },
+            header: {
+                gridArea: 'header',
+                position: 'sticky',
+                top: 0,
+                zIndex: 1,
+            },
+            main: {
+                gridArea: 'main',
+                '--pds-grid-span-full': 'span 6',
+                '--pds-grid-span-one-half': 'span 3',
+                '--pds-grid-span-one-third': 'span 2',
+                '--pds-grid-span-two-thirds': 'span 4',
+                display: 'grid',
+                gridTemplateColumns: 'repeat(6, minmax(0, 1fr))',
+                gap: gridProductiveGap,
+                alignContent: 'flex-start',
+                [mediaQueryDesktopView]: {
+                    '--pds-grid-span-full': 'span 12',
+                    '--pds-grid-span-one-half': 'span 6',
+                    '--pds-grid-span-one-third': 'span 4',
+                    '--pds-grid-span-two-thirds': 'span 8',
+                    gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
+                },
+            },
+            footer: {
+                gridArea: 'footer',
+            },
+            aside: {
+                // TODO: box-shadows or colored surface must be defined, design is missing
+                position: 'relative',
+                transition: getTransition('margin'),
+                '&:first-of-type': {
+                    gridArea: 'sidebar-start',
+                    width: `var(${cssVariableSidebarStartWidth}, ${sidebarWidths[sidebarStartWidth]})`,
+                    marginInlineStart: isSidebarStartOpen
+                        ? 0
+                        : `calc(var(${cssVariableSidebarStartWidth}, ${sidebarWidths[sidebarStartWidth]}) * -1)`,
+                },
+                '&:last-of-type': {
+                    gridArea: 'sidebar-end',
+                    width: `var(${cssVariableSidebarEndWidth}, ${sidebarWidths[sidebarEndWidth]})`,
+                    marginInlineEnd: isSidebarEndOpen
+                        ? 0
+                        : `calc(var(${cssVariableSidebarEndWidth}, ${sidebarWidths[sidebarEndWidth]}) * -1)`,
+                },
+            },
+        },
+        canvas: {
+            display: 'grid',
+            gridTemplateRows: 'auto minmax(0, 1fr) auto',
+            gridTemplateAreas: '"header" "main" "footer"',
+            minWidth: '320px',
+            minHeight: '100dvh',
+            [mediaQueryDesktopView]: {
+                gridTemplate: 'auto minmax(0, 1fr) auto / auto minmax(0, 1fr) auto',
+                gridTemplateAreas: '"header header header" "sidebar-start main sidebar-end" "sidebar-start footer sidebar-end"',
+            },
+        },
+        close: {
+            // TODO: must be positioned properly, design is missing
+            position: 'absolute',
+            inset: `${spacingStaticXSmall} ${spacingStaticXSmall} auto auto`,
+        },
+    });
+};
+
 const cssVariablePrevNextFilter = '--p-carousel-prev-next-filter';
 const carouselTransitionDuration = motionDurationModerate;
 const paginationInfiniteStartCaseClass = 'pagination--infinite';
@@ -10310,4 +10400,4 @@ const getComponentCss = (size, theme) => {
     });
 };
 
-export { getComponentCss$15 as getAccordionCss, getComponentCss$14 as getBannerCss, getComponentCss$10 as getButtonCss, getComponentCss$13 as getButtonGroupCss, getComponentCss$12 as getButtonPureCss, getComponentCss$11 as getButtonTileCss, getComponentCss$$ as getCarouselCss, getComponentCss$_ as getCheckboxWrapperCss, getComponentCss$Z as getContentWrapperCss, getComponentCss$Y as getCrestCss, getComponentCss$X as getDisplayCss, getComponentCss$W as getDividerCss, getComponentCss$U as getFieldsetCss, getComponentCss$V as getFieldsetWrapperCss, getComponentCss$S as getFlexCss, getComponentCss$T as getFlexItemCss, getComponentCss$P as getFlyoutCss, getComponentCss$R as getFlyoutNavigationCss, getComponentCss$Q as getFlyoutNavigationItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$N as getGridCss, getComponentCss$O as getGridItemCss, getComponentCss$M as getHeadingCss, getComponentCss$L as getHeadlineCss, getComponentCss$K as getIconCss, getComponentCss$J as getInlineNotificationCss, getComponentCss$H as getLinkCss, getComponentCss$I as getLinkPureCss, getComponentCss$H as getLinkSocialCss, getComponentCss$E as getLinkTileCss, getComponentCss$G as getLinkTileModelSignatureCss, getComponentCss$F as getLinkTileProductCss, getComponentCss$D as getMarqueCss, getComponentCss$C as getModalCss, getComponentCss$B as getModelSignatureCss, getComponentCss$z as getMultiSelectCss, getComponentCss$A as getMultiSelectOptionCss, getComponentCss$y as getPaginationCss, getComponentCss$x as getPinCodeCss, getComponentCss$w as getPopoverCss, getComponentCss$v as getRadioButtonWrapperCss, getComponentCss$u as getScrollerCss, getComponentCss$s as getSegmentedControlCss, getComponentCss$t as getSegmentedControlItemCss, getComponentCss$o as getSelectCss, getComponentCss$p as getSelectOptionCss, getComponentCss$q as getSelectWrapperCss, getComponentCss$r as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };
+export { getComponentCss$16 as getAccordionCss, getComponentCss$15 as getBannerCss, getComponentCss$11 as getButtonCss, getComponentCss$14 as getButtonGroupCss, getComponentCss$13 as getButtonPureCss, getComponentCss$12 as getButtonTileCss, getComponentCss$10 as getCanvasCss, getComponentCss$$ as getCarouselCss, getComponentCss$_ as getCheckboxWrapperCss, getComponentCss$Z as getContentWrapperCss, getComponentCss$Y as getCrestCss, getComponentCss$X as getDisplayCss, getComponentCss$W as getDividerCss, getComponentCss$U as getFieldsetCss, getComponentCss$V as getFieldsetWrapperCss, getComponentCss$S as getFlexCss, getComponentCss$T as getFlexItemCss, getComponentCss$P as getFlyoutCss, getComponentCss$R as getFlyoutNavigationCss, getComponentCss$Q as getFlyoutNavigationItemCss, getFunctionalComponentLabelStyles, getFunctionalComponentLoadingMessageStyles, getFunctionalComponentRequiredStyles, getFunctionalComponentStateMessageStyles, getComponentCss$N as getGridCss, getComponentCss$O as getGridItemCss, getComponentCss$M as getHeadingCss, getComponentCss$L as getHeadlineCss, getComponentCss$K as getIconCss, getComponentCss$J as getInlineNotificationCss, getComponentCss$H as getLinkCss, getComponentCss$I as getLinkPureCss, getComponentCss$H as getLinkSocialCss, getComponentCss$E as getLinkTileCss, getComponentCss$G as getLinkTileModelSignatureCss, getComponentCss$F as getLinkTileProductCss, getComponentCss$D as getMarqueCss, getComponentCss$C as getModalCss, getComponentCss$B as getModelSignatureCss, getComponentCss$z as getMultiSelectCss, getComponentCss$A as getMultiSelectOptionCss, getComponentCss$y as getPaginationCss, getComponentCss$x as getPinCodeCss, getComponentCss$w as getPopoverCss, getComponentCss$v as getRadioButtonWrapperCss, getComponentCss$u as getScrollerCss, getComponentCss$s as getSegmentedControlCss, getComponentCss$t as getSegmentedControlItemCss, getComponentCss$o as getSelectCss, getComponentCss$p as getSelectOptionCss, getComponentCss$q as getSelectWrapperCss, getComponentCss$r as getSelectWrapperDropdownCss, getComponentCss$n as getSpinnerCss, getComponentCss$l as getStepperHorizontalCss, getComponentCss$m as getStepperHorizontalItemCss, getComponentCss$k as getSwitchCss, getComponentCss$j as getTableBodyCss, getComponentCss$i as getTableCellCss, getComponentCss$h as getTableCss, getComponentCss$g as getTableHeadCellCss, getComponentCss$e as getTableHeadCss, getComponentCss$f as getTableHeadRowCss, getComponentCss$d as getTableRowCss, getComponentCss$c as getTabsBarCss, getComponentCss$a as getTabsCss, getComponentCss$b as getTabsItemCss, getComponentCss$8 as getTagCss, getComponentCss$9 as getTagDismissibleCss, getComponentCss$4 as getTextCss, getComponentCss$7 as getTextFieldWrapperCss, getComponentCss$6 as getTextListCss, getComponentCss$5 as getTextListItemCss, getComponentCss$3 as getTextareaWrapperCss, getComponentCss$1 as getToastCss, getComponentCss as getWordmarkCss };

package/ssr/esm/components/dist/utils/esm/utils-entry.mjs

@@ -3589,6 +3589,64 @@ const isScrollable = (isPrevHidden, isNextHidden) => {
     return !(isPrevHidden && isNextHidden);
 };
 
+/*
+ Stencil Client Platform v4.18.3 | MIT Licensed | https://stenciljs.com
+ */
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// src/utils/result.ts
+var result_exports = {};
+__export(result_exports, {
+  err: () => err,
+  map: () => map,
+  ok: () => ok,
+  unwrap: () => unwrap,
+  unwrapErr: () => unwrapErr
+});
+var ok = (value) => ({
+  isOk: true,
+  isErr: false,
+  value
+});
+var err = (value) => ({
+  isOk: false,
+  isErr: true,
+  value
+});
+function map(result, fn) {
+  if (result.isOk) {
+    const val = fn(result.value);
+    if (val instanceof Promise) {
+      return val.then((newVal) => ok(newVal));
+    } else {
+      return ok(val);
+    }
+  }
+  if (result.isErr) {
+    const value = result.value;
+    return err(value);
+  }
+  throw "should never get here";
+}
+var unwrap = (result) => {
+  if (result.isOk) {
+    return result.value;
+  } else {
+    throw result.value;
+  }
+};
+var unwrapErr = (result) => {
+  if (result.isErr) {
+    return result.value;
+  } else {
+    throw result.value;
+  }
+};
+
 /**
  * Checks if the current environment supports the native Popover API.
  *
@@ -3881,10 +3939,10 @@ const isCurrentInput = (index, value, length) => {
     }
     return index === firstWhitespaceIndex; // Some value is entered: set current-input id on the first input element which does not have a value
 };
-
-const getButtonAttributes = (isSelected, isDisabled) => ({
+const getSegmentedControlItemAriaAttributes = (isSelected, isDisabled, ariaProp) => ({
     ...getButtonBaseAriaAttributes(isDisabled, false),
     ...parseAndGetAriaAttributes({ 'aria-pressed': isSelected }),
+    ...parseAndGetAriaAttributes(ariaProp),
 });
 const getIconColor = (isDisabled) => {
     return !isDisabled ? 'primary' : 'contrast-medium';
@@ -3979,4 +4037,4 @@ const getTextTagType = (host, tag) => {
     }
 };
 
-export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, INTERNAL_MULTI_SELECT_SLOT, INTERNAL_SELECT_SLOT, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, displaySizeToTagMap, getButtonAriaAttributes, getButtonAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getThemeForIcon, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isThemeDark, isTouchDevice, isType, isUrl, isWithinForm, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel };
+export { DISPLAY_TAGS, HEADING_TAGS, HEADLINE_TAGS, INTERNAL_MULTI_SELECT_SLOT, INTERNAL_SELECT_SLOT, ItemType, TEXT_TAGS, _hasShowPickerSupport, anchorSlot, attributeMutationMap, buildCrestImgSrc, buildCrestSrcSet, buildIconUrl, buildImgSrc, buildSrcSet, createPaginationItems, createRange, crestSize, displaySizeToTagMap, getButtonAriaAttributes, getButtonBaseAriaAttributes, getButtonPureAriaAttributes, getCDNBaseURL, getClosestHTMLElement, getComboboxAriaAttributes, getContentAriaAttributes, getCurrentActivePage, getDirectChildHTMLElement, getDisplayTagType, getHTMLElement, getHeadingTagType, getHeadlineTagType, getIconColor, getInlineNotificationIconName, getInnerManifest, getListAriaAttributes, getOptionAriaAttributes, getRole, getSegmentedControlItemAriaAttributes, getSelectedOptionMap, getSelectedOptionString, getSelectedOptionValues, getSelectedOptions, getStepperHorizontalIconName, getSvgUrl, getSwitchButtonAriaAttributes, getTextTagType, getThemeForIcon, getTotalPages, hasDocument, hasLocateAction, hasSpecificDirectChildTag, hasVisibleIcon, hasWindow, headerSlot, isCurrentInput, isCustomDropdown, isDisabledOrLoading, isInfinitePagination, isListTypeOrdered, isScrollable, isSortable, isStateCompleteOrWarning, isThemeDark, isTouchDevice, isType, isUrl, isWithinForm, observedNodesMap, parseAndGetAriaAttributes, parseJSONAttribute, scrollAreaClass, showCustomCalendarOrTimeIndicator, supportsConstructableStylesheets, supportsNativePopover, tempDiv, tempIcon, tempLabel };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/accordion.wrapper.mjs

@@ -33,6 +33,7 @@ const PAccordion = forwardRef(({ compact, heading, headingTag = 'h2', onAccordio
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/banner.wrapper.mjs

@@ -33,6 +33,7 @@ const PBanner = forwardRef(({ description = '', dismissButton = true, heading =
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/button-group.wrapper.mjs

@@ -29,6 +29,7 @@ const PButtonGroup = forwardRef(({ direction = { base: 'column', xs: 'row' }, cl
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/button-pure.wrapper.mjs

@@ -31,6 +31,7 @@ const PButtonPure = forwardRef(({ active = false, alignLabel = 'end', aria, disa
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/button-tile.wrapper.mjs

@@ -31,6 +31,7 @@ const PButtonTile = forwardRef(({ align = 'bottom', aria, aspectRatio = '4:3', b
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/button.wrapper.mjs

@@ -31,6 +31,7 @@ const PButton = forwardRef(({ aria, disabled = false, hideLabel = false, icon =
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/canvas.wrapper.mjs

@@ -0,0 +1,40 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useRef } from 'react';
+import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
+import { syncRef } from '../../utils.mjs';
+import { DSRCanvas } from '../dsr-components/canvas.mjs';
+
+const PCanvas = forwardRef(({ onDismissSidebarEnd, onDismissSidebarStart, sidebarEndOpen = false, sidebarEndWidth = 'medium', sidebarStartOpen = false, sidebarStartWidth = 'medium', className, children, ...rest }, ref) => {
+    const elementRef = useRef();
+    useEventCallback(elementRef, 'dismissSidebarEnd', onDismissSidebarEnd);
+    useEventCallback(elementRef, 'dismissSidebarStart', onDismissSidebarStart);
+    const WebComponentTag = usePrefix('p-canvas');
+    const propsToSync = [sidebarEndOpen, sidebarEndWidth, sidebarStartOpen, sidebarStartWidth];
+    useBrowserLayoutEffect(() => {
+        const { current } = elementRef;
+        ['sidebarEndOpen', 'sidebarEndWidth', 'sidebarStartOpen', 'sidebarStartWidth'].forEach((propName, i) => (current[propName] = propsToSync[i]));
+    }, propsToSync);
+    // @ts-ignore
+    if (!process.browser) {
+        className = className ? `${className} ssr` : 'ssr';
+    }
+    const props = {
+        ...rest,
+        // @ts-ignore
+        ...(!process.browser
+            ? {
+                children: (jsx(DSRCanvas, { sidebarEndOpen, sidebarEndWidth, sidebarStartOpen, sidebarStartWidth, children })),
+            }
+            : {
+                children,
+                suppressHydrationWarning: true,
+            }),
+        class: useMergedClass(elementRef, className),
+        ref: syncRef(elementRef, ref)
+    };
+    // @ts-ignore
+    return jsx(WebComponentTag, { ...props });
+});
+
+export { PCanvas };

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/carousel.wrapper.mjs

@@ -33,6 +33,7 @@ const PCarousel = forwardRef(({ activeSlideIndex = 0, alignHeader = 'start', ari
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/checkbox-wrapper.wrapper.mjs

@@ -31,6 +31,7 @@ const PCheckboxWrapper = forwardRef(({ hideLabel = false, label = '', loading =
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/content-wrapper.wrapper.mjs

@@ -32,6 +32,7 @@ const PContentWrapper = forwardRef(({ backgroundColor = 'transparent', theme, wi
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });
 

package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/crest.wrapper.mjs

@@ -30,6 +30,7 @@ const PCrest = forwardRef(({ aria, href, target = '_self', className, ...rest },
         class: useMergedClass(elementRef, className),
         ref: syncRef(elementRef, ref)
     };
+    // @ts-ignore
     return jsx(WebComponentTag, { ...props });
 });