npm - @alto-avios/alto-ui - Versions diffs - 5.8.1 → 5.9.0 - Mend

@alto-avios/alto-ui 5.8.1 → 5.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (27) hide show

package/dist/assets/CollectionCarouselSection.css ADDED Viewed

@@ -0,0 +1 @@

+ ._collection-carousel-section_tf9t7_1{text-align:left}._collection-carousel-section__container_tf9t7_5{gap:var(--alto-sem-space-sm)}._collection-carousel-section__collection-link_tf9t7_9{min-width:-moz-max-content;min-width:max-content}._collection-carousel-section__carousel_tf9t7_14{margin-left:-24px;max-width:none;width:calc(100vw + 8px)}@media(min-width:480px){._collection-carousel-section__carousel_tf9t7_14{margin-left:-40px;width:calc(100vw + 24px)}}@media(min-width:768px){._collection-carousel-section__carousel_tf9t7_14{width:calc(100vw + 16px)}}@media(min-width:1024px){._collection-carousel-section__carousel_tf9t7_14{margin:0;max-width:100%}}._collection-carousel-section__default-arrow_tf9t7_42,._collection-carousel-section__default-dots_tf9t7_41{display:none}._collection-carousel-section__carousel_tf9t7_14:focus-within ._collection-carousel-section__default-arrow_tf9t7_42:not([aria-disabled]),._collection-carousel-section__carousel_tf9t7_14:hover ._collection-carousel-section__default-arrow_tf9t7_42:not([aria-disabled]){display:inherit}._collection-carousel-section__default-arrow_tf9t7_42{position:absolute;top:50%;transform:translateY(-50%)}._collection-carousel-section__default-arrow--next_tf9t7_59{position:absolute;right:var(--alto-section-padding-vertical-default)}._collection-carousel-section__default-arrow--prev_tf9t7_64{left:calc(var(--alto-section-padding-vertical-default) + 8px);position:absolute}@media(min-width:768px){._collection-carousel-section__default-arrow--prev_tf9t7_64{left:calc(var(--alto-section-padding-vertical-default) + 16px);position:absolute}}@media(min-width:1024px){._collection-carousel-section__default-arrow--next_tf9t7_59{right:0}._collection-carousel-section__default-arrow--prev_tf9t7_64{left:0}._collection-carousel-section__default-arrow_tf9t7_42{display:none!important}}._collection-carousel-section__custom-control_tf9t7_93{display:none}@media(min-width:1024px){._collection-carousel-section__custom-control_tf9t7_93{display:flex;margin:0}}

package/dist/assets/Dialog.css CHANGED Viewed

	@@ -1 +1 @@
1	- .~~_dialogWrapper_1sou5_1~~{align-items:center;display:flex;inset:0;justify-content:center;position:fixed;z-index:99}.~~_overlay_1sou5_10~~{background-color:var(--alto-sem-color-overlay-scrim);inset:0;position:fixed}.~~_dialogWrapper_1sou5_1._absolute_1sou5_16~~,.~~_overlay_1sou5_10._absolute_1sou5_16~~{position:absolute}.~~_dialog_1sou5_1~~{background-color:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-tertiary);border-radius:var(--alto-card-radius);box-shadow:0 25px 50px -12px #00000040;margin:var(--alto-sem-space-md);max-height:calc(100vh - var(--alto-sem-space-xl)2);outline:none;overflow-y:auto;padding:var(--alto-sem-space-lg);position:relative;width:calc(100% - var(--alto-sem-space-md)2)}.~~_dialog_1sou5_1._noPadding_1sou5_35~~{padding:0}@media(min-width:640px){.~~_dialog_1sou5_1~~{margin:var(--alto-sem-space-xl);padding:var(--alto-sem-space-xl);width:calc(100% - var(--alto-sem-space-xl)2)}.~~_dialog_1sou5_1._noPadding_1sou5_35~~{padding:0}}@media(min-width:1024px){.~~_dialog_1sou5_1~~{margin:var(--alto-sem-space-2xl);max-height:calc(100vh - var(--alto-sem-space-2xl)2);padding:var(--alto-sem-space-2xl);width:calc(100% - var(--alto-sem-space-2xl)*2)}.~~_dialog_1sou5_1._noPadding_1sou5_35~~{padding:0}}.~~_dialogContent_1sou5_64~~{display:flex;flex-direction:column;gap:var(--alto-sem-space-md);position:relative}.~~_dialogHeading_1sou5_71~~{margin:0}.~~_dialogContentInner_1sou5_75~~{display:flex;flex-direction:column;gap:var(--alto-sem-space-md)}.~~_noHeader_1sou5_81~~ .~~_dialogContentInner_1sou5_75~~{padding-top:0}.~~_closeButton_1sou5_85~~{align-items:center;background:none;border:none;border-radius:var(--alto-sem-radius-sm);color:var(--alto-sem-color-fg-secondary);cursor:pointer;display:flex;justify-content:center;outline:2px solid transparent;outline-offset:2px;position:absolute;right:var(--alto-sem-space-sm);top:var(--alto-sem-space-sm);transition:outline-color .2s ease}.~~_dialogSmall_1sou5_102~~{max-width:25.625rem}.~~_dialogMedium_1sou5_106~~{max-width:39.25rem}.~~_dialogLarge_1sou5_110~~{max-width:52.875rem}
1	+ ._dialog__wrapper_1uzi3_1{align-items:center;display:flex;inset:0;justify-content:center;position:fixed;z-index:99}._dialog__overlay_1uzi3_10{background-color:var(--alto-sem-color-overlay-scrim);inset:0;position:fixed}._dialog__overlay--absolute_1uzi3_17,._dialog__wrapper--absolute_1uzi3_16{position:absolute}._dialog_1uzi3_1{background-color:var(--alto-sem-color-bg-layer2-default);border:1px solid var(--alto-sem-color-border-tertiary);border-radius:var(--alto-card-radius);box-shadow:0 25px 50px -12px #00000040;margin:var(--alto-sem-space-md);max-height:calc(100vh - var(--alto-sem-space-xl)2);outline:none;overflow-y:auto;padding:var(--alto-sem-space-lg);position:relative;width:calc(100% - var(--alto-sem-space-md)2)}._dialog--no-padding_1uzi3_35{padding:0}@media(min-width:640px){._dialog_1uzi3_1{margin:var(--alto-sem-space-xl);padding:var(--alto-sem-space-xl);width:calc(100% - var(--alto-sem-space-xl)2)}._dialog--no-padding_1uzi3_35{padding:0}}@media(min-width:1024px){._dialog_1uzi3_1{margin:var(--alto-sem-space-2xl);max-height:calc(100vh - var(--alto-sem-space-2xl)2);padding:var(--alto-sem-space-2xl);width:calc(100% - var(--alto-sem-space-2xl)*2)}._dialog--no-padding_1uzi3_35{padding:0}}._dialog__content_1uzi3_64{display:flex;flex-direction:column;gap:var(--alto-sem-space-md);position:relative}._dialog__heading_1uzi3_71{margin:0}._dialog__content-inner_1uzi3_75{display:flex;flex-direction:column;gap:var(--alto-sem-space-md)}._dialog__content--no-header_1uzi3_81 ._dialog__content-inner_1uzi3_75{padding-top:0}._dialog__close-button_1uzi3_85{align-items:center;background:none;border:none;border-radius:var(--alto-sem-radius-sm);color:var(--alto-sem-color-fg-secondary);cursor:pointer;display:flex;justify-content:center;outline:2px solid transparent;outline-offset:2px;position:absolute;right:var(--alto-sem-space-sm);top:var(--alto-sem-space-sm);transition:outline-color .2s ease}._dialog--size-small_1uzi3_102{max-width:25.625rem}._dialog--size-medium_1uzi3_106{max-width:39.25rem}._dialog--size-large_1uzi3_110{max-width:52.875rem}._dialog--size-xlarge_1uzi3_114{max-width:var(--alto-section-container-max-width)}

package/dist/assets/ProductTile.css CHANGED Viewed

	@@ -1 +1 @@
1	- ._product-~~tile_zcaft_1~~{display:flex;flex-direction:column}._product-~~tile__media_zcaft_6~~{flex-shrink:0;height:64px;width:64px}._product-~~tile__content_zcaft_12~~{display:flex;flex:1;flex-direction:column;min-width:0}._product-tile__content-~~details_zcaft_19~~{align-items:flex-start;display:flex;flex-direction:column;margin-top:var(--alto-sem-space-4xs)}._product-tile__content-~~icon_zcaft_26~~{flex-shrink:0;transition:var(--alto-boxlink-transition)}[data-alto-box-link][data-focused]:has(._product-~~tile_zcaft_1~~),[data-alto-box-link][data-hovered]:has(._product-~~tile_zcaft_1~~),[data-alto-box-link][data-pressed]:has(._product-~~tile_zcaft_1~~){transform:translateY(0)}[data-alto-box-link][data-focused] ._product-tile__content-~~title_zcaft_38 p~~,[data-alto-box-link][data-hovered] ._product-tile__content-~~title_zcaft_38 p~~,[data-alto-box-link][data-pressed] ._product-tile__content-~~title_zcaft_38 p~~{-webkit-text-decoration:var(--alto-sem-text-body-link-text-decoration);text-decoration:var(--alto-sem-text-body-link-text-decoration)}[data-alto-box-link][data-focused] ._product-tile__content-~~icon_zcaft_26~~,[data-alto-box-link][data-hovered] ._product-tile__content-~~icon_zcaft_26~~,[data-alto-box-link][data-pressed] ._product-tile__content-~~icon_zcaft_26~~{transform:translate(4px)}[dir=rtl] [data-alto-box-link] ._product-tile__content-~~icon_zcaft_26~~{transform:rotate(180deg)}[dir=rtl] [data-alto-box-link][data-focused] ._product-tile__content-~~icon_zcaft_26~~,[dir=rtl] [data-alto-box-link][data-hovered] ._product-tile__content-~~icon_zcaft_26~~,[dir=rtl] [data-alto-box-link][data-pressed] ._product-tile__content-~~icon_zcaft_26~~{transform:translate(-4px) rotate(180deg)}
1	+ ._product-tile_jwr0o_1{display:flex;flex-direction:column}._product-tile__media_jwr0o_6{flex-shrink:0;height:64px;width:64px}._product-tile__content_jwr0o_12{display:flex;flex:1;flex-direction:column;min-width:0}._product-tile__content-title_jwr0o_19{color:var(--alto-sem-color-fg-accent-secondary);font-family:var(--alto-sem-text-body-font-family);font-size:var(--alto-sem-text-body-md-font-size);font-weight:var(--alto-sem-text-body-bold-font-weight);letter-spacing:var(--alto-sem-text-body-md-letter-spacing);line-height:var(--alto-sem-text-body-md-line-height);margin:0;padding:0;text-align:left}._product-tile__content-details_jwr0o_31{align-items:flex-start;display:flex;flex-direction:column;margin-top:var(--alto-sem-space-4xs)}._product-tile__content-icon_jwr0o_38{flex-shrink:0;transition:var(--alto-boxlink-transition)}[data-alto-box-link][data-focused]:has(._product-tile_jwr0o_1),[data-alto-box-link][data-hovered]:has(._product-tile_jwr0o_1),[data-alto-box-link][data-pressed]:has(._product-tile_jwr0o_1){transform:translateY(0)}[data-alto-box-link][data-focused] ._product-tile__content-title_jwr0o_19,[data-alto-box-link][data-hovered] ._product-tile__content-title_jwr0o_19,[data-alto-box-link][data-pressed] ._product-tile__content-title_jwr0o_19{-webkit-text-decoration:var(--alto-sem-text-body-link-text-decoration);text-decoration:var(--alto-sem-text-body-link-text-decoration)}[data-alto-box-link][data-focused] ._product-tile__content-icon_jwr0o_38,[data-alto-box-link][data-hovered] ._product-tile__content-icon_jwr0o_38,[data-alto-box-link][data-pressed] ._product-tile__content-icon_jwr0o_38{transform:translate(4px)}[dir=rtl] [data-alto-box-link] ._product-tile__content-icon_jwr0o_38{transform:rotate(180deg)}[dir=rtl] [data-alto-box-link][data-focused] ._product-tile__content-icon_jwr0o_38,[dir=rtl] [data-alto-box-link][data-hovered] ._product-tile__content-icon_jwr0o_38,[dir=rtl] [data-alto-box-link][data-pressed] ._product-tile__content-icon_jwr0o_38{transform:translate(-4px) rotate(180deg)}

package/dist/components/AppBannerSection/AppBannerSection.d.ts CHANGED Viewed

@@ -25,6 +25,8 @@ export interface AppBannerSectionProps {
     headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /** Supporting text rendered below the heading. */
     description: string;
+    /** Test identifier for testing purposes. */
+    'data-testid'?: string;
 }
 interface AppBannerSectionComponent extends React.FC<AppBannerSectionProps> {
     AppMedia: React.FC<AppBannerSectionMediaProps>;

package/dist/components/AppBannerSection/AppBannerSection.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import{jsx as e,jsxs as a}from"react/jsx-runtime";import n from"react";import i from"../Link/Link.js";import{Heading as l}from"../Heading/Heading.js";import{Paragraph as t}from"../Paragraph/Paragraph.js";import p from"../Section/Section.js";import '../../assets/AppBannerSection.css';const d="_app-banner-section_1ixwj_1",r="_app-banner-section__content_1ixwj_23",s="_app-banner-section__content-text_1ixwj_59",o="_app-banner-section__links_1ixwj_72",c=({customAsset:a,...n})=>a?/* @__PURE__ */e("span",{"data-app-banner-slot":"app-media",children:/* @__PURE__ */e(i,{inline:!0,"data-app-banner-link":!0,...n,children:/* @__PURE__ */e("span",{"data-app-banner-asset":!0,children:a})})}):null,m=({customAsset:a,...n})=>a?/* @__PURE__ */e("span",{"data-app-banner-slot":"qr-code",children:/* @__PURE__ */e(i,{inline:!0,"data-app-banner-link":!0,...n,children:/* @__PURE__ */e("span",{"data-app-banner-asset":!0,children:a})})}):null,h=({customAsset:a,...n})=>a?/* @__PURE__ */e("span",{"data-app-banner-slot":"app-store-badge",children:/* @__PURE__ */e(i,{inline:!0,"data-app-banner-link":!0,...n,children:/* @__PURE__ */e("span",{"data-app-banner-asset":!0,children:a})})}):null,g=({customAsset:a,...n})=>a?/* @__PURE__ */e("span",{"data-app-banner-slot":"google-play-badge",children:/* @__PURE__ */e(i,{inline:!0,"data-app-banner-link":!0,...n,children:/* @__PURE__ */e("span",{"data-app-banner-asset":!0,children:a})})}):null,b=({children:i,title:b,headingLevel:_="h2",description:u})=>{const A=n.Children.toArray(i),f=A.find(e=>n.isValidElement(e)&&e.type===c),y=A.find(e=>n.isValidElement(e)&&e.type===m),x=A.find(e=>n.isValidElement(e)&&e.type===h),j=A.find(e=>n.isValidElement(e)&&e.type===g),B=f&&n.isValidElement(f)?f:null,N=y&&n.isValidElement(y)?y:null,S=x&&n.isValidElement(x)?x:null,E=j&&n.isValidElement(j)?j:null;/* @__PURE__ */
-return e(p,{containerMaxWidth:"page",paddingX:"default",paddingY:"default",children:/* @__PURE__ */e(p.Container,{children:/* @__PURE__ */a("div",{className:d,children:[
-/* @__PURE__ */a("div",{className:r,children:[B,
-/* @__PURE__ */a("div",{className:s,children:[
-/* @__PURE__ */e(l,{as:_,size:"xxs",children:b}),
-/* @__PURE__ */e(t,{size:"md",textAlign:{base:"center",lg:"start"},children:u})]})]}),
-/* @__PURE__ */a("div",{className:o,children:[N,S,E]})]})})})};b.AppMedia=c,b.QRCode=m,b.AppStoreBadge=h,b.GooglePlayBadge=g,b.displayName="AppBannerSection",c.displayName="AppBannerSection.AppMedia",m.displayName="AppBannerSection.QRCode",h.displayName="AppBannerSection.AppStoreBadge",g.displayName="AppBannerSection.GooglePlayBadge";export{b as AppBannerSection,c as AppBannerSectionAppMedia,h as AppBannerSectionAppStoreBadge,g as AppBannerSectionGooglePlayBadge,m as AppBannerSectionQRCode,b as default};
+import{jsx as a,jsxs as e}from"react/jsx-runtime";import n from"react";import i from"../Link/Link.js";import{Heading as t}from"../Heading/Heading.js";import{Paragraph as l}from"../Paragraph/Paragraph.js";import p from"../Section/Section.js";import '../../assets/AppBannerSection.css';const d="_app-banner-section_1ixwj_1",r="_app-banner-section__content_1ixwj_23",s="_app-banner-section__content-text_1ixwj_59",o="_app-banner-section__links_1ixwj_72",c=({customAsset:e,...n})=>e?/* @__PURE__ */a("span",{"data-app-banner-slot":"app-media",children:/* @__PURE__ */a(i,{inline:!0,"data-app-banner-link":!0,...n,children:/* @__PURE__ */a("span",{"data-app-banner-asset":!0,children:e})})}):null,m=({customAsset:e,...n})=>e?/* @__PURE__ */a("span",{"data-app-banner-slot":"qr-code",children:/* @__PURE__ */a(i,{inline:!0,"data-app-banner-link":!0,...n,children:/* @__PURE__ */a("span",{"data-app-banner-asset":!0,children:e})})}):null,h=({customAsset:e,...n})=>e?/* @__PURE__ */a("span",{"data-app-banner-slot":"app-store-badge",children:/* @__PURE__ */a(i,{inline:!0,"data-app-banner-link":!0,...n,children:/* @__PURE__ */a("span",{"data-app-banner-asset":!0,children:e})})}):null,g=({customAsset:e,...n})=>e?/* @__PURE__ */a("span",{"data-app-banner-slot":"google-play-badge",children:/* @__PURE__ */a(i,{inline:!0,"data-app-banner-link":!0,...n,children:/* @__PURE__ */a("span",{"data-app-banner-asset":!0,children:e})})}):null,b=({children:i,"data-testid":b,title:_,headingLevel:u="h2",description:A})=>{const f=n.Children.toArray(i),y=f.find(a=>n.isValidElement(a)&&a.type===c),x=f.find(a=>n.isValidElement(a)&&a.type===m),j=f.find(a=>n.isValidElement(a)&&a.type===h),B=f.find(a=>n.isValidElement(a)&&a.type===g),N=y&&n.isValidElement(y)?y:null,S=x&&n.isValidElement(x)?x:null,E=j&&n.isValidElement(j)?j:null,V=B&&n.isValidElement(B)?B:null;/* @__PURE__ */
+return a(p,{containerMaxWidth:"page",paddingX:"default",paddingY:"default","data-testid":b,children:/* @__PURE__ */a(p.Container,{children:/* @__PURE__ */e("div",{className:d,children:[
+/* @__PURE__ */e("div",{className:r,children:[N,
+/* @__PURE__ */e("div",{className:s,children:[
+/* @__PURE__ */a(t,{as:u,size:"xxs",children:_}),
+/* @__PURE__ */a(l,{size:"md",textAlign:{base:"center",lg:"start"},children:A})]})]}),
+/* @__PURE__ */e("div",{className:o,children:[S,E,V]})]})})})};b.AppMedia=c,b.QRCode=m,b.AppStoreBadge=h,b.GooglePlayBadge=g,b.displayName="AppBannerSection",c.displayName="AppBannerSection.AppMedia",m.displayName="AppBannerSection.QRCode",h.displayName="AppBannerSection.AppStoreBadge",g.displayName="AppBannerSection.GooglePlayBadge";export{b as AppBannerSection,c as AppBannerSectionAppMedia,h as AppBannerSectionAppStoreBadge,g as AppBannerSectionGooglePlayBadge,m as AppBannerSectionQRCode,b as default};
 //# sourceMappingURL=AppBannerSection.js.map

package/dist/components/AppBannerSection/AppBannerSection.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"AppBannerSection.js","sources":["../../../src/components/AppBannerSection/AppBannerSection.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './AppBannerSection.module.css';\nimport Link, { type LinkProps } from '../Link';\nimport Heading from '../Heading';\nimport Paragraph from '../Paragraph';\nimport Section from '../Section';\n\nexport type AppBannerLinkProps = Omit<LinkProps, 'children' \| 'inline'> & {\n /*\n All AppBannerSection subcomponents are rendered inside the design-system Link component,\n * so Link props like href/target/isDisabled are supported here.\n /\n /* Custom asset (image/SVG) to render inside the link /\n customAsset?: React.ReactNode;\n /* @ignore Always controlled by AppBannerSection slots. /\n children?: never;\n /* @ignore Always enabled for banner assets. /\n inline?: never;\n};\n\nexport type AppBannerSectionMediaProps = AppBannerLinkProps;\n\nexport type AppBannerSectionLinkProps = AppBannerLinkProps;\n\nexport interface AppBannerSectionProps {\n /* Optional compound subcomponents /\n children?: React.ReactNode;\n /* Main heading text for the banner. /\n title: string;\n /* Semantic heading level for the title.\n * @default 'h2'\n /\n headingLevel?: 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6';\n /* Supporting text rendered below the heading. */\n description: string;\n}\n\ninterface AppBannerSectionComponent extends React.FC<AppBannerSectionProps> {\n AppMedia: React.FC<AppBannerSectionMediaProps>;\n QRCode: React.FC<AppBannerSectionLinkProps>;\n AppStoreBadge: React.FC<AppBannerSectionLinkProps>;\n GooglePlayBadge: React.FC<AppBannerSectionLinkProps>;\n}\n\nexport const AppBannerSectionAppMedia = ({\n customAsset,\n ...linkProps\n}: AppBannerSectionMediaProps) => {\n if (!customAsset) {\n return null;\n }\n\n return (\n <span data-app-banner-slot=\"app-media\">\n <Link inline data-app-banner-link {...linkProps}>\n <span data-app-banner-asset>{customAsset}</span>\n </Link>\n </span>\n );\n};\n\nexport const AppBannerSectionQRCode = ({\n customAsset,\n ...linkProps\n}: AppBannerSectionLinkProps) => {\n if (!customAsset) {\n return null;\n }\n\n return (\n <span data-app-banner-slot=\"qr-code\">\n <Link inline data-app-banner-link {...linkProps}>\n <span data-app-banner-asset>{customAsset}</span>\n </Link>\n </span>\n );\n};\n\nexport const AppBannerSectionAppStoreBadge = ({\n customAsset,\n ...linkProps\n}: AppBannerSectionLinkProps) => {\n if (!customAsset) {\n return null;\n }\n\n return (\n <span data-app-banner-slot=\"app-store-badge\">\n <Link inline data-app-banner-link {...linkProps}>\n <span data-app-banner-asset>{customAsset}</span>\n </Link>\n </span>\n );\n};\n\nexport const AppBannerSectionGooglePlayBadge = ({\n customAsset,\n ...linkProps\n}: AppBannerSectionLinkProps) => {\n if (!customAsset) {\n return null;\n }\n\n return (\n <span data-app-banner-slot=\"google-play-badge\">\n <Link inline data-app-banner-link {...linkProps}>\n <span data-app-banner-asset>{customAsset}</span>\n </Link>\n </span>\n );\n};\n\nexport const AppBannerSection = (({\n children,\n title,\n headingLevel = 'h2',\n description,\n}: AppBannerSectionProps) => {\n const childComponents = React.Children.toArray(children);\n\n const mediaChild = childComponents.find(\n (child) =>\n React.isValidElement<AppBannerSectionMediaProps>(child) &&\n child.type === AppBannerSectionAppMedia,\n );\n\n const qrCodeChild = childComponents.find(\n (child) =>\n React.isValidElement<AppBannerSectionLinkProps>(child) &&\n child.type === AppBannerSectionQRCode,\n );\n\n const appStoreBadgeChild = childComponents.find(\n (child) =>\n React.isValidElement<AppBannerSectionLinkProps>(child) &&\n child.type === AppBannerSectionAppStoreBadge,\n );\n\n const googlePlayBadgeChild = childComponents.find(\n (child) =>\n React.isValidElement<AppBannerSectionLinkProps>(child) &&\n child.type === AppBannerSectionGooglePlayBadge,\n );\n\n const mediaNode =\n mediaChild && React.isValidElement<AppBannerSectionMediaProps>(mediaChild)\n ? mediaChild\n : null;\n\n const qrCodeNode =\n qrCodeChild && React.isValidElement<AppBannerSectionLinkProps>(qrCodeChild)\n ? qrCodeChild\n : null;\n\n const appStoreBadgeNode =\n appStoreBadgeChild &&\n React.isValidElement<AppBannerSectionLinkProps>(appStoreBadgeChild)\n ? appStoreBadgeChild\n : null;\n\n const googlePlayBadgeNode =\n googlePlayBadgeChild &&\n React.isValidElement<AppBannerSectionLinkProps>(googlePlayBadgeChild)\n ? googlePlayBadgeChild\n : null;\n\n return (\n <Section containerMaxWidth=\"page\" paddingX=\"default\" paddingY=\"default\">\n <Section.Container>\n <div className={styles['app-banner-section']}>\n <div className={styles['app-banner-section__content']}>\n {mediaNode}\n <div className={styles['app-banner-section__content-text']}>\n <Heading as={headingLevel} size=\"xxs\">\n {title}\n </Heading>\n <Paragraph size=\"md\" textAlign={{ base: 'center', lg: 'start' }}>\n {description}\n </Paragraph>\n </div>\n </div>\n\n <div className={styles['app-banner-section__links']}>\n {qrCodeNode}\n {appStoreBadgeNode}\n {googlePlayBadgeNode}\n </div>\n </div>\n </Section.Container>\n </Section>\n );\n}) as AppBannerSectionComponent;\n\nAppBannerSection.AppMedia = AppBannerSectionAppMedia;\nAppBannerSection.QRCode = AppBannerSectionQRCode;\nAppBannerSection.AppStoreBadge = AppBannerSectionAppStoreBadge;\nAppBannerSection.GooglePlayBadge = AppBannerSectionGooglePlayBadge;\n\nAppBannerSection.displayName = 'AppBannerSection';\nAppBannerSectionAppMedia.displayName = 'AppBannerSection.AppMedia';\nAppBannerSectionQRCode.displayName = 'AppBannerSection.QRCode';\nAppBannerSectionAppStoreBadge.displayName = 'AppBannerSection.AppStoreBadge';\nAppBannerSectionGooglePlayBadge.displayName =\n 'AppBannerSection.GooglePlayBadge';\n\nexport default AppBannerSection;\n"],"names":["AppBannerSectionAppMedia","customAsset","linkProps","children","jsx","Link","inline","AppBannerSectionQRCode","AppBannerSectionAppStoreBadge","AppBannerSectionGooglePlayBadge","AppBannerSection","title","headingLevel","description","childComponents","React","Children","toArray","mediaChild","find","child","isValidElement","type","qrCodeChild","appStoreBadgeChild","googlePlayBadgeChild","mediaNode","qrCodeNode","appStoreBadgeNode","googlePlayBadgeNode","Section","containerMaxWidth","paddingX","paddingY","Container","~~jsxs","~~className","styles","Heading","as","size","Paragraph","textAlign","base","lg","AppMedia","QRCode","AppStoreBadge","GooglePlayBadge","displayName"],"mappings":"~~wZA4CaA~~,EAA2B,EACtCC,iBACGC,KAEED,mBAKF,OAAA,CAAK,uBAAqB,YACzBE,wBAAAC,EAACC,EAAA,CAAKC,QAAM,EAAC,wBAAoB,KAAKJ,EACpCC,wBAAAC,EAAC,OAAA,CAAK,yBAAqB,EAAED,SAAAF,QAN1B,KAYEM,EAAyB,EACpCN,iBACGC,KAEED,mBAKF,OAAA,CAAK,uBAAqB,UACzBE,wBAAAC,EAACC,EAAA,CAAKC,QAAM,EAAC,wBAAoB,KAAKJ,EACpCC,wBAAAC,EAAC,OAAA,CAAK,yBAAqB,EAAED,SAAAF,QAN1B,KAYEO,EAAgC,EAC3CP,iBACGC,KAEED,mBAKF,OAAA,CAAK,uBAAqB,kBACzBE,wBAAAC,EAACC,EAAA,CAAKC,QAAM,EAAC,wBAAoB,KAAKJ,EACpCC,wBAAAC,EAAC,OAAA,CAAK,yBAAqB,EAAED,SAAAF,QAN1B,KAYEQ,EAAkC,EAC7CR,iBACGC,KAEED,mBAKF,OAAA,CAAK,uBAAqB,oBACzBE,wBAAAC,EAACC,EAAA,CAAKC,QAAM,EAAC,wBAAoB,KAAKJ,EACpCC,wBAAAC,EAAC,OAAA,CAAK,yBAAqB,EAAED,SAAAF,QAN1B,KAYES,IACXP,~~WACAQ~~,QACAC,eAAe,KACfC,kBAEA,MAAMC,EAAkBC,EAAMC,SAASC,~~QAAQd~~,~~GAEzCe~~,EAAaJ,EAAgBK,KAChCC,GACCL,EAAMM,eAA2CD,IACjDA,EAAME,~~OAAStB~~,~~GAGbuB~~,EAAcT,EAAgBK,KACjCC,GACCL,EAAMM,eAA0CD,IAChDA,EAAME,~~OAASf~~,~~GAGbiB~~,EAAqBV,EAAgBK,KACxCC,GACCL,EAAMM,eAA0CD,IAChDA,EAAME,~~OAASd~~,~~GAGbiB~~,EAAuBX,EAAgBK,KAC1CC,GACCL,EAAMM,eAA0CD,IAChDA,EAAME,~~OAASb~~,~~GAGbiB~~,EACJR,GAAcH,EAAMM,eAA2CH,GAC3DA,EACA,KAEAS,EACJJ,GAAeR,EAAMM,eAA0CE,GAC3DA,EACA,KAEAK,EACJJ,GACAT,EAAMM,eAA0CG,GAC5CA,EACA,KAEAK,EACJJ,GACAV,EAAMM,eAA0CI,GAC5CA,EACA;AAEN,~~SACGK~~,EAAA,~~CAAQC~~,kBAAkB,~~OAAOC~~,SAAS,~~UAAUC~~,SAAS,~~UAC5D9B~~,wBAAAC,~~EAAC0B~~,EAAQI,UAAR,~~CACC/B~~,~~wBAAAgC~~,~~EAAC~~,~~OAAIC~~,UAAWC,EACdlC,SAAA;iBAAC,MAAA,CAAIiC,UAAWC,EACblC,SAAA,~~CAAAuB~~;iBACA,MAAA,~~CAAIU~~,UAAWC,EACdlC,SAAA;eAAAC,EAACkC,EAAA,CAAQC,~~GAAI3B~~,~~EAAc4B~~,KAAK,MAC7BrC,~~SAAAQ~~;~~eAEHP~~,EAACqC,EAAA,CAAUD,KAAK,KAAKE,UAAW,CAAEC,KAAM,SAAUC,GAAI,SACnDzC,~~SAAAU~~;iBAKN,MAAA,~~CAAIuB~~,UAAWC,EACblC,SAAA,~~CAAAwB~~,EACAC,EACAC,WAMb,~~EAEAnB~~,EAAiBmC,SAAW7C,EAC5BU,EAAiBoC,OAASvC,EAC1BG,EAAiBqC,cAAgBvC,EACjCE,EAAiBsC,gBAAkBvC,EAEnCC,EAAiBuC,YAAc,mBAC/BjD,EAAyBiD,YAAc,4BACvC1C,EAAuB0C,YAAc,0BACrCzC,EAA8ByC,YAAc,iCAC5CxC,EAAgCwC,YAC9B"}
1	+ {"version":3,"file":"AppBannerSection.js","sources":["../../../src/components/AppBannerSection/AppBannerSection.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './AppBannerSection.module.css';\nimport Link, { type LinkProps } from '../Link';\nimport Heading from '../Heading';\nimport Paragraph from '../Paragraph';\nimport Section from '../Section';\n\nexport type AppBannerLinkProps = Omit<LinkProps, 'children' \| 'inline'> & {\n /*\n All AppBannerSection subcomponents are rendered inside the design-system Link component,\n * so Link props like href/target/isDisabled are supported here.\n /\n /* Custom asset (image/SVG) to render inside the link /\n customAsset?: React.ReactNode;\n /* @ignore Always controlled by AppBannerSection slots. /\n children?: never;\n /* @ignore Always enabled for banner assets. /\n inline?: never;\n};\n\nexport type AppBannerSectionMediaProps = AppBannerLinkProps;\n\nexport type AppBannerSectionLinkProps = AppBannerLinkProps;\n\nexport interface AppBannerSectionProps {\n /* Optional compound subcomponents /\n children?: React.ReactNode;\n /* Main heading text for the banner. /\n title: string;\n /* Semantic heading level for the title.\n * @default 'h2'\n /\n headingLevel?: 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6';\n /* Supporting text rendered below the heading. /\n description: string;\n /* Test identifier for testing purposes. */\n 'data-testid'?: string;\n}\n\ninterface AppBannerSectionComponent extends React.FC<AppBannerSectionProps> {\n AppMedia: React.FC<AppBannerSectionMediaProps>;\n QRCode: React.FC<AppBannerSectionLinkProps>;\n AppStoreBadge: React.FC<AppBannerSectionLinkProps>;\n GooglePlayBadge: React.FC<AppBannerSectionLinkProps>;\n}\n\nexport const AppBannerSectionAppMedia = ({\n customAsset,\n ...linkProps\n}: AppBannerSectionMediaProps) => {\n if (!customAsset) {\n return null;\n }\n\n return (\n <span data-app-banner-slot=\"app-media\">\n <Link inline data-app-banner-link {...linkProps}>\n <span data-app-banner-asset>{customAsset}</span>\n </Link>\n </span>\n );\n};\n\nexport const AppBannerSectionQRCode = ({\n customAsset,\n ...linkProps\n}: AppBannerSectionLinkProps) => {\n if (!customAsset) {\n return null;\n }\n\n return (\n <span data-app-banner-slot=\"qr-code\">\n <Link inline data-app-banner-link {...linkProps}>\n <span data-app-banner-asset>{customAsset}</span>\n </Link>\n </span>\n );\n};\n\nexport const AppBannerSectionAppStoreBadge = ({\n customAsset,\n ...linkProps\n}: AppBannerSectionLinkProps) => {\n if (!customAsset) {\n return null;\n }\n\n return (\n <span data-app-banner-slot=\"app-store-badge\">\n <Link inline data-app-banner-link {...linkProps}>\n <span data-app-banner-asset>{customAsset}</span>\n </Link>\n </span>\n );\n};\n\nexport const AppBannerSectionGooglePlayBadge = ({\n customAsset,\n ...linkProps\n}: AppBannerSectionLinkProps) => {\n if (!customAsset) {\n return null;\n }\n\n return (\n <span data-app-banner-slot=\"google-play-badge\">\n <Link inline data-app-banner-link {...linkProps}>\n <span data-app-banner-asset>{customAsset}</span>\n </Link>\n </span>\n );\n};\n\nexport const AppBannerSection = (({\n children,\n 'data-testid': dataTestId,\n title,\n headingLevel = 'h2',\n description,\n}: AppBannerSectionProps) => {\n const childComponents = React.Children.toArray(children);\n\n const mediaChild = childComponents.find(\n (child) =>\n React.isValidElement<AppBannerSectionMediaProps>(child) &&\n child.type === AppBannerSectionAppMedia,\n );\n\n const qrCodeChild = childComponents.find(\n (child) =>\n React.isValidElement<AppBannerSectionLinkProps>(child) &&\n child.type === AppBannerSectionQRCode,\n );\n\n const appStoreBadgeChild = childComponents.find(\n (child) =>\n React.isValidElement<AppBannerSectionLinkProps>(child) &&\n child.type === AppBannerSectionAppStoreBadge,\n );\n\n const googlePlayBadgeChild = childComponents.find(\n (child) =>\n React.isValidElement<AppBannerSectionLinkProps>(child) &&\n child.type === AppBannerSectionGooglePlayBadge,\n );\n\n const mediaNode =\n mediaChild && React.isValidElement<AppBannerSectionMediaProps>(mediaChild)\n ? mediaChild\n : null;\n\n const qrCodeNode =\n qrCodeChild && React.isValidElement<AppBannerSectionLinkProps>(qrCodeChild)\n ? qrCodeChild\n : null;\n\n const appStoreBadgeNode =\n appStoreBadgeChild &&\n React.isValidElement<AppBannerSectionLinkProps>(appStoreBadgeChild)\n ? appStoreBadgeChild\n : null;\n\n const googlePlayBadgeNode =\n googlePlayBadgeChild &&\n React.isValidElement<AppBannerSectionLinkProps>(googlePlayBadgeChild)\n ? googlePlayBadgeChild\n : null;\n\n return (\n <Section\n containerMaxWidth=\"page\"\n paddingX=\"default\"\n paddingY=\"default\"\n data-testid={dataTestId}\n >\n <Section.Container>\n <div className={styles['app-banner-section']}>\n <div className={styles['app-banner-section__content']}>\n {mediaNode}\n <div className={styles['app-banner-section__content-text']}>\n <Heading as={headingLevel} size=\"xxs\">\n {title}\n </Heading>\n <Paragraph size=\"md\" textAlign={{ base: 'center', lg: 'start' }}>\n {description}\n </Paragraph>\n </div>\n </div>\n\n <div className={styles['app-banner-section__links']}>\n {qrCodeNode}\n {appStoreBadgeNode}\n {googlePlayBadgeNode}\n </div>\n </div>\n </Section.Container>\n </Section>\n );\n}) as AppBannerSectionComponent;\n\nAppBannerSection.AppMedia = AppBannerSectionAppMedia;\nAppBannerSection.QRCode = AppBannerSectionQRCode;\nAppBannerSection.AppStoreBadge = AppBannerSectionAppStoreBadge;\nAppBannerSection.GooglePlayBadge = AppBannerSectionGooglePlayBadge;\n\nAppBannerSection.displayName = 'AppBannerSection';\nAppBannerSectionAppMedia.displayName = 'AppBannerSection.AppMedia';\nAppBannerSectionQRCode.displayName = 'AppBannerSection.QRCode';\nAppBannerSectionAppStoreBadge.displayName = 'AppBannerSection.AppStoreBadge';\nAppBannerSectionGooglePlayBadge.displayName =\n 'AppBannerSection.GooglePlayBadge';\n\nexport default AppBannerSection;\n"],"names":["AppBannerSectionAppMedia","customAsset","linkProps","children","jsx","Link","inline","AppBannerSectionQRCode","AppBannerSectionAppStoreBadge","AppBannerSectionGooglePlayBadge","AppBannerSection","dataTestId","title","headingLevel","description","childComponents","React","Children","toArray","mediaChild","find","child","isValidElement","type","qrCodeChild","appStoreBadgeChild","googlePlayBadgeChild","mediaNode","qrCodeNode","appStoreBadgeNode","googlePlayBadgeNode","Section","containerMaxWidth","paddingX","paddingY","Container","className","styles","Heading","as","size","Paragraph","textAlign","base","lg","AppMedia","QRCode","AppStoreBadge","GooglePlayBadge","displayName"],"mappings":"wZA8CaA,EAA2B,EACtCC,iBACGC,KAEED,mBAKF,OAAA,CAAK,uBAAqB,YACzBE,wBAAAC,EAACC,EAAA,CAAKC,QAAM,EAAC,wBAAoB,KAAKJ,EACpCC,wBAAAC,EAAC,OAAA,CAAK,yBAAqB,EAAED,SAAAF,QAN1B,KAYEM,EAAyB,EACpCN,iBACGC,KAEED,mBAKF,OAAA,CAAK,uBAAqB,UACzBE,wBAAAC,EAACC,EAAA,CAAKC,QAAM,EAAC,wBAAoB,KAAKJ,EACpCC,wBAAAC,EAAC,OAAA,CAAK,yBAAqB,EAAED,SAAAF,QAN1B,KAYEO,EAAgC,EAC3CP,iBACGC,KAEED,mBAKF,OAAA,CAAK,uBAAqB,kBACzBE,wBAAAC,EAACC,EAAA,CAAKC,QAAM,EAAC,wBAAoB,KAAKJ,EACpCC,wBAAAC,EAAC,OAAA,CAAK,yBAAqB,EAAED,SAAAF,QAN1B,KAYEQ,EAAkC,EAC7CR,iBACGC,KAEED,mBAKF,OAAA,CAAK,uBAAqB,oBACzBE,wBAAAC,EAACC,EAAA,CAAKC,QAAM,EAAC,wBAAoB,KAAKJ,EACpCC,wBAAAC,EAAC,OAAA,CAAK,yBAAqB,EAAED,SAAAF,QAN1B,KAYES,IACXP,WACA,cAAeQ,EACfC,QACAC,eAAe,KACfC,kBAEA,MAAMC,EAAkBC,EAAMC,SAASC,QAAQf,GAEzCgB,EAAaJ,EAAgBK,KAChCC,GACCL,EAAMM,eAA2CD,IACjDA,EAAME,OAASvB,GAGbwB,EAAcT,EAAgBK,KACjCC,GACCL,EAAMM,eAA0CD,IAChDA,EAAME,OAAShB,GAGbkB,EAAqBV,EAAgBK,KACxCC,GACCL,EAAMM,eAA0CD,IAChDA,EAAME,OAASf,GAGbkB,EAAuBX,EAAgBK,KAC1CC,GACCL,EAAMM,eAA0CD,IAChDA,EAAME,OAASd,GAGbkB,EACJR,GAAcH,EAAMM,eAA2CH,GAC3DA,EACA,KAEAS,EACJJ,GAAeR,EAAMM,eAA0CE,GAC3DA,EACA,KAEAK,EACJJ,GACAT,EAAMM,eAA0CG,GAC5CA,EACA,KAEAK,EACJJ,GACAV,EAAMM,eAA0CI,GAC5CA,EACA;AAEN,OACEtB,EAAC2B,EAAA,CACCC,kBAAkB,OAClBC,SAAS,UACTC,SAAS,UACT,cAAavB,EAEbR,wBAAAC,EAAC2B,EAAQI,UAAR,CACChC,0BAAC,MAAA,CAAIiC,UAAWC,EACdlC,SAAA;iBAAC,MAAA,CAAIiC,UAAWC,EACblC,SAAA,CAAAwB;iBACA,MAAA,CAAIS,UAAWC,EACdlC,SAAA;eAAAC,EAACkC,EAAA,CAAQC,GAAI1B,EAAc2B,KAAK,MAC7BrC,SAAAS;eAEHR,EAACqC,EAAA,CAAUD,KAAK,KAAKE,UAAW,CAAEC,KAAM,SAAUC,GAAI,SACnDzC,SAAAW;iBAKN,MAAA,CAAIsB,UAAWC,EACblC,SAAA,CAAAyB,EACAC,EACAC,WAMb,EAEApB,EAAiBmC,SAAW7C,EAC5BU,EAAiBoC,OAASvC,EAC1BG,EAAiBqC,cAAgBvC,EACjCE,EAAiBsC,gBAAkBvC,EAEnCC,EAAiBuC,YAAc,mBAC/BjD,EAAyBiD,YAAc,4BACvC1C,EAAuB0C,YAAc,0BACrCzC,EAA8ByC,YAAc,iCAC5CxC,EAAgCwC,YAC9B"}

package/dist/components/CollectionCarouselSection/CollectionCarouselSection.d.ts ADDED Viewed

@@ -0,0 +1,49 @@
+import { default as React, HTMLAttributes, ReactNode } from 'react';
+import { LinkProps } from '../Link';
+import { CarouselProps } from '../Carousel/Carousel';
+export interface CollectionCarouselSectionCollectionLinkProps extends Omit<LinkProps, 'size' | 'underline' | 'iconStartProps' | 'iconEndProps' | 'foregroundColor' | 'isDisabled' | 'inline'> {
+    /**
+     * Link text
+     */
+    children?: ReactNode;
+}
+export declare const CollectionCarouselSectionCollectionLink: React.ForwardRefExoticComponent<CollectionCarouselSectionCollectionLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+export interface CollectionCarouselSectionHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {
+    /**
+     * Heading for the section
+     */
+    title: string;
+    /** Semantic heading level for the title.
+     * @default 'h2'
+     */
+    headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Paragraph text shown below the title
+     */
+    description?: string;
+    /**
+     * Slot content shown below the title and description
+     */
+    children?: ReactNode;
+}
+export declare const CollectionCarouselSectionHeader: React.ForwardRefExoticComponent<CollectionCarouselSectionHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface CollectionCarouselSectionCarouselProps extends Omit<CarouselProps, 'carouselWrapperClassName' | 'itemWrapperClassName' | 'nextArrowClassName' | 'prevArrowClassName' | 'arrowStyleVariant' | 'arrowSize' | 'dotsContainerClassName' | 'controlsRef' | 'scrollPadding'> {
+    /**
+     * Carousel items
+     */
+    children?: ReactNode;
+}
+export declare const CollectionCarouselSectionCarousel: React.ForwardRefExoticComponent<CollectionCarouselSectionCarouselProps & React.RefAttributes<HTMLDivElement>>;
+export interface CollectionCarouselSectionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {
+    /**
+     * Content shown in the section. Expects `CollectionCarouselSection.Header` and `CollectionCarouselSection.Carousel`
+     */
+    children?: React.ReactNode;
+}
+export declare const CollectionCarouselSection: {
+    ({ children, }: CollectionCarouselSectionProps): import("react/jsx-runtime").JSX.Element;
+    Header: React.ForwardRefExoticComponent<CollectionCarouselSectionHeaderProps & React.RefAttributes<HTMLDivElement>>;
+    CollectionLink: React.ForwardRefExoticComponent<CollectionCarouselSectionCollectionLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+    Carousel: React.ForwardRefExoticComponent<CollectionCarouselSectionCarouselProps & React.RefAttributes<HTMLDivElement>>;
+};
+export default CollectionCarouselSection;

package/dist/components/CollectionCarouselSection/CollectionCarouselSection.js ADDED Viewed

@@ -0,0 +1,11 @@
+import{jsx as e,jsxs as o}from"react/jsx-runtime";import{forwardRef as l,Children as t,isValidElement as c,useRef as n,useState as a,useCallback as r}from"react";import i from"../Section/Section.js";import{Heading as s}from"../Heading/Heading.js";import{Box as u}from"../Box/Box.js";import _ from"../Link/Link.js";import{Paragraph as d}from"../Paragraph/Paragraph.js";import{Carousel as m}from"../Carousel/Carousel.js";import{CarouselButton as f}from"../Carousel/CarouselButton/CarouselButton.js";import{CarouselDots as p}from"../Carousel/CarouselDots/CarouselDots.js";import '../../assets/CollectionCarouselSection.css';const C={"collection-carousel-section":"_collection-carousel-section_tf9t7_1","collection-carousel-section__container":"_collection-carousel-section__container_tf9t7_5","collection-carousel-section__collection-link":"_collection-carousel-section__collection-link_tf9t7_9","collection-carousel-section__carousel":"_collection-carousel-section__carousel_tf9t7_14","collection-carousel-section__default-dots":"_collection-carousel-section__default-dots_tf9t7_41","collection-carousel-section__default-arrow":"_collection-carousel-section__default-arrow_tf9t7_42","collection-carousel-section__default-arrow--next":"_collection-carousel-section__default-arrow--next_tf9t7_59","collection-carousel-section__default-arrow--prev":"_collection-carousel-section__default-arrow--prev_tf9t7_64","collection-carousel-section__custom-control":"_collection-carousel-section__custom-control_tf9t7_93"},g=l((o,l)=>/* @__PURE__ */e("div",{className:C["collection-carousel-section__collection-link"],children:/* @__PURE__ */e(_,{ref:l,iconEndProps:{iconName:"chevron-right"},...o})}));g.displayName="CollectionCarouselSectionCollectionLink";const h=l(({title:l,headingLevel:n="h2",description:a,children:r,...i},_)=>{let m=null;const f=t.map(r,e=>c(e)?e.type===g?(m=e,null):e:null);/* @__PURE__ */
+return e("div",{ref:_,...i,children:/* @__PURE__ */o(u,{flexDirection:{base:"column",md:"row"},alignItems:{base:"flexStart",md:"flexEnd"},justifyContent:{base:"flexStart",md:"spaceBetween"},gap:"2xs",width:"100%",children:[
+/* @__PURE__ */o(u,{flexDirection:"column",gap:"2xs",width:"full",children:[
+/* @__PURE__ */e(s,{as:n,size:"lg",children:l}),a&&/* @__PURE__ */e(d,{children:a}),f]}),m]})})});h.displayName="CollectionCarouselSectionHeader";const x=l(({children:l,onNavigationStateChange:i,...s},_)=>{const d=n(null),[g,h]=a({canGoPrev:!1,canGoNext:!1,currentPage:0,totalPages:1}),x=r(e=>{h(e),i&&i(e)},[h,i]),w=C["collection-carousel-section__custom-control"],N=t.map(l,(o,l)=>/* @__PURE__ */e("div",{children:o},c(o)?o.key??l:l));/* @__PURE__ */
+return e("div",{ref:_,children:/* @__PURE__ */o(u,{flexDirection:"column",gap:"sm",children:[
+/* @__PURE__ */e(m,{controlsRef:d,onNavigationStateChange:x,carouselWrapperClassName:C["collection-carousel-section__carousel"],itemWrapperClassName:C["collection-carousel-section__carousel-item-wrapper"],nextArrowClassName:`${C["collection-carousel-section__default-arrow"]} ${C["collection-carousel-section__default-arrow--next"]}`,prevArrowClassName:`${C["collection-carousel-section__default-arrow"]} ${C["collection-carousel-section__default-arrow--prev"]}`,arrowStyleVariant:"shapeElevated",arrowSize:"sm",dotsContainerClassName:`${C["collection-carousel-section__default-dots"]} `,scrollPadding:{base:"24px",sm:"40px",lg:"0px"},itemsPerPage:{base:1,sm:2,md:3,lg:4},spaceBetweenItems:8,hideDisabledArrow:!0,...s,children:N}),
+/* @__PURE__ */o(u,{justifyContent:"flexStart",alignItems:"center",gap:"2xs",children:[
+/* @__PURE__ */e(f,{dir:"prev",standalone:!0,onClick:()=>d.current?.prev(),size:"sm",className:w}),
+/* @__PURE__ */e(f,{dir:"next",standalone:!0,onClick:()=>d.current?.next(),size:"sm",className:w}),
+/* @__PURE__ */e(p,{className:w,currentPage:g.currentPage,totalItems:g.totalPages,onDotClick:e=>d.current?.goToSlide(e),onPress:e=>d.current?.goToSlide(e),variant:"transparent"})]})]})})});x.displayName="CollectionCarouselSectionCarousel";const w=({children:o})=>/* @__PURE__ */e(i,{className:C["collection-carousel-section"],paddingX:"default",paddingY:"default",children:/* @__PURE__ */e(i.Container,{containerMaxWidth:"page",flexDirection:"column",className:C["collection-carousel-section__container"],children:o})});(w.Header=h).displayName="CollectionCarouselSection.Header",(w.CollectionLink=g).displayName="CollectionCarouselSection.CollectionLink",(w.Carousel=x).displayName="CollectionCarouselSection.Carousel";export{w as CollectionCarouselSection,x as CollectionCarouselSectionCarousel,g as CollectionCarouselSectionCollectionLink,h as CollectionCarouselSectionHeader,w as default};
+//# sourceMappingURL=CollectionCarouselSection.js.map

package/dist/components/CollectionCarouselSection/CollectionCarouselSection.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"CollectionCarouselSection.js","sources":["../../../src/components/CollectionCarouselSection/CollectionCarouselSection.tsx"],"sourcesContent":["import React, {\n Children,\n forwardRef,\n HTMLAttributes,\n isValidElement,\n ReactNode,\n useCallback,\n useRef,\n useState,\n} from 'react';\nimport Section from '../Section';\nimport Heading from '../Heading';\nimport Box from '../Box';\nimport Link, { LinkProps } from '../Link';\nimport Paragraph from '../Paragraph';\nimport Carousel, { CarouselButton } from '../Carousel';\nimport styles from './CollectionCarouselSection.module.css';\nimport CarouselDots from '../Carousel/CarouselDots/CarouselDots';\nimport {\n CarouselControls,\n CarouselNavigationState,\n CarouselProps,\n} from '../Carousel/Carousel';\n\nexport interface CollectionCarouselSectionCollectionLinkProps\n extends Omit<\n LinkProps,\n | 'size'\n | 'underline'\n | 'iconStartProps'\n | 'iconEndProps'\n | 'foregroundColor'\n | 'isDisabled'\n | 'inline'\n > {\n /**\n * Link text\n */\n children?: ReactNode;\n}\n\nexport const CollectionCarouselSectionCollectionLink = forwardRef<\n HTMLAnchorElement,\n CollectionCarouselSectionCollectionLinkProps\n>((props, forwardedRef) => {\n return (\n <div className={styles['collection-carousel-section__collection-link']}>\n <Link\n ref={forwardedRef}\n iconEndProps={{ iconName: 'chevron-right' }}\n {...props}\n />\n </div>\n );\n});\nCollectionCarouselSectionCollectionLink.displayName =\n 'CollectionCarouselSectionCollectionLink';\n\nexport interface CollectionCarouselSectionHeaderProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'> {\n /**\n * Heading for the section\n */\n title: string;\n /** Semantic heading level for the title.\n * @default 'h2'\n */\n headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n /**\n * Paragraph text shown below the title\n */\n description?: string;\n /**\n * Slot content shown below the title and description\n */\n children?: ReactNode;\n}\n\nexport const CollectionCarouselSectionHeader = forwardRef<\n HTMLDivElement,\n CollectionCarouselSectionHeaderProps\n>(\n (\n { title, headingLevel = 'h2', description, children, ...rest },\n forwardedRef,\n ) => {\n let link: ReactNode | null = null;\n\n const headerSlot = Children.map(children, (child) => {\n if (!isValidElement(child)) return null;\n if (child.type === CollectionCarouselSectionCollectionLink) {\n link = child;\n return null;\n }\n return child;\n });\n\n return (\n <div ref={forwardedRef} {...rest}>\n <Box\n flexDirection={{ base: 'column', md: 'row' }}\n alignItems={{ base: 'flexStart', md: 'flexEnd' }}\n justifyContent={{ base: 'flexStart', md: 'spaceBetween' }}\n gap=\"2xs\"\n width=\"100%\"\n >\n <Box flexDirection=\"column\" gap=\"2xs\" width=\"full\">\n <Heading as={headingLevel} size=\"lg\">\n {title}\n </Heading>\n {description && <Paragraph>{description}</Paragraph>}\n {headerSlot}\n </Box>\n {link}\n </Box>\n </div>\n );\n },\n);\nCollectionCarouselSectionHeader.displayName = 'CollectionCarouselSectionHeader';\n\nexport interface CollectionCarouselSectionCarouselProps\n extends Omit<\n CarouselProps,\n | 'carouselWrapperClassName'\n | 'itemWrapperClassName'\n | 'nextArrowClassName'\n | 'prevArrowClassName'\n | 'arrowStyleVariant'\n | 'arrowSize'\n | 'dotsContainerClassName'\n | 'controlsRef'\n | 'scrollPadding'\n > {\n /**\n * Carousel items\n */\n children?: ReactNode;\n}\n\nexport const CollectionCarouselSectionCarousel = forwardRef<\n HTMLDivElement,\n CollectionCarouselSectionCarouselProps\n>(({ children, onNavigationStateChange, ...rest }, forwardedRef) => {\n const controlsRef = useRef<CarouselControls | null>(null);\n const [navigation, setNavigation] = useState<CarouselNavigationState>({\n canGoPrev: false,\n canGoNext: false,\n currentPage: 0,\n totalPages: 1,\n });\n\n const handleNavigationChange = useCallback(\n (navigationState: CarouselNavigationState) => {\n setNavigation(navigationState);\n if (onNavigationStateChange) {\n onNavigationStateChange(navigationState);\n }\n },\n [setNavigation, onNavigationStateChange],\n );\n\n const customControllClassName =\n styles['collection-carousel-section__custom-control'];\n\n const items = Children.map(children, (child, index) => (\n <div key={isValidElement(child) ? (child.key ?? index) : index}>\n {child}\n </div>\n ));\n\n return (\n <div ref={forwardedRef}>\n <Box flexDirection=\"column\" gap=\"sm\">\n <Carousel\n controlsRef={controlsRef}\n onNavigationStateChange={handleNavigationChange}\n carouselWrapperClassName={\n styles['collection-carousel-section__carousel']\n }\n itemWrapperClassName={\n styles['collection-carousel-section__carousel-item-wrapper']\n }\n nextArrowClassName={`${styles['collection-carousel-section__default-arrow']} ${styles['collection-carousel-section__default-arrow--next']}`}\n prevArrowClassName={`${styles['collection-carousel-section__default-arrow']} ${styles['collection-carousel-section__default-arrow--prev']}`}\n arrowStyleVariant=\"shapeElevated\"\n arrowSize=\"sm\"\n dotsContainerClassName={`${styles['collection-carousel-section__default-dots']} `}\n scrollPadding={{ base: '24px', sm: '40px', lg: '0px' }}\n itemsPerPage={{ base: 1, sm: 2, md: 3, lg: 4 }}\n spaceBetweenItems={8}\n hideDisabledArrow\n {...rest}\n >\n {items}\n </Carousel>\n <Box justifyContent=\"flexStart\" alignItems=\"center\" gap=\"2xs\">\n <CarouselButton\n dir=\"prev\"\n standalone\n onClick={() => controlsRef.current?.prev()}\n size=\"sm\"\n className={customControllClassName}\n />\n <CarouselButton\n dir=\"next\"\n standalone\n onClick={() => controlsRef.current?.next()}\n size=\"sm\"\n className={customControllClassName}\n />\n <CarouselDots\n className={customControllClassName}\n currentPage={navigation.currentPage}\n totalItems={navigation.totalPages}\n onDotClick={(index: number) =>\n controlsRef.current?.goToSlide(index)\n }\n onPress={(index: number) => controlsRef.current?.goToSlide(index)}\n variant=\"transparent\"\n />\n </Box>\n </Box>\n </div>\n );\n});\nCollectionCarouselSectionCarousel.displayName =\n 'CollectionCarouselSectionCarousel';\n\nexport interface CollectionCarouselSectionProps\n extends Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'style'> {\n /**\n * Content shown in the section. Expects `CollectionCarouselSection.Header` and `CollectionCarouselSection.Carousel`\n */\n children?: React.ReactNode;\n}\n\nexport const CollectionCarouselSection = ({\n children,\n}: CollectionCarouselSectionProps) => {\n return (\n <Section\n className={styles['collection-carousel-section']}\n paddingX={'default'}\n paddingY={'default'}\n >\n <Section.Container\n containerMaxWidth=\"page\"\n flexDirection=\"column\"\n className={styles['collection-carousel-section__container']}\n >\n {children}\n </Section.Container>\n </Section>\n );\n};\n\nCollectionCarouselSection.Header = CollectionCarouselSectionHeader;\nCollectionCarouselSection.Header.displayName =\n 'CollectionCarouselSection.Header';\n\nCollectionCarouselSection.CollectionLink =\n CollectionCarouselSectionCollectionLink;\nCollectionCarouselSection.CollectionLink.displayName =\n 'CollectionCarouselSection.CollectionLink';\n\nCollectionCarouselSection.Carousel = CollectionCarouselSectionCarousel;\nCollectionCarouselSection.Carousel.displayName =\n 'CollectionCarouselSection.Carousel';\n\nexport default CollectionCarouselSection;\n"],"names":["CollectionCarouselSectionCollectionLink","forwardRef","props","forwardedRef","className","styles","children","jsx","Link","ref","iconEndProps","iconName","displayName","CollectionCarouselSectionHeader","title","headingLevel","description","rest","link","headerSlot","Children","map","child","isValidElement","type","jsxs","Box","flexDirection","base","md","alignItems","justifyContent","gap","width","Heading","as","size","Paragraph","CollectionCarouselSectionCarousel","onNavigationStateChange","controlsRef","useRef","navigation","setNavigation","useState","canGoPrev","canGoNext","currentPage","totalPages","handleNavigationChange","useCallback","navigationState","customControllClassName","items","index","key","Carousel","carouselWrapperClassName","itemWrapperClassName","nextArrowClassName","prevArrowClassName","arrowStyleVariant","arrowSize","dotsContainerClassName","scrollPadding","sm","lg","itemsPerPage","spaceBetweenItems","hideDisabledArrow","CarouselButton","dir","standalone","onClick","current","prev","next","CarouselDots","totalItems","onDotClick","goToSlide","onPress","variant","CollectionCarouselSection","Section","paddingX","paddingY","Container","containerMaxWidth","Header","CollectionLink"],"mappings":"g7CAyCaA,EAA0CC,EAGrD,CAACC,EAAOC,qBAEL,MAAA,CAAIC,UAAWC,EAAO,gDACrBC,wBAAAC,EAACC,EAAA,CACCC,IAAKN,EACLO,aAAc,CAAEC,SAAU,oBACtBT,OAKZF,EAAwCY,YACtC,0CAsBK,MAAMC,EAAkCZ,EAI7C,EACIa,QAAOC,eAAe,KAAMC,cAAaV,cAAaW,GACxDd,KAEA,IAAIe,EAAyB,KAE7B,MAAMC,EAAaC,EAASC,IAAIf,EAAWgB,GACpCC,EAAeD,GAChBA,EAAME,OAASxB,GACjBkB,EAAOI,EACA,MAEFA,EAL4B;AAQrC,SACG,MAAA,CAAIb,IAAKN,KAAkBc,EAC1BX,wBAAAmB,EAACC,EAAA,CACCC,cAAe,CAAEC,KAAM,SAAUC,GAAI,OACrCC,WAAY,CAAEF,KAAM,YAAaC,GAAI,WACrCE,eAAgB,CAAEH,KAAM,YAAaC,GAAI,gBACzCG,IAAI,MACJC,MAAM,OAEN3B,SAAA;eAAAmB,EAACC,GAAIC,cAAc,SAASK,IAAI,MAAMC,MAAM,OAC1C3B,SAAA;eAAAC,EAAC2B,EAAA,CAAQC,GAAIpB,EAAcqB,KAAK,KAC7B9B,SAAAQ,IAEFE,kBAAeT,EAAC8B,EAAA,CAAW/B,SAAAU,IAC3BG,KAEFD,SAMXL,EAAgCD,YAAc,kCAqBvC,MAAM0B,EAAoCrC,EAG/C,EAAGK,WAAUiC,6BAA4BtB,GAAQd,KACjD,MAAMqC,EAAcC,EAAgC,OAC7CC,EAAYC,GAAiBC,EAAkC,CACpEC,WAAW,EACXC,WAAW,EACXC,YAAa,EACbC,WAAY,IAGRC,EAAyBC,EAC5BC,IACCR,EAAcQ,GACVZ,GACFA,EAAwBY,IAG5B,CAACR,EAAeJ,IAGZa,EACJ/C,EAAO,+CAEHgD,EAAQjC,EAASC,IAAIf,EAAU,CAACgB,EAAOgC,qBAC1C,MAAA,CACEhD,SAAAgB,GADOC,EAAeD,GAAUA,EAAMiC,KAAOD,EAASA;AAK3D,OACE/C,EAAC,OAAIE,IAAKN,EACRG,0BAACoB,EAAA,CAAIC,cAAc,SAASK,IAAI,KAC9B1B,SAAA;eAAAC,EAACiD,EAAA,CACChB,cACAD,wBAAyBU,EACzBQ,yBACEpD,EAAO,yCAETqD,qBACErD,EAAO,sDAETsD,mBAAoB,GAAGtD,EAAO,iDAAiDA,EAAO,sDACtFuD,mBAAoB,GAAGvD,EAAO,iDAAiDA,EAAO,sDACtFwD,kBAAkB,gBAClBC,UAAU,KACVC,uBAAwB,GAAG1D,EAAO,gDAClC2D,cAAe,CAAEpC,KAAM,OAAQqC,GAAI,OAAQC,GAAI,OAC/CC,aAAc,CAAEvC,KAAM,EAAGqC,GAAI,EAAGpC,GAAI,EAAGqC,GAAI,GAC3CE,kBAAmB,EACnBC,mBAAiB,KACbpD,EAEHX,SAAA+C;iBAEF3B,EAAA,CAAIK,eAAe,YAAYD,WAAW,SAASE,IAAI,MACtD1B,SAAA;eAAAC,EAAC+D,EAAA,CACCC,IAAI,OACJC,YAAU,EACVC,QAAS,IAAMjC,EAAYkC,SAASC,OACpCvC,KAAK,KACLhC,UAAWgD;eAEb7C,EAAC+D,EAAA,CACCC,IAAI,OACJC,YAAU,EACVC,QAAS,IAAMjC,EAAYkC,SAASE,OACpCxC,KAAK,KACLhC,UAAWgD;eAEb7C,EAACsE,EAAA,CACCzE,UAAWgD,EACXL,YAAaL,EAAWK,YACxB+B,WAAYpC,EAAWM,WACvB+B,WAAazB,GACXd,EAAYkC,SAASM,UAAU1B,GAEjC2B,QAAU3B,GAAkBd,EAAYkC,SAASM,UAAU1B,GAC3D4B,QAAQ,0BAOpB5C,EAAkC1B,YAChC,oCAUK,MAAMuE,EAA4B,EACvC7E,6BAGEC,EAAC6E,EAAA,CACChF,UAAWC,EAAO,+BAClBgF,SAAU,UACVC,SAAU,UAEVhF,wBAAAC,EAAC6E,EAAQG,UAAR,CACCC,kBAAkB,OAClB7D,cAAc,SACdvB,UAAWC,EAAO,0CAEjBC,gBAMT6E,EAA0BM,OAAS5E,GACFD,YAC/B,oCAEFuE,EAA0BO,eACxB1F,GACuCY,YACvC,4CAEFuE,EAA0B3B,SAAWlB,GACF1B,YACjC"}

package/dist/components/CollectionCarouselSection/index.d.ts ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export { default } from './CollectionCarouselSection';
2	+ export type * from './CollectionCarouselSection';

package/dist/components/CollectionCarouselSection/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{CollectionCarouselSection as o}from"./CollectionCarouselSection.js";export{o as default};
2	+ //# sourceMappingURL=index.js.map

package/dist/components/CollectionCarouselSection/index.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/Dialog/Dialog.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { AriaDialogProps } from '@react-types/dialog';
-type DialogSize = 'dialogSmall' | 'dialogMedium' | 'dialogLarge';
+type DialogSize = 'dialogSmall' | 'dialogMedium' | 'dialogLarge' | 'dialogExtraLarge';
 type DialogRole = 'alertdialog' | 'dialog';
 export interface DialogProps extends AriaDialogProps {
     /**

package/dist/components/Dialog/Dialog.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import{jsx as e,jsxs as o}from"react/jsx-runtime";import a,{useRef as i}from"react";import{useDialog as l}from"@react-aria/dialog";import{OverlayContainer as n,UNSAFE_PortalProvider as r,useOverlay as d,usePreventScroll as s,useModal as t}from"@react-aria/overlays";import{FocusScope as c}from"@react-aria/focus";import{IconButton as m}from"../IconButton/IconButton.js";import '../../assets/Dialog.css';const u={dialogWrapper:"_dialogWrapper_1sou5_1",overlay:"_overlay_1sou5_10",absolute:"_absolute_1sou5_16",dialog:"_dialog_1sou5_1",noPadding:"_noPadding_1sou5_35",dialogContent:"_dialogContent_1sou5_64",dialogHeading:"_dialogHeading_1sou5_71",dialogContentInner:"_dialogContentInner_1sou5_75",noHeader:"_noHeader_1sou5_81",closeButton:"_closeButton_1sou5_85",dialogSmall:"_dialogSmall_1sou5_102",dialogMedium:"_dialogMedium_1sou5_106",dialogLarge:"_dialogLarge_1sou5_110"},g=({id:o,children:a})=>/* @__PURE__ */e("div",{className:u.dialogHeading,id:o,children:a}),_=({children:o})=>/* @__PURE__ */e("div",{className:u.dialogContentInner,children:o});function p(n){const{onClose:r,size:_="dialogMedium",modal:p=!1,hasDismissButton:h=!0,dismissButtonLabel:y="Close dialog",role:b="dialog",id:f,removePadding:v=!1,zIndex:C,portalContainer:N,children:P}=n,H=i(null),{dialogProps:B}=l({...n,role:b},H),{overlayProps:D,underlayProps:I}=d({...n,isOpen:!0,onClose:r,isDismissable:!p,isKeyboardDismissDisabled:p},H);N||s();const{modalProps:x}=t(),z=a.Children.toArray(P).find(e=>a.isValidElement(e)&&e.type===g),j=a.Children.toArray(P).filter(e=>!a.isValidElement(e)||e.type!==g),L=Boolean(z),$=n["aria-labelledby"]||`${f}-header`,M=n["aria-describedby"]||`${f}-content`,S=[u.dialog,u[_],...v?[u.noPadding]:[]].join(" "),V=void 0!==C?{zIndex:C}:{},W=[u.dialogWrapper,...p?[u.modal]:[],...N?[u.absolute]:[]].join(" "),A=[u.overlay,...N?[u.absolute]:[]].join(" ");/* @__PURE__ */
-return o("div",{className:W,style:V,children:[p&&/* @__PURE__ */e("div",{className:A,...I,"aria-hidden":"true"}),
-/* @__PURE__ */e(c,{contain:!0,restoreFocus:!0,autoFocus:!1,children:/* @__PURE__ */o("div",{...D,...B,...x,ref:H,className:S,"data-size":_,id:f,role:b,"aria-labelledby":$,"aria-describedby":M,children:[
-/* @__PURE__ */o("div",{className:`${u.dialogContent} ${L?"":u.noHeader}`,children:[L&&/* @__PURE__ */e("div",{className:u.dialogHeader,id:$,children:z}),
-/* @__PURE__ */e("div",{id:M,children:j})]}),h&&/* @__PURE__ */e("div",{className:u.closeButton,children:/* @__PURE__ */e(m,{onPress:r,styleVariant:"white",emphasis:"primary",size:"sm",iconProps:{iconName:"close",iconPrefix:"far",iconSize:"1x"},tooltipLabel:y,"aria-label":y})})]})})]})}function h(o){const{isOpen:a,children:i,portalContainer:l}=o;if(!a)return null;const d=/* @__PURE__ */e(n,{children:/* @__PURE__ */e(p,{...o,children:i})});return l?/* @__PURE__ */e(r,{getContainer:()=>l,children:d}):d}g.displayName="Dialog.Header",_.displayName="Dialog.Content",h.Header=g,h.Content=_,h.displayName="Dialog";export{h as Dialog,h as default};
+import{jsx as i,jsxs as a}from"react/jsx-runtime";import e,{useRef as o}from"react";import{useDialog as l}from"@react-aria/dialog";import{OverlayContainer as d,UNSAFE_PortalProvider as r,useOverlay as n,usePreventScroll as _,useModal as s}from"@react-aria/overlays";import{FocusScope as t}from"@react-aria/focus";import{IconButton as g}from"../IconButton/IconButton.js";import '../../assets/Dialog.css';const c={dialog__wrapper:"_dialog__wrapper_1uzi3_1",dialog__overlay:"_dialog__overlay_1uzi3_10","dialog__wrapper--absolute":"_dialog__wrapper--absolute_1uzi3_16","dialog__overlay--absolute":"_dialog__overlay--absolute_1uzi3_17",dialog:"_dialog_1uzi3_1","dialog--no-padding":"_dialog--no-padding_1uzi3_35",dialog__content:"_dialog__content_1uzi3_64",dialog__heading:"_dialog__heading_1uzi3_71","dialog__content-inner":"_dialog__content-inner_1uzi3_75","dialog__content--no-header":"_dialog__content--no-header_1uzi3_81","dialog__close-button":"_dialog__close-button_1uzi3_85","dialog--size-small":"_dialog--size-small_1uzi3_102","dialog--size-medium":"_dialog--size-medium_1uzi3_106","dialog--size-large":"_dialog--size-large_1uzi3_110","dialog--size-xlarge":"_dialog--size-xlarge_1uzi3_114"},m={dialogSmall:c["dialog--size-small"],dialogMedium:c["dialog--size-medium"],dialogLarge:c["dialog--size-large"],dialogExtraLarge:c["dialog--size-xlarge"]},u=({id:a,children:e})=>/* @__PURE__ */i("div",{className:c.dialog__heading,id:a,children:e}),p=({children:a})=>/* @__PURE__ */i("div",{className:c["dialog__content-inner"],children:a});function z(d){const{onClose:r,size:p="dialogMedium",modal:z=!1,hasDismissButton:h=!0,dismissButtonLabel:y="Close dialog",role:b="dialog",id:v,removePadding:f=!1,zIndex:N,portalContainer:x,children:C}=d,P=o(null),{dialogProps:w}=l({...d,role:b},P),{overlayProps:D,underlayProps:j}=n({...d,isOpen:!0,onClose:r,isDismissable:!z,isKeyboardDismissDisabled:z},P);x||_();const{modalProps:B}=s(),I=e.Children.toArray(C).find(i=>e.isValidElement(i)&&i.type===u),L=e.Children.toArray(C).filter(i=>!e.isValidElement(i)||i.type!==u),E=Boolean(I),V=d["aria-labelledby"]||`${v}-header`,A=d["aria-describedby"]||`${v}-content`,F=[c.dialog,m[p],...f?[c["dialog--no-padding"]]:[]].join(" "),H=void 0!==N?{zIndex:N}:{},M=[c.dialog__wrapper,...x?[c["dialog__wrapper--absolute"]]:[]].join(" "),O=[c.dialog__overlay,...x?[c["dialog__overlay--absolute"]]:[]].join(" ");/* @__PURE__ */
+return a("div",{className:M,style:H,children:[z&&/* @__PURE__ */i("div",{className:O,...j,"aria-hidden":"true"}),
+/* @__PURE__ */i(t,{contain:!0,restoreFocus:!0,autoFocus:!1,children:/* @__PURE__ */a("div",{...D,...w,...B,ref:P,className:F,"data-size":p,id:v,role:b,"aria-labelledby":V,"aria-describedby":A,children:[
+/* @__PURE__ */a("div",{className:[c.dialog__content,E?"":c["dialog__content--no-header"]].filter(Boolean).join(" "),children:[E&&/* @__PURE__ */i("div",{id:V,children:I}),
+/* @__PURE__ */i("div",{id:A,children:L})]}),h&&/* @__PURE__ */i("div",{className:c["dialog__close-button"],children:/* @__PURE__ */i(g,{onPress:r,styleVariant:"white",emphasis:"primary",size:"sm",iconProps:{iconName:"close",iconPrefix:"far",iconSize:"1x"},tooltipLabel:y,"aria-label":y})})]})})]})}function h(a){const{isOpen:e,children:o,portalContainer:l}=a;if(!e)return null;const n=/* @__PURE__ */i(d,{children:/* @__PURE__ */i(z,{...a,children:o})});return l?/* @__PURE__ */i(r,{getContainer:()=>l,children:n}):n}u.displayName="Dialog.Header",p.displayName="Dialog.Content",h.Header=u,h.Content=p,h.displayName="Dialog";export{h as Dialog,h as default};
 //# sourceMappingURL=Dialog.js.map

package/dist/components/Dialog/Dialog.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useDialog } from '@react-aria/dialog';\nimport {\n useOverlay,\n usePreventScroll,\n useModal,\n OverlayContainer,\n UNSAFE_PortalProvider,\n} from '@react-aria/overlays';\nimport { FocusScope } from '@react-aria/focus';\nimport type { AriaDialogProps } from '@react-types/dialog';\nimport IconButton from '../IconButton';\nimport styles from './Dialog.module.css';\n\ntype DialogSize = 'dialogSmall' \| 'dialogMedium' \| 'dialogLarge';\ntype DialogRole = 'alertdialog' \| 'dialog';\n\nexport interface DialogProps extends AriaDialogProps {\n /*\n Whether the dialog is currently visible\n /\n isOpen?: boolean;\n /\n Callback function when dialog is requested to close\n /\n onClose?: () => void;\n /\n Width variant of the dialog - affects max-width\n /\n size?: DialogSize;\n /\n Whether clicking outside or escape key should be blocked\n /\n modal?: boolean;\n /\n Shows/hides the close (X) button in header\n /\n hasDismissButton?: boolean;\n /\n Text for the close button's tooltip and aria-label\n * @default \"Close dialog\"\n /\n dismissButtonLabel?: string;\n /\n ARIA role - use 'alertdialog' for important messages\n /\n role?: DialogRole;\n /\n Required unique ID for the dialog\n /\n id?: string;\n /\n ID of element labeling the dialog (required for a11y)\n /\n 'aria-describedby'?: string;\n /\n ID of element describing the dialog (optional but recommended)\n /\n 'aria-labelledby'?: string;\n /\n Removes the default padding from the dialog container\n * @default false\n /\n removePadding?: boolean;\n /\n Custom z-index for the dialog wrapper\n * @default 99 (from CSS)\n /\n zIndex?: number;\n /\n The container element in which the dialog portal will be placed.\n * The container should have `position: relative` and `overflow: hidden` to properly contain the dialog.\n \n @warning Changing the portal container can impact accessibility, styling, and stacking contexts.\n * Portaling to a custom container may cause issues with screen readers, z-index layering, and CSS properties\n * like overflow and positioning. Use only when you specifically need to constrain the dialog to a container.\n * @default document.body\n */\n portalContainer?: HTMLElement;\n}\n\nexport interface DialogComposition {\n Header: typeof DialogHeader;\n Content: typeof DialogContent;\n}\n\nconst DialogHeader = ({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) => {\n return (\n <div className={styles.dialogHeading} id={id}>\n {children}\n </div>\n );\n};\n\nconst DialogContent = ({ children }: { children: React.ReactNode }) => {\n return <div className={styles.dialogContentInner}>{children}</div>;\n};\n\nDialogHeader.displayName = 'Dialog.Header';\nDialogContent.displayName = 'Dialog.Content';\n\nfunction DialogWrapper(props: DialogProps & { children: React.ReactNode }) {\n const {\n onClose,\n size = 'dialogMedium',\n modal = false,\n hasDismissButton = true,\n dismissButtonLabel = 'Close dialog',\n role = 'dialog',\n id,\n removePadding = false,\n zIndex,\n portalContainer,\n children,\n } = props;\n\n const ref = useRef<HTMLDivElement>(null);\n const { dialogProps } = useDialog(\n {\n ...props,\n role,\n },\n ref,\n );\n\n const { overlayProps, underlayProps } = useOverlay(\n {\n ...props,\n isOpen: true,\n onClose,\n isDismissable: !modal,\n isKeyboardDismissDisabled: modal,\n },\n ref,\n );\n\n // Only prevent scroll on document when not using custom portal container\n // Custom containers should manage overflow themselves\n if (!portalContainer) {\n usePreventScroll();\n }\n const { modalProps } = useModal();\n\n const headerChild = React.Children.toArray(children).find(\n (child) => React.isValidElement(child) && child.type === DialogHeader,\n );\n\n const otherChildren = React.Children.toArray(children).filter(\n (child) => !React.isValidElement(child) \|\| child.type !== DialogHeader,\n );\n\n const hasHeader = Boolean(headerChild);\n\n const headerId = props['aria-labelledby'] \|\| `${id}-header`;\n const contentId = props['aria-describedby'] \|\| `${id}-content`;\n\n const dialogClasses = [\n styles.dialog,\n styles[size],\n ...(removePadding ? [styles.noPadding] : []),\n ].join(' ');\n\n const wrapperStyle: React.CSSProperties =\n zIndex !== undefined ? { zIndex } : {};\n\n const wrapperClasses = [\n styles.dialogWrapper,\n ...(modal ? [styles.modal] : []),\n ...(portalContainer ? [styles.absolute] : []),\n ].join(' ');\n\n const overlayClasses = [\n styles.overlay,\n ...(portalContainer ? [styles.absolute] : []),\n ].join(' ');\n\n return (\n <div className={wrapperClasses} style={wrapperStyle}>\n {modal && (\n <div className={overlayClasses} {...underlayProps} aria-hidden=\"true\" />\n )}\n <FocusScope contain restoreFocus autoFocus={false}>\n <div\n {...overlayProps}\n {...dialogProps}\n {...modalProps}\n ref={ref}\n className={dialogClasses}\n data-size={size}\n id={id}\n role={role}\n aria-labelledby={headerId}\n aria-describedby={contentId}\n >\n <div\n className={`${styles.dialogContent} ${!hasHeader ? styles.noHeader : ''}`}\n >\n {hasHeader && (\n <div className={styles.dialogHeader} id={headerId}>\n {headerChild}\n </div>\n )}\n <div id={contentId}>{otherChildren}</div>\n </div>\n {hasDismissButton && (\n <div className={styles.closeButton}>\n <IconButton\n onPress={onClose}\n styleVariant=\"white\"\n emphasis=\"primary\"\n size=\"sm\"\n iconProps={{\n iconName: 'close',\n iconPrefix: 'far',\n iconSize: '1x',\n }}\n tooltipLabel={dismissButtonLabel}\n aria-label={dismissButtonLabel}\n />\n </div>\n )}\n </div>\n </FocusScope>\n </div>\n );\n}\n\nexport function Dialog(props: React.PropsWithChildren<DialogProps>) {\n const { isOpen, children, portalContainer } = props;\n\n if (!isOpen) {\n return null;\n }\n\n const content = (\n <OverlayContainer>\n <DialogWrapper {...props}>{children}</DialogWrapper>\n </OverlayContainer>\n );\n\n if (portalContainer) {\n return (\n <UNSAFE_PortalProvider getContainer={() => portalContainer}>\n {content}\n </UNSAFE_PortalProvider>\n );\n }\n\n return content;\n}\n\nDialog.Header = DialogHeader;\nDialog.Content = DialogContent;\n\nDialog.displayName = 'Dialog';\n\nexport default Dialog;\n"],"names":["DialogHeader","id","children","className","styles","dialogHeading","DialogContent","dialogContentInner","DialogWrapper","props","onClose","size","modal","hasDismissButton","dismissButtonLabel","role","removePadding","zIndex","portalContainer","ref","useRef","dialogProps","useDialog","overlayProps","underlayProps","useOverlay","isOpen","isDismissable","isKeyboardDismissDisabled","usePreventScroll","modalProps","useModal","headerChild","React","Children","toArray","find","child","isValidElement","type","otherChildren","filter","hasHeader","Boolean","headerId","contentId","dialogClasses","dialog","noPadding","join","wrapperStyle","wrapperClasses","dialogWrapper","absolute","overlayClasses","overlay","style","FocusScope","contain","restoreFocus","autoFocus","jsxs","dialogContent","noHeader","dialogHeader","jsx","closeButton","IconButton","onPress","styleVariant","emphasis","iconProps","iconName","iconPrefix","iconSize","tooltipLabel","Dialog","content","OverlayContainer","UNSAFE_PortalProvider","getContainer","displayName","Header","Content"],"mappings":"20BAsFMA,EAAe,EACnBC,KACAC,+BAMG,MAAA,CAAIC,UAAWC,EAAOC,cAAeJ,KACnCC,aAKDI,EAAgB,EAAGJ,+BACf,MAAA,CAAIC,UAAWC,EAAOG,mBAAqBL,aAMrD,SAASM,EAAcC,GACrB,MAAMC,QACJA,EAAAC,KACAA,EAAO,eAAAC,MACPA,GAAQ,EAAAC,iBACRA,GAAmB,EAAAC,mBACnBA,EAAqB,eAAAC,KACrBA,EAAO,SAAAd,GACPA,EAAAe,cACAA,GAAgB,EAAAC,OAChBA,EAAAC,gBACAA,EAAAhB,SACAA,GACEO,EAEEU,EAAMC,EAAuB,OAC7BC,YAAEA,GAAgBC,EACtB,IACKb,EACHM,QAEFI,IAGII,aAAEA,EAAAC,cAAcA,GAAkBC,EACtC,IACKhB,EACHiB,QAAQ,EACRhB,UACAiB,eAAgBf,EAChBgB,0BAA2BhB,GAE7BO,GAKGD,GACHW,IAEF,MAAMC,WAAEA,GAAeC,IAEjBC,EAAcC,EAAMC,SAASC,QAAQjC,GAAUkC,KAClDC,GAAUJ,EAAMK,eAAeD,IAAUA,EAAME,OAASvC,GAGrDwC,EAAgBP,EAAMC,SAASC,QAAQjC,GAAUuC,OACpDJ,IAAWJ,EAAMK,eAAeD,IAAUA,EAAME,OAASvC,GAGtD0C,EAAYC,QAAQX,GAEpBY,EAAWnC,EAAM,oBAAsB,GAAGR,WAC1C4C,EAAYpC,EAAM,qBAAuB,GAAGR,YAE5C6C,EAAgB,CACpB1C,EAAO2C,OACP3C,EAAOO,MACHK,EAAgB,CAACZ,EAAO4C,WAAa,IACzCC,KAAK,KAEDC,OACO,IAAXjC,EAAuB,CAAEA,UAAW,CAAA,EAEhCkC,EAAiB,CACrB/C,EAAOgD,iBACHxC,EAAQ,CAACR,EAAOQ,OAAS,MACzBM,EAAkB,CAACd,EAAOiD,UAAY,IAC1CJ,KAAK,KAEDK,EAAiB,CACrBlD,EAAOmD,WACHrC,EAAkB,CAACd,EAAOiD,UAAY,IAC1CJ,KAAK;AAEP,SACG,MAAA,CAAI9C,UAAWgD,EAAgBK,MAAON,EACpChD,SAAA,CAAAU,oBACE,MAAA,CAAIT,UAAWmD,KAAoB9B,EAAe,cAAY;iBAEhEiC,EAAA,CAAWC,SAAO,EAACC,cAAY,EAACC,WAAW,EAC1C1D,wBAAA2D,EAAC,MAAA,IACKtC,KACAF,KACAS,EACJX,MACAhB,UAAW2C,EACX,YAAWnC,EACXV,KACAc,OACA,kBAAiB6B,EACjB,mBAAkBC,EAElB3C,SAAA;eAAA2D,EAAC,MAAA,CACC1D,UAAW,GAAGC,EAAO0D,iBAAkBpB,EAA8B,GAAlBtC,EAAO2D,WAEzD7D,SAAA,CAAAwC,oBACE,MAAA,CAAIvC,UAAWC,EAAO4D,aAAc/D,GAAI2C,EACtC1C,SAAA8B;iBAGJ,MAAA,CAAI/B,GAAI4C,EAAY3C,SAAAsC,OAEtB3B,kBACCoD,EAAC,MAAA,CAAI9D,UAAWC,EAAO8D,YACrBhE,wBAAA+D,EAACE,EAAA,CACCC,QAAS1D,EACT2D,aAAa,QACbC,SAAS,UACT3D,KAAK,KACL4D,UAAW,CACTC,SAAU,QACVC,WAAY,MACZC,SAAU,MAEZC,aAAc7D,EACd,aAAYA,aAQ5B,CAEO,SAAS8D,EAAOnE,GACrB,MAAMiB,OAAEA,EAAAxB,SAAQA,EAAAgB,gBAAUA,GAAoBT,EAE9C,IAAKiB,EACH,OAAO,KAGT,MAAMmD,mBACHC,EAAA,CACC5E,wBAAA+D,EAACzD,MAAkBC,EAAQP,eAI/B,OAAIgB,iBAEA+C,EAACc,EAAA,CAAsBC,aAAc,IAAM9D,EACxChB,SAAA2E,IAKAA,CACT,CAvJA7E,EAAaiF,YAAc,gBAC3B3E,EAAc2E,YAAc,iBAwJ5BL,EAAOM,OAASlF,EAChB4E,EAAOO,QAAU7E,EAEjBsE,EAAOK,YAAc"}
1	+ {"version":3,"file":"Dialog.js","sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useDialog } from '@react-aria/dialog';\nimport {\n useOverlay,\n usePreventScroll,\n useModal,\n OverlayContainer,\n UNSAFE_PortalProvider,\n} from '@react-aria/overlays';\nimport { FocusScope } from '@react-aria/focus';\nimport type { AriaDialogProps } from '@react-types/dialog';\nimport IconButton from '../IconButton';\nimport styles from './Dialog.module.css';\n\ntype DialogSize =\n \| 'dialogSmall'\n \| 'dialogMedium'\n \| 'dialogLarge'\n \| 'dialogExtraLarge';\ntype DialogRole = 'alertdialog' \| 'dialog';\n\nconst dialogSizeClassNames: Record<DialogSize, string> = {\n dialogSmall: styles['dialog--size-small'],\n dialogMedium: styles['dialog--size-medium'],\n dialogLarge: styles['dialog--size-large'],\n dialogExtraLarge: styles['dialog--size-xlarge'],\n};\n\nexport interface DialogProps extends AriaDialogProps {\n /*\n Whether the dialog is currently visible\n /\n isOpen?: boolean;\n /\n Callback function when dialog is requested to close\n /\n onClose?: () => void;\n /\n Width variant of the dialog - affects max-width\n /\n size?: DialogSize;\n /\n Whether clicking outside or escape key should be blocked\n /\n modal?: boolean;\n /\n Shows/hides the close (X) button in header\n /\n hasDismissButton?: boolean;\n /\n Text for the close button's tooltip and aria-label\n * @default \"Close dialog\"\n /\n dismissButtonLabel?: string;\n /\n ARIA role - use 'alertdialog' for important messages\n /\n role?: DialogRole;\n /\n Required unique ID for the dialog\n /\n id?: string;\n /\n ID of element labeling the dialog (required for a11y)\n /\n 'aria-describedby'?: string;\n /\n ID of element describing the dialog (optional but recommended)\n /\n 'aria-labelledby'?: string;\n /\n Removes the default padding from the dialog container\n * @default false\n /\n removePadding?: boolean;\n /\n Custom z-index for the dialog wrapper\n * @default 99 (from CSS)\n /\n zIndex?: number;\n /\n The container element in which the dialog portal will be placed.\n * The container should have `position: relative` and `overflow: hidden` to properly contain the dialog.\n \n @warning Changing the portal container can impact accessibility, styling, and stacking contexts.\n * Portaling to a custom container may cause issues with screen readers, z-index layering, and CSS properties\n * like overflow and positioning. Use only when you specifically need to constrain the dialog to a container.\n * @default document.body\n */\n portalContainer?: HTMLElement;\n}\n\nexport interface DialogComposition {\n Header: typeof DialogHeader;\n Content: typeof DialogContent;\n}\n\nconst DialogHeader = ({\n id,\n children,\n}: {\n children: React.ReactNode;\n id?: string;\n}) => {\n return (\n <div className={styles['dialog__heading']} id={id}>\n {children}\n </div>\n );\n};\n\nconst DialogContent = ({ children }: { children: React.ReactNode }) => {\n return <div className={styles['dialog__content-inner']}>{children}</div>;\n};\n\nDialogHeader.displayName = 'Dialog.Header';\nDialogContent.displayName = 'Dialog.Content';\n\nfunction DialogWrapper(props: DialogProps & { children: React.ReactNode }) {\n const {\n onClose,\n size = 'dialogMedium',\n modal = false,\n hasDismissButton = true,\n dismissButtonLabel = 'Close dialog',\n role = 'dialog',\n id,\n removePadding = false,\n zIndex,\n portalContainer,\n children,\n } = props;\n\n const ref = useRef<HTMLDivElement>(null);\n const { dialogProps } = useDialog(\n {\n ...props,\n role,\n },\n ref,\n );\n\n const { overlayProps, underlayProps } = useOverlay(\n {\n ...props,\n isOpen: true,\n onClose,\n isDismissable: !modal,\n isKeyboardDismissDisabled: modal,\n },\n ref,\n );\n\n // Only prevent scroll on document when not using custom portal container\n // Custom containers should manage overflow themselves\n if (!portalContainer) {\n usePreventScroll();\n }\n const { modalProps } = useModal();\n\n const headerChild = React.Children.toArray(children).find(\n (child) => React.isValidElement(child) && child.type === DialogHeader,\n );\n\n const otherChildren = React.Children.toArray(children).filter(\n (child) => !React.isValidElement(child) \|\| child.type !== DialogHeader,\n );\n\n const hasHeader = Boolean(headerChild);\n\n const headerId = props['aria-labelledby'] \|\| `${id}-header`;\n const contentId = props['aria-describedby'] \|\| `${id}-content`;\n\n const dialogClasses = [\n styles.dialog,\n dialogSizeClassNames[size],\n ...(removePadding ? [styles['dialog--no-padding']] : []),\n ].join(' ');\n\n const wrapperStyle: React.CSSProperties =\n zIndex !== undefined ? { zIndex } : {};\n\n const wrapperClasses = [\n styles['dialog__wrapper'],\n ...(portalContainer ? [styles['dialog__wrapper--absolute']] : []),\n ].join(' ');\n\n const overlayClasses = [\n styles['dialog__overlay'],\n ...(portalContainer ? [styles['dialog__overlay--absolute']] : []),\n ].join(' ');\n\n return (\n <div className={wrapperClasses} style={wrapperStyle}>\n {modal && (\n <div className={overlayClasses} {...underlayProps} aria-hidden=\"true\" />\n )}\n <FocusScope contain restoreFocus autoFocus={false}>\n <div\n {...overlayProps}\n {...dialogProps}\n {...modalProps}\n ref={ref}\n className={dialogClasses}\n data-size={size}\n id={id}\n role={role}\n aria-labelledby={headerId}\n aria-describedby={contentId}\n >\n <div\n className={[\n styles['dialog__content'],\n !hasHeader ? styles['dialog__content--no-header'] : '',\n ]\n .filter(Boolean)\n .join(' ')}\n >\n {hasHeader && <div id={headerId}>{headerChild}</div>}\n <div id={contentId}>{otherChildren}</div>\n </div>\n {hasDismissButton && (\n <div className={styles['dialog__close-button']}>\n <IconButton\n onPress={onClose}\n styleVariant=\"white\"\n emphasis=\"primary\"\n size=\"sm\"\n iconProps={{\n iconName: 'close',\n iconPrefix: 'far',\n iconSize: '1x',\n }}\n tooltipLabel={dismissButtonLabel}\n aria-label={dismissButtonLabel}\n />\n </div>\n )}\n </div>\n </FocusScope>\n </div>\n );\n}\n\nexport function Dialog(props: React.PropsWithChildren<DialogProps>) {\n const { isOpen, children, portalContainer } = props;\n\n if (!isOpen) {\n return null;\n }\n\n const content = (\n <OverlayContainer>\n <DialogWrapper {...props}>{children}</DialogWrapper>\n </OverlayContainer>\n );\n\n if (portalContainer) {\n return (\n <UNSAFE_PortalProvider getContainer={() => portalContainer}>\n {content}\n </UNSAFE_PortalProvider>\n );\n }\n\n return content;\n}\n\nDialog.Header = DialogHeader;\nDialog.Content = DialogContent;\n\nDialog.displayName = 'Dialog';\n\nexport default Dialog;\n"],"names":["dialogSizeClassNames","dialogSmall","styles","dialogMedium","dialogLarge","dialogExtraLarge","DialogHeader","id","children","className","DialogContent","DialogWrapper","props","onClose","size","modal","hasDismissButton","dismissButtonLabel","role","removePadding","zIndex","portalContainer","ref","useRef","dialogProps","useDialog","overlayProps","underlayProps","useOverlay","isOpen","isDismissable","isKeyboardDismissDisabled","usePreventScroll","modalProps","useModal","headerChild","React","Children","toArray","find","child","isValidElement","type","otherChildren","filter","hasHeader","Boolean","headerId","contentId","dialogClasses","dialog","join","wrapperStyle","wrapperClasses","overlayClasses","style","FocusScope","contain","restoreFocus","autoFocus","jsxs","jsx","IconButton","onPress","styleVariant","emphasis","iconProps","iconName","iconPrefix","iconSize","tooltipLabel","Dialog","content","OverlayContainer","UNSAFE_PortalProvider","getContainer","displayName","Header","Content"],"mappings":"0oCAqBMA,EAAmD,CACvDC,YAAaC,EAAO,sBACpBC,aAAcD,EAAO,uBACrBE,YAAaF,EAAO,sBACpBG,iBAAkBH,EAAO,wBAwErBI,EAAe,EACnBC,KACAC,+BAMG,MAAA,CAAIC,UAAWP,EAAwB,gBAAGK,KACxCC,aAKDE,EAAgB,EAAGF,+BACf,MAAA,CAAIC,UAAWP,EAAO,yBAA2BM,aAM3D,SAASG,EAAcC,GACrB,MAAMC,QACJA,EAAAC,KACAA,EAAO,eAAAC,MACPA,GAAQ,EAAAC,iBACRA,GAAmB,EAAAC,mBACnBA,EAAqB,eAAAC,KACrBA,EAAO,SAAAX,GACPA,EAAAY,cACAA,GAAgB,EAAAC,OAChBA,EAAAC,gBACAA,EAAAb,SACAA,GACEI,EAEEU,EAAMC,EAAuB,OAC7BC,YAAEA,GAAgBC,EACtB,IACKb,EACHM,QAEFI,IAGII,aAAEA,EAAAC,cAAcA,GAAkBC,EACtC,IACKhB,EACHiB,QAAQ,EACRhB,UACAiB,eAAgBf,EAChBgB,0BAA2BhB,GAE7BO,GAKGD,GACHW,IAEF,MAAMC,WAAEA,GAAeC,IAEjBC,EAAcC,EAAMC,SAASC,QAAQ9B,GAAU+B,KAClDC,GAAUJ,EAAMK,eAAeD,IAAUA,EAAME,OAASpC,GAGrDqC,EAAgBP,EAAMC,SAASC,QAAQ9B,GAAUoC,OACpDJ,IAAWJ,EAAMK,eAAeD,IAAUA,EAAME,OAASpC,GAGtDuC,EAAYC,QAAQX,GAEpBY,EAAWnC,EAAM,oBAAsB,GAAGL,WAC1CyC,EAAYpC,EAAM,qBAAuB,GAAGL,YAE5C0C,EAAgB,CACpB/C,EAAOgD,OACPlD,EAAqBc,MACjBK,EAAgB,CAACjB,EAAO,uBAAyB,IACrDiD,KAAK,KAEDC,OACO,IAAXhC,EAAuB,CAAEA,UAAW,CAAA,EAEhCiC,EAAiB,CACrBnD,EAAwB,mBACpBmB,EAAkB,CAACnB,EAAO,8BAAgC,IAC9DiD,KAAK,KAEDG,EAAiB,CACrBpD,EAAwB,mBACpBmB,EAAkB,CAACnB,EAAO,8BAAgC,IAC9DiD,KAAK;AAEP,SACG,MAAA,CAAI1C,UAAW4C,EAAgBE,MAAOH,EACpC5C,SAAA,CAAAO,oBACE,MAAA,CAAIN,UAAW6C,KAAoB3B,EAAe,cAAY;iBAEhE6B,EAAA,CAAWC,SAAO,EAACC,cAAY,EAACC,WAAW,EAC1CnD,wBAAAoD,EAAC,MAAA,IACKlC,KACAF,KACAS,EACJX,MACAb,UAAWwC,EACX,YAAWnC,EACXP,KACAW,OACA,kBAAiB6B,EACjB,mBAAkBC,EAElBxC,SAAA;eAAAoD,EAAC,MAAA,CACCnD,UAAW,CACTP,EAAwB,gBACvB2C,EAAmD,GAAvC3C,EAAO,+BAEnB0C,OAAOE,SACPK,KAAK,KAEP3C,SAAA,CAAAqC,oBAAc,MAAA,CAAItC,GAAIwC,EAAWvC,SAAA2B;iBACjC,MAAA,CAAI5B,GAAIyC,EAAYxC,SAAAmC,OAEtB3B,oBACE,MAAA,CAAIP,UAAWP,EAAO,wBACrBM,wBAAAqD,EAACC,EAAA,CACCC,QAASlD,EACTmD,aAAa,QACbC,SAAS,UACTnD,KAAK,KACLoD,UAAW,CACTC,SAAU,QACVC,WAAY,MACZC,SAAU,MAEZC,aAAcrD,EACd,aAAYA,aAQ5B,CAEO,SAASsD,EAAO3D,GACrB,MAAMiB,OAAEA,EAAArB,SAAQA,EAAAa,gBAAUA,GAAoBT,EAE9C,IAAKiB,EACH,OAAO,KAGT,MAAM2C,mBACHC,EAAA,CACCjE,wBAAAqD,EAAClD,MAAkBC,EAAQJ,eAI/B,OAAIa,iBAEAwC,EAACa,EAAA,CAAsBC,aAAc,IAAMtD,EACxCb,SAAAgE,IAKAA,CACT,CAvJAlE,EAAasE,YAAc,gBAC3BlE,EAAckE,YAAc,iBAwJ5BL,EAAOM,OAASvE,EAChBiE,EAAOO,QAAUpE,EAEjB6D,EAAOK,YAAc"}

package/dist/components/Popover/Popover.d.ts CHANGED Viewed

@@ -9,16 +9,6 @@ export interface InternalPopoverProps {
      * This prop should only be used by internal components like Menu
      */
     placement?: PlacementType;
-    /**
-     * @private Internal use only - whether the popover should flip to fit in the viewport
-     * This prop should only be used by internal components like Menu
-     */
-    shouldFlip?: boolean;
-    /**
-     * @private Internal use only - whether to allow elements outside the popover may be interacted with
-     * This prop should only be used by internal components like Menu
-     */
-    isNonModal?: boolean;
     /**
      * @private Internal use only - whether to allow tabbing out of the popover
      * This prop should only be used by internal components like Menu
@@ -43,6 +33,10 @@ export interface PopoverProps {
     };
     /** Whether to show the directional arrow on the popover */
     hasArrow?: boolean;
+    /** Flips the popover to the opposite side when there is insufficient space. */
+    shouldFlip?: boolean;
+    /** Whether elements outside the popover can be interacted with. */
+    isNonModal?: boolean;
 }
 export type CombinedPopoverProps = PopoverProps & InternalPopoverProps;
 export declare const Popover: ({ children, state, arrowDirection, triggerRef, hasArrow, placement, shouldFlip, isNonModal, allowTabOut, autoFocus, }: CombinedPopoverProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Popover/Popover.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import o,{useRef as r,useEffect as s}from"react";import{usePopover as i,Overlay as n,DismissButton as a}from"@react-aria/overlays";import{FocusScope as p}from"@react-aria/focus";import{useBreakpoint as l}from"../../utils/breakpoint/hooks/useBreakpoint.js";import{resolveResponsiveProp as c}from"../../utils/breakpoint/responsive.js";import '../../assets/Popover.css';const m="_popover_1ntxl_1",u="_arrow_1ntxl_11",f={top:"top","top-left":"top start","top-right":"top end",right:"right",bottom:"bottom",left:"left"},d=t=>t?.split(" ")[0],h=({children:h,state:b,arrowDirection:v="bottom",triggerRef:w,hasArrow:g=!0,placement:_,shouldFlip:j=!0,isNonModal:F=!1,allowTabOut:k=!1,autoFocus:x=!0})=>{const y=r(null),M=l(),N=o.useMemo(()=>c(v,M)??"bottom",[v,M]),E=_||f[N],[O,R]=o.useState(E);s(()=>{const t=()=>{y.current&&w.current&&R(E)};return t(),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[E,w]);const{popoverProps:z,arrowProps:D,placement:L}=i({popoverRef:y,triggerRef:w,offset:12,placement:O,shouldFlip:j,isNonModal:F},b),P=d(L)===d(O)?O:L||O,A="top start"===P||"top end"===P?P:d(P)||P,B=o.useMemo(()=>{const t=D.style;if(t){if("top start"===A||"top end"===A){return Object.fromEntries(Object.entries(t).filter(([t])=>"left"!==t&&"right"!==t&&"top"!==t&&"bottom"!==t))}return t}},[D.style,A]);/* @__PURE__ */
-return t(n,{children:/* @__PURE__ */t(p,{restoreFocus:!0,contain:!k,autoFocus:x,children:/* @__PURE__ */e("div",{...z,ref:y,className:m,children:[
-/* @__PURE__ */t(a,{onDismiss:b.close}),h,g&&/* @__PURE__ */t("div",{...D,className:u,style:B,"data-placement":A})]})})})};export{h as Popover,h as default};
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import r,{useRef as e}from"react";import{usePopover as s,Overlay as i,DismissButton as a}from"@react-aria/overlays";import{FocusScope as p}from"@react-aria/focus";import{useBreakpoint as l}from"../../utils/breakpoint/hooks/useBreakpoint.js";import{resolveResponsiveProp as n}from"../../utils/breakpoint/responsive.js";import '../../assets/Popover.css';const m="_popover_1ntxl_1",c="_arrow_1ntxl_11",f={top:"top","top-left":"top start","top-right":"top end",right:"right",bottom:"bottom",left:"left"},u=t=>t?.split(" ")[0],d=({children:d,state:h,arrowDirection:b="bottom",triggerRef:g,hasArrow:v=!0,placement:_,shouldFlip:j=!0,isNonModal:w=!1,allowTabOut:F=!1,autoFocus:k=!0})=>{const x=e(null),y=l(),M=r.useMemo(()=>n(b,y)??"bottom",[b,y]),N=_||f[M],{popoverProps:O,arrowProps:R,placement:D}=s({popoverRef:x,triggerRef:g,offset:12,placement:N,shouldFlip:j,isNonModal:w},h),P=u(D)===u(N)?N:D||N,A="top start"===P||"top end"===P?P:u(P)||P,B=r.useMemo(()=>{const t=R.style;if(t){if("top start"===A||"top end"===A){return Object.fromEntries(Object.entries(t).filter(([t])=>"left"!==t&&"right"!==t&&"top"!==t&&"bottom"!==t))}return t}},[R.style,A]);/* @__PURE__ */
+return t(i,{children:/* @__PURE__ */t(p,{restoreFocus:!0,contain:!F,autoFocus:k,children:/* @__PURE__ */o("div",{...O,ref:x,className:m,children:[
+/* @__PURE__ */t(a,{onDismiss:h.close}),d,v&&/* @__PURE__ */t("div",{...R,className:c,style:B,"data-placement":A})]})})})};export{d as Popover,d as default};
 //# sourceMappingURL=Popover.js.map

package/dist/components/Popover/Popover.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useRef, ~~useEffect~~ } from 'react';\nimport { usePopover, DismissButton, Overlay } from '@react-aria/overlays';\nimport { FocusScope } from '@react-aria/focus';\nimport type { OverlayTriggerState } from 'react-stately';\nimport { useBreakpoint } from '../../utils/breakpoint/hooks/useBreakpoint';\nimport { resolveResponsiveProp } from '../../utils/breakpoint/responsive';\nimport type { ResponsiveValue } from '../../utils/breakpoint/responsiveSSR';\nimport styles from './Popover.module.css';\n\n// Define all possible placement options for internal use (menu component)\ntype PlacementType =\n \| 'top'\n \| 'top start'\n \| 'top end'\n \| 'right'\n \| 'right top'\n \| 'right bottom'\n \| 'bottom'\n \| 'bottom start'\n \| 'bottom end'\n \| 'left'\n \| 'left top'\n \| 'left bottom';\n\n// Define the arrow direction options for the public use\ntype ArrowDirectionType =\n \| 'top'\n \| 'top-left'\n \| 'top-right'\n \| 'right'\n \| 'bottom'\n \| 'left';\n\n// Mapping arrow direction to placement\nconst arrowDirectionToPlacement: Record<ArrowDirectionType, PlacementType> = {\n top: 'top',\n 'top-left': 'top start',\n 'top-right': 'top end',\n right: 'right',\n bottom: 'bottom',\n left: 'left',\n};\n\nconst getPlacementSide = (value?: string \| null) => value?.split(' ')[0];\n\n// Internal props that should only be used by specific components like Menu\nexport interface InternalPopoverProps {\n /*\n @private Internal use only - placement of the popover\n * This prop should only be used by internal components like Menu\n /\n placement?: PlacementType;\n\n /\n @private Internal use only - whether ~~the popover should flip~~ to ~~fit in the viewport\n * This prop should only be used by internal components like Menu\n /\n shouldFlip?: boolean;\n\n /\n @private Internal use only - whether to~~ allow elements outside the popover may be interacted with\n * This prop should only be used by internal components like Menu\n /\n isNonModal?: boolean;\n\n /\n @private Internal use only - whether to allow tabbing out of the popover\n * This prop should only be used by internal components like Menu\n /\n allowTabOut?: boolean;\n\n /\n @private Internal use only - whether to auto-focus elements within the popover\n * This prop should only be used by internal components like Menu\n /\n autoFocus?: boolean;\n}\n\n// Public props exposed to all component users\nexport interface PopoverProps {\n /* Content to be rendered inside the popover /\n children: React.ReactNode;\n\n /* State object controlling the overlay's open/closed status /\n state: OverlayTriggerState;\n\n /* [Responsive] Direction of the arrow that points to the trigger element /\n arrowDirection?: ResponsiveValue<ArrowDirectionType>;\n\n /* Reference to the trigger element that opens the popover /\n triggerRef:\n \| React.RefObject<HTMLButtonElement \| null>\n \| { current: HTMLElement \| null };\n\n /* Whether to show the directional arrow on the popover */\n hasArrow?: boolean;\n}\n\n// Combined props type for internal use\nexport type CombinedPopoverProps = PopoverProps & InternalPopoverProps;\n\nexport const Popover = ({\n children,\n state,\n arrowDirection = 'bottom',\n triggerRef,\n hasArrow = true,\n placement,\n shouldFlip = true,\n isNonModal = false,\n allowTabOut = false,\n autoFocus = true,\n}: CombinedPopoverProps) => {\n const popoverRef = useRef<HTMLDivElement>(null);\n const currentBreakpoint = useBreakpoint();\n\n const resolvedArrowDirection = React.useMemo(\n () => resolveResponsiveProp(arrowDirection, currentBreakpoint) ?? 'bottom',\n [arrowDirection, currentBreakpoint],\n );\n\n // Determine the placement - either from direct placement (internal) or mapped from arrowDirection\n const initialPlacement =\n placement \|\| arrowDirectionToPlacement[resolvedArrowDirection];\n ~~const [optimalPlacement, setOptimalPlacement] =\n React.useState<PlacementType>(initialPlacement);\n~~\n ~~useEffect(() => {\n~~ const ~~updatePlacement = () =>~~ {\n if (!popoverRef.current \|\| !triggerRef.current) return;\n\n // When viewport constraints are encountered, the placement can change\n // React Aria's shouldFlip handles most of this logic now\n setOptimalPlacement(initialPlacement);\n };\n\n updatePlacement();\n window.addEventListener('resize', updatePlacement);\n return () => window.removeEventListener('resize', updatePlacement);\n }, [initialPlacement, triggerRef]);\n\n const {\n popoverProps,\n arrowProps,\n placement: finalPlacement,\n } = usePopover(\n {\n popoverRef,\n triggerRef,\n offset: 12,\n placement: ~~optimalPlacement~~,\n shouldFlip,\n isNonModal,\n },\n state,\n );\n\n const arrowPlacement =\n getPlacementSide(finalPlacement) === getPlacementSide(~~optimalPlacement~~)\n ? ~~optimalPlacement~~\n : finalPlacement \|\| ~~optimalPlacement~~;\n\n const normalizedArrowPlacement =\n arrowPlacement === 'top start' \|\| arrowPlacement === 'top end'\n ? arrowPlacement\n : getPlacementSide(arrowPlacement) \|\| arrowPlacement;\n\n const resolvedArrowStyle = React.useMemo(() => {\n const inlineArrowStyle = arrowProps.style;\n\n if (!inlineArrowStyle) {\n return undefined;\n }\n\n // Keep react-aria computed styles generally, but preserve CSS-driven\n // arrow offsets for top start/end variants.\n if (\n normalizedArrowPlacement === 'top start' \|\|\n normalizedArrowPlacement === 'top end'\n ) {\n const nonPositionalStyles = Object.fromEntries(\n Object.entries(inlineArrowStyle).filter(\n ([key]) =>\n key !== 'left' &&\n key !== 'right' &&\n key !== 'top' &&\n key !== 'bottom',\n ),\n );\n\n return nonPositionalStyles;\n }\n\n return inlineArrowStyle;\n }, [arrowProps.style, normalizedArrowPlacement]);\n\n return (\n <Overlay>\n <FocusScope restoreFocus contain={!allowTabOut} autoFocus={autoFocus}>\n <div {...popoverProps} ref={popoverRef} className={styles.popover}>\n <DismissButton onDismiss={state.close} />\n {children}\n {hasArrow && (\n <div\n {...arrowProps}\n className={styles.arrow}\n style={resolvedArrowStyle}\n data-placement={normalizedArrowPlacement}\n />\n )}\n </div>\n </FocusScope>\n </Overlay>\n );\n};\n\nexport default Popover;\n"],"names":["arrowDirectionToPlacement","top","right","bottom","left","getPlacementSide","value","split","Popover","children","state","arrowDirection","triggerRef","hasArrow","placement","shouldFlip","isNonModal","allowTabOut","autoFocus","popoverRef","useRef","currentBreakpoint","useBreakpoint","resolvedArrowDirection","React","useMemo","resolveResponsiveProp","initialPlacement","~~optimalPlacement","setOptimalPlacement","useState","useEffect","updatePlacement","current","window","addEventListener","removeEventListener","~~popoverProps","arrowProps","finalPlacement","usePopover","offset","arrowPlacement","normalizedArrowPlacement","resolvedArrowStyle","inlineArrowStyle","style","Object","fromEntries","entries","filter","key","Overlay","jsx","FocusScope","restoreFocus","contain","jsxs","ref","className","styles","DismissButton","onDismiss","close"],"mappings":"~~8aAkCMA~~,EAAuE,CAC3EC,IAAK,MACL,WAAY,YACZ,YAAa,UACbC,MAAO,QACPC,OAAQ,SACRC,KAAM,QAGFC,EAAoBC,GAA0BA,GAAOC,MAAM,KAAK,~~GA0DzDC~~,EAAU,EACrBC,WACAC,QACAC,iBAAiB,SACjBC,aACAC,YAAW,EACXC,YACAC,cAAa,EACbC,cAAa,EACbC,eAAc,EACdC,aAAY,MAEZ,MAAMC,EAAaC,EAAuB,MACpCC,EAAoBC,IAEpBC,EAAyBC,EAAMC,QACnC,IAAMC,EAAsBf,EAAgBU,IAAsB,SAClE,CAACV,EAAgBU,IAIbM,EACJb,GAAad,EAA0BuB,~~IAClCK~~,~~EAAkBC,GACvBL,EAAMM,SAAwBH,GAEhCI,EAAU,KACR,MAAMC,EAAkB,KACjBb,EAAWc,SAAYrB,EAAWqB,SAIvCJ,EAAoBF,IAKtB,OAFAK,IACAE,OAAOC,iBAAiB,SAAUH,GAC3B,IAAME,OAAOE,oBAAoB,SAAUJ,IACjD,CAACL,EAAkBf,IAEtB,MAAMyB,~~aACJA,EAAAC,WACAA,~~EACAxB~~,~~UAAWyB~~,GACTC,EACF,~~CACErB~~,aACAP,~~aACA6B~~,OAAQ,~~GACR3B~~,~~UAAWc~~,~~EACXb~~,aACAC,cAEFN,~~GAGIgC~~,~~EACJrC~~,~~EAAiBkC~~,~~KAAoBlC~~,~~EAAiBuB~~,GAClDA,~~EACAW~~,~~GAAkBX~~,~~EAElBe~~,EACe,cAAnBD,GAAqD,YAAnBA,EAC9BA,~~EACArC~~,~~EAAiBqC~~,IAAmBA,EAEpCE,~~EAAqBpB~~,EAAMC,QAAQ,KACvC,~~MAAMoB~~,EAAmBP,EAAWQ,MAEpC,GAAKD,EAAL,CAMA,GAC+B,cAA7BF,GAC6B,YAA7BA,EACA,CAWA,OAV4BI,OAAOC,YACjCD,OAAOE,QAAQJ,GAAkBK,OAC/B,EAAEC,KACQ,SAARA,GACQ,UAARA,GACQ,QAARA,GACQ,WAARA,GAKR,CAEA,OAAON,CArBP,GAsBC,CAACP,EAAWQ,MAAOH;AAEtB,SACGS,EAAA,~~CACC3C~~,~~wBAAA4C~~,EAACC,GAAWC,cAAY,EAACC,~~SAAUvC~~,EAAaC,YAC9CT,~~wBAAAgD~~,EAAC,UAAQpB,EAAcqB,~~IAAKvC~~,~~EAAYwC~~,UAAWC,~~EACjDnD~~,SAAA;~~iBAACoD~~,EAAA,CAAcC,~~UAAWpD~~,~~EAAMqD~~,QAC/~~BtD~~,EACAI,~~kBACCwC~~,EAAC,MAAA,IACKf,EACJqB,UAAWC,EACXd,MAAOF,EACP,iBAAgBD"}
1	+ {"version":3,"file":"Popover.js","sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { usePopover, DismissButton, Overlay } from '@react-aria/overlays';\nimport { FocusScope } from '@react-aria/focus';\nimport type { OverlayTriggerState } from 'react-stately';\nimport { useBreakpoint } from '../../utils/breakpoint/hooks/useBreakpoint';\nimport { resolveResponsiveProp } from '../../utils/breakpoint/responsive';\nimport type { ResponsiveValue } from '../../utils/breakpoint/responsiveSSR';\nimport styles from './Popover.module.css';\n\n// Define all possible placement options for internal use (menu component)\ntype PlacementType =\n \| 'top'\n \| 'top start'\n \| 'top end'\n \| 'right'\n \| 'right top'\n \| 'right bottom'\n \| 'bottom'\n \| 'bottom start'\n \| 'bottom end'\n \| 'left'\n \| 'left top'\n \| 'left bottom';\n\n// Define the arrow direction options for the public use\ntype ArrowDirectionType =\n \| 'top'\n \| 'top-left'\n \| 'top-right'\n \| 'right'\n \| 'bottom'\n \| 'left';\n\n// Mapping arrow direction to placement\nconst arrowDirectionToPlacement: Record<ArrowDirectionType, PlacementType> = {\n top: 'top',\n 'top-left': 'top start',\n 'top-right': 'top end',\n right: 'right',\n bottom: 'bottom',\n left: 'left',\n};\n\nconst getPlacementSide = (value?: string \| null) => value?.split(' ')[0];\n\n// Internal props that should only be used by specific components like Menu\nexport interface InternalPopoverProps {\n /*\n @private Internal use only - placement of the popover\n * This prop should only be used by internal components like Menu\n /\n placement?: PlacementType;\n\n /\n @private Internal use only - whether to allow tabbing out of the popover\n * This prop should only be used by internal components like Menu\n /\n allowTabOut?: boolean;\n\n /\n @private Internal use only - whether to auto-focus elements within the popover\n * This prop should only be used by internal components like Menu\n /\n autoFocus?: boolean;\n}\n\n// Public props exposed to all component users\nexport interface PopoverProps {\n /* Content to be rendered inside the popover /\n children: React.ReactNode;\n\n /* State object controlling the overlay's open/closed status /\n state: OverlayTriggerState;\n\n /* [Responsive] Direction of the arrow that points to the trigger element /\n arrowDirection?: ResponsiveValue<ArrowDirectionType>;\n\n /* Reference to the trigger element that opens the popover /\n triggerRef:\n \| React.RefObject<HTMLButtonElement \| null>\n \| { current: HTMLElement \| null };\n\n /* Whether to show the directional arrow on the popover /\n hasArrow?: boolean;\n\n /* Flips the popover to the opposite side when there is insufficient space. /\n shouldFlip?: boolean;\n\n /* Whether elements outside the popover can be interacted with. */\n isNonModal?: boolean;\n}\n\n// Combined props type for internal use\nexport type CombinedPopoverProps = PopoverProps & InternalPopoverProps;\n\nexport const Popover = ({\n children,\n state,\n arrowDirection = 'bottom',\n triggerRef,\n hasArrow = true,\n placement,\n shouldFlip = true,\n isNonModal = false,\n allowTabOut = false,\n autoFocus = true,\n}: CombinedPopoverProps) => {\n const popoverRef = useRef<HTMLDivElement>(null);\n const currentBreakpoint = useBreakpoint();\n\n const resolvedArrowDirection = React.useMemo(\n () => resolveResponsiveProp(arrowDirection, currentBreakpoint) ?? 'bottom',\n [arrowDirection, currentBreakpoint],\n );\n\n // Determine the placement - either from direct placement (internal) or mapped from arrowDirection\n const initialPlacement =\n placement \|\| arrowDirectionToPlacement[resolvedArrowDirection];\n\n const {\n popoverProps,\n arrowProps,\n placement: finalPlacement,\n } = usePopover(\n {\n popoverRef,\n triggerRef,\n offset: 12,\n placement: initialPlacement,\n shouldFlip,\n isNonModal,\n },\n state,\n );\n\n const arrowPlacement =\n getPlacementSide(finalPlacement) === getPlacementSide(initialPlacement)\n ? initialPlacement\n : finalPlacement \|\| initialPlacement;\n\n const normalizedArrowPlacement =\n arrowPlacement === 'top start' \|\| arrowPlacement === 'top end'\n ? arrowPlacement\n : getPlacementSide(arrowPlacement) \|\| arrowPlacement;\n\n const resolvedArrowStyle = React.useMemo(() => {\n const inlineArrowStyle = arrowProps.style;\n\n if (!inlineArrowStyle) {\n return undefined;\n }\n\n // Keep react-aria computed styles generally, but preserve CSS-driven\n // arrow offsets for top start/end variants.\n if (\n normalizedArrowPlacement === 'top start' \|\|\n normalizedArrowPlacement === 'top end'\n ) {\n const nonPositionalStyles = Object.fromEntries(\n Object.entries(inlineArrowStyle).filter(\n ([key]) =>\n key !== 'left' &&\n key !== 'right' &&\n key !== 'top' &&\n key !== 'bottom',\n ),\n );\n\n return nonPositionalStyles;\n }\n\n return inlineArrowStyle;\n }, [arrowProps.style, normalizedArrowPlacement]);\n\n return (\n <Overlay>\n <FocusScope restoreFocus contain={!allowTabOut} autoFocus={autoFocus}>\n <div {...popoverProps} ref={popoverRef} className={styles.popover}>\n <DismissButton onDismiss={state.close} />\n {children}\n {hasArrow && (\n <div\n {...arrowProps}\n className={styles.arrow}\n style={resolvedArrowStyle}\n data-placement={normalizedArrowPlacement}\n />\n )}\n </div>\n </FocusScope>\n </Overlay>\n );\n};\n\nexport default Popover;\n"],"names":["arrowDirectionToPlacement","top","right","bottom","left","getPlacementSide","value","split","Popover","children","state","arrowDirection","triggerRef","hasArrow","placement","shouldFlip","isNonModal","allowTabOut","autoFocus","popoverRef","useRef","currentBreakpoint","useBreakpoint","resolvedArrowDirection","React","useMemo","resolveResponsiveProp","initialPlacement","popoverProps","arrowProps","finalPlacement","usePopover","offset","arrowPlacement","normalizedArrowPlacement","resolvedArrowStyle","inlineArrowStyle","style","Object","fromEntries","entries","filter","key","Overlay","jsx","FocusScope","restoreFocus","contain","jsxs","ref","className","styles","DismissButton","onDismiss","close"],"mappings":"+ZAkCMA,EAAuE,CAC3EC,IAAK,MACL,WAAY,YACZ,YAAa,UACbC,MAAO,QACPC,OAAQ,SACRC,KAAM,QAGFC,EAAoBC,GAA0BA,GAAOC,MAAM,KAAK,GAoDzDC,EAAU,EACrBC,WACAC,QACAC,iBAAiB,SACjBC,aACAC,YAAW,EACXC,YACAC,cAAa,EACbC,cAAa,EACbC,eAAc,EACdC,aAAY,MAEZ,MAAMC,EAAaC,EAAuB,MACpCC,EAAoBC,IAEpBC,EAAyBC,EAAMC,QACnC,IAAMC,EAAsBf,EAAgBU,IAAsB,SAClE,CAACV,EAAgBU,IAIbM,EACJb,GAAad,EAA0BuB,IAEnCK,aACJA,EAAAC,WACAA,EACAf,UAAWgB,GACTC,EACF,CACEZ,aACAP,aACAoB,OAAQ,GACRlB,UAAWa,EACXZ,aACAC,cAEFN,GAGIuB,EACJ5B,EAAiByB,KAAoBzB,EAAiBsB,GAClDA,EACAG,GAAkBH,EAElBO,EACe,cAAnBD,GAAqD,YAAnBA,EAC9BA,EACA5B,EAAiB4B,IAAmBA,EAEpCE,EAAqBX,EAAMC,QAAQ,KACvC,MAAMW,EAAmBP,EAAWQ,MAEpC,GAAKD,EAAL,CAMA,GAC+B,cAA7BF,GAC6B,YAA7BA,EACA,CAWA,OAV4BI,OAAOC,YACjCD,OAAOE,QAAQJ,GAAkBK,OAC/B,EAAEC,KACQ,SAARA,GACQ,UAARA,GACQ,QAARA,GACQ,WAARA,GAKR,CAEA,OAAON,CArBP,GAsBC,CAACP,EAAWQ,MAAOH;AAEtB,SACGS,EAAA,CACClC,wBAAAmC,EAACC,GAAWC,cAAY,EAACC,SAAU9B,EAAaC,YAC9CT,wBAAAuC,EAAC,UAAQpB,EAAcqB,IAAK9B,EAAY+B,UAAWC,EACjD1C,SAAA;iBAAC2C,EAAA,CAAcC,UAAW3C,EAAM4C,QAC/B7C,EACAI,kBACC+B,EAAC,MAAA,IACKf,EACJqB,UAAWC,EACXd,MAAOF,EACP,iBAAgBD"}

package/dist/components/ProductTile/ProductTile.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import { default as React } from 'react';
 import { BoxLinkProps } from '../BoxLink';
 import { BoxProps } from '../Box';
+export type ProductTileHeadingLevel = 'h3' | 'h4' | 'h5' | 'h6';
 export interface ProductTileProps {
     /**
      * Destination URL for the tile.
@@ -19,6 +20,11 @@ export interface ProductTileProps {
      * Main title content.
      */
     title: string;
+    /**
+     * Semantic heading level for the title.
+     * @default 'h3'
+     */
+    headingLevel?: ProductTileHeadingLevel;
     /**
      * The width of the Box.
      * Accepts any valid CSS unit or "full"
@@ -44,8 +50,10 @@ export interface ProductTileDetailsProps {
     /** Content rendered inside the ProductTile details area. */
     children: React.ReactNode;
 }
-interface ProductTileComponent extends React.ForwardRefExoticComponent<ProductTileProps & React.RefAttributes<HTMLAnchorElement>> {
-    Details: React.FC<ProductTileDetailsProps>;
-}
-export declare const ProductTile: ProductTileComponent;
+export declare const ProductTile: React.ForwardRefExoticComponent<ProductTileProps & React.RefAttributes<HTMLAnchorElement>> & {
+    Details: {
+        ({ children }: ProductTileDetailsProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
 export default ProductTile;

package/dist/components/ProductTile/ProductTile.js CHANGED Viewed

@@ -1,7 +1,7 @@
-import{jsx as t,jsxs as e}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Box as o}from"../Box/Box.js";import{BoxLink as r}from"../BoxLink/BoxLink.js";import"../BoxLink/BoxLinkContext.js";import{Paragraph as c}from"../Paragraph/Paragraph.js";import{Icon as n}from"../Icon/Icon.js";import '../../assets/ProductTile.css';const d={"product-tile":"_product-tile_zcaft_1","product-tile__media":"_product-tile__media_zcaft_6","product-tile__content":"_product-tile__content_zcaft_12","product-tile__content-details":"_product-tile__content-details_zcaft_19","product-tile__content-icon":"_product-tile__content-icon_zcaft_26","product-tile__content-title":"_product-tile__content-title_zcaft_38"},a=({children:e})=>/* @__PURE__ */t("div",{className:d["product-tile__content-details"],children:e}),l=i(function({href:i,target:a,media:l,title:_,width:s="390px",maxWidth:p="390px",description:m,children:u},h){/* @__PURE__ */
-return t(r,{href:i,target:a,styleVariant:"default",ref:h,children:/* @__PURE__ */t("div",{className:d["product-tile"],children:/* @__PURE__ */e(o,{paddingTop:"xs",paddingBottom:"xs",paddingLeft:"xs",paddingRight:"sm",backgroundColor:"layer2",borderRadius:"sm",display:"flex",flexDirection:"row",gap:"xs",width:s,maxWidth:p,alignItems:"center",justifyContent:"spaceBetween",children:[
-/* @__PURE__ */t("div",{className:d["product-tile__media"],children:l}),
+import{jsx as t,jsxs as e}from"react/jsx-runtime";import{forwardRef as i}from"react";import{Box as o}from"../Box/Box.js";import{BoxLink as r}from"../BoxLink/BoxLink.js";import"../BoxLink/BoxLinkContext.js";import{Paragraph as c}from"../Paragraph/Paragraph.js";import{Icon as n}from"../Icon/Icon.js";import '../../assets/ProductTile.css';const d={"product-tile":"_product-tile_jwr0o_1","product-tile__media":"_product-tile__media_jwr0o_6","product-tile__content":"_product-tile__content_jwr0o_12","product-tile__content-title":"_product-tile__content-title_jwr0o_19","product-tile__content-details":"_product-tile__content-details_jwr0o_31","product-tile__content-icon":"_product-tile__content-icon_jwr0o_38"},l=({children:e})=>/* @__PURE__ */t("div",{className:d["product-tile__content-details"],children:e}),a=i(function({href:i,target:l,media:a,title:s,headingLevel:_="h3",width:p="390px",maxWidth:m="390px",description:u,children:h},x){const g=_;/* @__PURE__ */
+return t(r,{href:i,target:l,styleVariant:"default",ref:x,children:/* @__PURE__ */t("div",{className:d["product-tile"],children:/* @__PURE__ */e(o,{paddingTop:"xs",paddingBottom:"xs",paddingLeft:"xs",paddingRight:"sm",backgroundColor:"layer2",borderRadius:"sm",display:"flex",flexDirection:"row",gap:"xs",width:p,maxWidth:m,alignItems:"center",justifyContent:"spaceBetween",children:[
+/* @__PURE__ */t("div",{className:d["product-tile__media"],children:a}),
 /* @__PURE__ */e("div",{className:d["product-tile__content"],children:[
-/* @__PURE__ */t("div",{className:d["product-tile__content-title"],children:/* @__PURE__ */t(c,{foregroundColor:"accentSecondary",size:"md",children:/* @__PURE__ */t("strong",{children:_})})}),m&&/* @__PURE__ */t("div",{className:d["product-tile__content-description"],children:/* @__PURE__ */t(c,{foregroundColor:"secondary",size:"sm",children:m})}),u]}),
-/* @__PURE__ */t("div",{className:d["product-tile__content-icon"],children:/* @__PURE__ */t(n,{iconName:"circle-arrow-right",iconSize:"1.5x",padding:"none",color:"accentSecondary",pull:"right"})})]})})})});l.Details=a,a.displayName="ProductTile.Details";export{l as ProductTile,l as default};
+/* @__PURE__ */t(g,{className:d["product-tile__content-title"],children:s}),u&&/* @__PURE__ */t("div",{className:d["product-tile__content-description"],children:/* @__PURE__ */t(c,{foregroundColor:"secondary",size:"sm",children:u})}),h]}),
+/* @__PURE__ */t("div",{className:d["product-tile__content-icon"],children:/* @__PURE__ */t(n,{iconName:"circle-arrow-right",iconSize:"1.5x",padding:"none",color:"accentSecondary",pull:"right"})})]})})})});a.displayName="ProductTile",l.displayName="ProductTile.Details";const s=Object.assign(a,{Details:l});export{s as ProductTile,s as default};
 //# sourceMappingURL=ProductTile.js.map

package/dist/components/ProductTile/ProductTile.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProductTile.js","sources":["../../../src/components/ProductTile/ProductTile.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styles from './ProductTile.module.css';\nimport Box from '../Box';\nimport BoxLink from '../BoxLink';\nimport type { BoxLinkProps } from '../BoxLink';\nimport type { BoxProps } from '../Box';\nimport Paragraph from '../Paragraph';\nimport Icon from '../Icon';\n\nexport interface ProductTileProps {\n /*\n Destination URL for the tile.\n /\n href: NonNullable<BoxLinkProps['href']>;\n /\n The target attribute for the link.\n * @default '_self'\n /\n target?: BoxLinkProps['target'];\n /\n Leading media content.\n /\n media: React.ReactNode;\n /\n Main title content.\n /\n title: string;\n /\n The width of the Box.\n * Accepts any valid CSS unit or \"full\"\n * @default '390px'\n /\n width?: BoxProps['width'];\n /\n [Responsive] The maximum width of the Box.\n * Accepts any valid CSS unit or \"pageWidth\" to use the `section-container-max-width` token.\n * @default '390px'\n /\n maxWidth?: BoxProps['maxWidth'];\n /\n Optional supporting text.\n /\n description?: string;\n /\n Optional details subcomponent content, such as `ProductTile.Details`.\n /\n children?: React.ReactNode;\n}\n\nexport interface ProductTileDetailsProps {\n /* Content rendered inside the ProductTile details area. */\n children: React.ReactNode;\n}\n\~~ninterface ProductTileComponent\n extends React.ForwardRefExoticComponent<\n ProductTileProps & React.RefAttributes<HTMLAnchorElement>\n > {\n Details: React.FC<ProductTileDetailsProps>;\n}\n\~~nconst Details = ({ children }: ProductTileDetailsProps) => (\n <div className={styles['product-tile__content-details']}>{children}</div>\n);\n\~~nexport~~ ~~const~~ ~~ProductTile~~ = forwardRef<HTMLAnchorElement, ProductTileProps>(\n function ProductTile(\n {\n href,\n target,\n media,\n title,\n width = '390px',\n maxWidth = '390px',\n description,\n children,\n },\n ref,\n ) {\n return (\n <BoxLink href={href} target={target} styleVariant=\"default\" ref={ref}>\n <div className={styles['product-tile']}>\n <Box\n paddingTop=\"xs\"\n paddingBottom=\"xs\"\n paddingLeft=\"xs\"\n paddingRight=\"sm\"\n backgroundColor=\"layer2\"\n borderRadius=\"sm\"\n display=\"flex\"\n flexDirection=\"row\"\n gap=\"xs\"\n width={width}\n maxWidth={maxWidth}\n alignItems=\"center\"\n justifyContent=\"spaceBetween\"\n >\n <div className={styles['product-tile__media']}>{media}</div>\n <div className={styles['product-tile__content']}>\n <~~div~~ className={styles['product-tile__content-title']}>\n ~~<Paragraph foregroundColor=\"accentSecondary\" size=\"md\">\n <strong>~~{title}~~</strong>\~~n ~~</Paragraph>\n~~ </~~div~~>\n {description && (\n <div className={styles['product-tile__content-description']}>\n <Paragraph foregroundColor=\"secondary\" size=\"sm\">\n {description}\n </Paragraph>\n </div>\n )}\n {children}\n </div>\n <div className={styles['product-tile__content-icon']}>\n <Icon\n iconName=\"circle-arrow-right\"\n iconSize=\"1.5x\"\n padding=\"none\"\n color=\"accentSecondary\"\n pull=\"right\"\n />\n </div>\n </Box>\n </div>\n </BoxLink>\n );\n },\n) ~~as ProductTileComponent~~;\n\~~nProductTile~~.~~Details~~ = ~~Details~~;\nDetails.displayName = 'ProductTile.Details';\n\nexport default ProductTile;\n"],"names":["Details","children","jsx","className","styles","~~ProductTile~~","forwardRef","href","target","media","title","width","maxWidth","description","ref","BoxLink","styleVariant","jsxs","Box","paddingTop","paddingBottom","paddingLeft","paddingRight","backgroundColor","borderRadius","display","flexDirection","gap","alignItems","justifyContent","Paragraph","foregroundColor","size","Icon","iconName","iconSize","padding","color","pull","displayName"],"mappings":"+pBA6DMA,EAAU,EAAGC,6BACjBC,EAAC,MAAA,CAAIC,UAAWC,EAAO,iCAAmCH,~~aAG/CI~~,~~EAAcC~~,~~EACzB~~,UACEC,KACEA,EAAAC,OACAA,EAAAC,MACAA,EAAAC,MACAA,EAAAC,~~MACAA~~,EAAQ,QAAAC,SACRA,EAAW,QAAAC,YACXA,~~EAAAZ~~,SACAA,~~GAEFa~~;~~AAEA~~,~~SACGC~~,EAAA,~~CAAQR~~,OAAYC,~~SAAgBQ~~,aAAa,~~UAAUF~~,~~MAC1Db~~,wBAAAC,EAAC,MAAA,CAAIC,UAAWC,EAAO,gBACrBH,~~wBAAAgB~~,EAACC,EAAA,CACCC,WAAW,KACXC,cAAc,KACdC,YAAY,KACZC,aAAa,KACbC,gBAAgB,SAChBC,aAAa,KACbC,QAAQ,OACRC,cAAc,MACdC,IAAI,~~KACJhB~~,QACAC,~~WACAgB~~,WAAW,SACXC,eAAe,~~eAEf5B~~,SAAA;eAAAC,EAAC,MAAA,CAAIC,UAAWC,EAAO,uBAAyBH,SAAAQ;iBAC/C,MAAA,CAAIN,UAAWC,EAAO,yBACrBH,SAAA;eAAAC,~~EAAC~~,~~MAAA~~,~~CAAIC~~,UAAWC,EAAO,+~~BACrBH~~,~~wBAAAC,EAAC4B,EAAA,CAAUC,gBAAgB,kBAAkBC,KAAK,KAChD/B,wBAAAC,EAAC,SAAA,CAAQD,~~SAAAS,~~QAGZG~~,oBACE,MAAA,~~CAAIV~~,UAAWC,EAAO,qCACrBH,wBAAAC,~~EAAC4B~~,EAAA,CAAUC,gBAAgB,YAAYC,KAAK,~~KACzC/B~~,eAINA;iBAEF,MAAA,CAAIE,UAAWC,EAAO,8BACrBH,wBAAAC,~~EAAC+B~~,EAAA,CACCC,SAAS,qBACTC,SAAS,OACTC,QAAQ,OACRC,MAAM,kBACNC,KAAK,kBAOnB,~~GAGFjC~~,~~EAAYL~~,~~QAAUA~~,~~EACtBA~~,~~EAAQuC~~,YAAc"}
1	+ {"version":3,"file":"ProductTile.js","sources":["../../../src/components/ProductTile/ProductTile.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport styles from './ProductTile.module.css';\nimport Box from '../Box';\nimport BoxLink from '../BoxLink';\nimport type { BoxLinkProps } from '../BoxLink';\nimport type { BoxProps } from '../Box';\nimport Paragraph from '../Paragraph';\nimport Icon from '../Icon';\n\nexport type ProductTileHeadingLevel = 'h3' \| 'h4' \| 'h5' \| 'h6';\n\nexport interface ProductTileProps {\n /*\n Destination URL for the tile.\n /\n href: NonNullable<BoxLinkProps['href']>;\n /\n The target attribute for the link.\n * @default '_self'\n /\n target?: BoxLinkProps['target'];\n /\n Leading media content.\n /\n media: React.ReactNode;\n /\n Main title content.\n /\n title: string;\n /\n Semantic heading level for the title.\n * @default 'h3'\n /\n headingLevel?: ProductTileHeadingLevel;\n /\n The width of the Box.\n * Accepts any valid CSS unit or \"full\"\n * @default '390px'\n /\n width?: BoxProps['width'];\n /\n [Responsive] The maximum width of the Box.\n * Accepts any valid CSS unit or \"pageWidth\" to use the `section-container-max-width` token.\n * @default '390px'\n /\n maxWidth?: BoxProps['maxWidth'];\n /\n Optional supporting text.\n /\n description?: string;\n /\n Optional details subcomponent content, such as `ProductTile.Details`.\n /\n children?: React.ReactNode;\n}\n\nexport interface ProductTileDetailsProps {\n /* Content rendered inside the ProductTile details area. */\n children: React.ReactNode;\n}\n\nconst Details = ({ children }: ProductTileDetailsProps) => (\n <div className={styles['product-tile__content-details']}>{children}</div>\n);\n\nconst ProductTileRoot = forwardRef<HTMLAnchorElement, ProductTileProps>(\n function ProductTile(\n {\n href,\n target,\n media,\n title,\n headingLevel = 'h3',\n width = '390px',\n maxWidth = '390px',\n description,\n children,\n },\n ref,\n ) {\n const HeadingTag = headingLevel;\n\n return (\n <BoxLink href={href} target={target} styleVariant=\"default\" ref={ref}>\n <div className={styles['product-tile']}>\n <Box\n paddingTop=\"xs\"\n paddingBottom=\"xs\"\n paddingLeft=\"xs\"\n paddingRight=\"sm\"\n backgroundColor=\"layer2\"\n borderRadius=\"sm\"\n display=\"flex\"\n flexDirection=\"row\"\n gap=\"xs\"\n width={width}\n maxWidth={maxWidth}\n alignItems=\"center\"\n justifyContent=\"spaceBetween\"\n >\n <div className={styles['product-tile__media']}>{media}</div>\n <div className={styles['product-tile__content']}>\n <HeadingTag className={styles['product-tile__content-title']}>\n {title}\n </HeadingTag>\n {description && (\n <div className={styles['product-tile__content-description']}>\n <Paragraph foregroundColor=\"secondary\" size=\"sm\">\n {description}\n </Paragraph>\n </div>\n )}\n {children}\n </div>\n <div className={styles['product-tile__content-icon']}>\n <Icon\n iconName=\"circle-arrow-right\"\n iconSize=\"1.5x\"\n padding=\"none\"\n color=\"accentSecondary\"\n pull=\"right\"\n />\n </div>\n </Box>\n </div>\n </BoxLink>\n );\n },\n);\n\nProductTileRoot.displayName = 'ProductTile';\nDetails.displayName = 'ProductTile.Details';\n\nexport const ProductTile = Object.assign(ProductTileRoot, {\n Details,\n});\n\nexport default ProductTile;\n"],"names":["Details","children","jsx","className","styles","ProductTileRoot","forwardRef","href","target","media","title","headingLevel","width","maxWidth","description","ref","HeadingTag","BoxLink","styleVariant","jsxs","Box","paddingTop","paddingBottom","paddingLeft","paddingRight","backgroundColor","borderRadius","display","flexDirection","gap","alignItems","justifyContent","Paragraph","foregroundColor","size","Icon","iconName","iconSize","padding","color","pull","displayName","ProductTile","Object","assign"],"mappings":"+pBA6DMA,EAAU,EAAGC,6BACjBC,EAAC,MAAA,CAAIC,UAAWC,EAAO,iCAAmCH,aAGtDI,EAAkBC,EACtB,UACEC,KACEA,EAAAC,OACAA,EAAAC,MACAA,EAAAC,MACAA,EAAAC,aACAA,EAAe,KAAAC,MACfA,EAAQ,QAAAC,SACRA,EAAW,QAAAC,YACXA,EAAAb,SACAA,GAEFc,GAEA,MAAMC,EAAaL;AAEnB,SACGM,EAAA,CAAQV,OAAYC,SAAgBU,aAAa,UAAUH,MAC1Dd,wBAAAC,EAAC,MAAA,CAAIC,UAAWC,EAAO,gBACrBH,wBAAAkB,EAACC,EAAA,CACCC,WAAW,KACXC,cAAc,KACdC,YAAY,KACZC,aAAa,KACbC,gBAAgB,SAChBC,aAAa,KACbC,QAAQ,OACRC,cAAc,MACdC,IAAI,KACJjB,QACAC,WACAiB,WAAW,SACXC,eAAe,eAEf9B,SAAA;eAAAC,EAAC,MAAA,CAAIC,UAAWC,EAAO,uBAAyBH,SAAAQ;iBAC/C,MAAA,CAAIN,UAAWC,EAAO,yBACrBH,SAAA;eAAAC,EAACc,EAAA,CAAWb,UAAWC,EAAO,+BAC3BH,SAAAS,IAEFI,oBACE,MAAA,CAAIX,UAAWC,EAAO,qCACrBH,wBAAAC,EAAC8B,EAAA,CAAUC,gBAAgB,YAAYC,KAAK,KACzCjC,eAINA;iBAEF,MAAA,CAAIE,UAAWC,EAAO,8BACrBH,wBAAAC,EAACiC,EAAA,CACCC,SAAS,qBACTC,SAAS,OACTC,QAAQ,OACRC,MAAM,kBACNC,KAAK,kBAOnB,GAGFnC,EAAgBoC,YAAc,cAC9BzC,EAAQyC,YAAc,sBAEf,MAAMC,EAAcC,OAAOC,OAAOvC,EAAiB,CACxDL"}

package/dist/components/index.d.ts CHANGED Viewed

@@ -46,6 +46,8 @@ export { default as CheckboxGroup } from './CheckboxGroup';
 export type * from './CheckboxGroup';
 export { default as ClearFieldButton } from './ClearFieldButton';
 export type * from './ClearFieldButton';
+export { default as CollectionCarouselSection } from './CollectionCarouselSection';
+export type * from './CollectionCarouselSection';
 export { default as ComboBox } from './ComboBox';
 export type * from './ComboBox';
 export { default as CreditCardNumberField } from './CreditCardNumberField';

package/dist/components/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import '../assets/global.css';/* empty css                */import{Accordion as o,AccordionGroup as r}from"./Accordion/Accordion.js";import{AppBannerSection as e}from"./AppBannerSection/AppBannerSection.js";import{AviosCurrencyBadge as i}from"./AviosCurrencyBadge/AviosCurrencyBadge.js";import{AviosCurrency as t}from"./AviosCurrency/AviosCurrency.js";import{AviosBadge as m}from"./AviosBadge/AviosBadge.js";import{AviosCurrencySymbol as a}from"./AviosCurrencySymbol/AviosCurrencySymbol.js";import{Badge as s}from"./Badge/Badge.js";import{BannerSectionContent as n}from"./BannerSectionContent/BannerSectionContent.js";import{BannerSectionPlectrum as p}from"./BannerSectionPlectrum/BannerSectionPlectrum.js";import{Box as d}from"./Box/Box.js";import{BoxLink as l}from"./BoxLink/BoxLink.js";import{BoxLinkContext as f,useBoxLink as j}from"./BoxLink/BoxLinkContext.js";import{Breadcrumbs as u}from"./Breadcrumbs/Breadcrumbs.js";import{Button as c}from"./Button/Button.js";import{ButtonGroup as C}from"./ButtonGroup/ButtonGroup.js";import{Calendar as g}from"./Calendar/Calendar.js";import{CalendarRange as B}from"./CalendarRange/CalendarRange.js";import{CalloutBanner as S}from"./CalloutBanner/CalloutBanner.js";import{default as F}from"./CardSection/CardSection.js";import{Carousel as b}from"./Carousel/Carousel.js";import{CarouselButton as T}from"./Carousel/CarouselButton/CarouselButton.js";import{CategoryTileGroup as x}from"./CategoryTileGroup/CategoryTileGroup.js";import{Checkbox as y}from"./Checkbox/Checkbox.js";import{CheckboxGroup as L}from"./CheckboxGroup/CheckboxGroup.js";import{ClearFieldButton as k}from"./ClearFieldButton/ClearFieldButton.js";import{ComboBox as P}from"./ComboBox/ComboBox.js";import{CreditCardNumberField as D}from"./CreditCardNumberField/CreditCardNumberField.js";import{CreditCardSecurityCodeField as h}from"./CreditCardSecurityCodeField/CreditCardSecurityCodeField.js";import{Currency as I}from"./Currency/Currency.js";import{DateField as A}from"./DateField/DateField.js";import{DatePicker as v}from"./DatePicker/DatePicker.js";import{DateRangePicker as G}from"./DateRangePicker/DateRangePicker.js";import{DestinationHeading as H}from"./DestinationHeading/DestinationHeading.js";import{DetailsDisclosure as N}from"./DetailsDisclosure/DetailsDisclosure.js";import{Dialog as R}from"./Dialog/Dialog.js";import{ErrorSummary as w}from"./ErrorSummary/ErrorSummary.js";import{Eyebrow as E}from"./Eyebrow/Eyebrow.js";import{default as M}from"./FieldDescription/FieldDescription.js";import{FieldError as V}from"./FieldError/FieldError.js";import{FieldHeader as Y}from"./FieldHeader/FieldHeader.js";import{FieldLabel as q}from"./FieldLabel/FieldLabel.js";import{default as z}from"./Fieldset/Fieldset.js";import{FieldsetHeader as J}from"./FieldsetHeader/FieldsetHeader.js";import{Form as K}from"./Form/Form.js";import{Grid as O}from"./Grid/Grid.js";import{Heading as Q}from"./Heading/Heading.js";import{Icon as U}from"./Icon/Icon.js";import{IconBackdrop as W}from"./IconBackdrop/IconBackdrop.js";import{IconButton as X}from"./IconButton/IconButton.js";import{Image as Z}from"./Image/Image.js";import{IntroSection as $}from"./IntroSection/IntroSection.js";import{Label as _}from"./Label/Label.js";import{default as oo}from"./Link/Link.js";import{ListBox as ro}from"./ListBox/ListBox.js";import{ListBoxItem as eo}from"./ListBoxItem/ListBoxItem.js";import{default as io}from"./LoadingSpinner/LoadingSpinner.js";import{Menu as to}from"./Menu/Menu.js";import{MonthYearField as mo}from"./MonthYearField/MonthYearField.js";import{NumberField as ao}from"./NumberField/NumberField.js";import{Paragraph as so}from"./Paragraph/Paragraph.js";import{PasswordField as no}from"./PasswordField/PasswordField.js";import{PhoneNumberField as po}from"./PhoneNumberField/PhoneNumberField.js";import"../utils/phoneNumber/phoneNumber.js";import{Popover as lo}from"./Popover/Popover.js";import{ProductTile as fo}from"./ProductTile/ProductTile.js";import{Radio as jo}from"./Radio/Radio.js";import{RadioGroup as uo}from"./RadioGroup/RadioGroup.js";import{SearchField as co}from"./SearchField/SearchField.js";import{default as Co}from"./Section/Section.js";import{SegmentedControl as go}from"./SegmentedControl/SegmentedControl.js";import{default as Bo}from"./SelectCard/SelectCard.js";import{default as So}from"./SelectNative/SelectNative.js";import{SkeletonLoader as Fo}from"./SkeletonLoader/SkeletonLoader.js";import{Slider as bo}from"./Slider/Slider.js";import{Spacer as To}from"./Spacer/Spacer.js";import{SubHeading as xo}from"./SubHeading/SubHeading.js";import{Switch as yo}from"./Switch/Switch.js";import{Tab as Lo,TabList as ko,Tabs as Po,useTabsContext as Do}from"./Tabs/Tabs.js";import{T as ho}from"../TabPanel-DDYn4r31.js";import{Tag as Io}from"./Tag/Tag.js";import{TagGroup as Ao}from"./TagGroup/TagGroup.js";import{TextField as vo}from"./TextField/TextField.js";import{TextAreaField as Go}from"./TextAreaField/TextAreaField.js";import{default as Ho}from"./ToggleButton/ToggleButton.js";import{default as No}from"./ToggleIconButton/ToggleIconButton.js";import{Tooltip as Ro}from"./Tooltip/Tooltip.js";import{VisuallyHidden as wo}from"./VisuallyHidden/VisuallyHidden.js";export{o as Accordion,r as AccordionGroup,e as AppBannerSection,m as AviosBadge,t as AviosCurrency,i as AviosCurrencyBadge,a as AviosCurrencySymbol,s as Badge,n as BannerSectionContent,p as BannerSectionPlectrum,d as Box,l as BoxLink,f as BoxLinkContext,u as Breadcrumbs,c as Button,C as ButtonGroup,g as Calendar,B as CalendarRange,S as CalloutBanner,F as CardSection,b as Carousel,T as CarouselButton,x as CategoryTileGroup,y as Checkbox,L as CheckboxGroup,k as ClearFieldButton,P as ComboBox,D as CreditCardNumberField,h as CreditCardSecurityCodeField,I as Currency,A as DateField,v as DatePicker,G as DateRangePicker,H as DestinationHeading,N as DetailsDisclosure,R as Dialog,w as ErrorSummary,E as Eyebrow,M as FieldDescription,V as FieldError,Y as FieldHeader,q as FieldLabel,z as Fieldset,J as FieldsetHeader,K as Form,O as Grid,Q as Heading,U as Icon,W as IconBackdrop,X as IconButton,Z as Image,$ as IntroSection,_ as Label,oo as Link,ro as ListBox,eo as ListBoxItem,io as LoadingSpinner,to as Menu,mo as MonthYearField,ao as NumberField,so as Paragraph,no as PasswordField,po as PhoneNumberField,lo as Popover,fo as ProductTile,jo as Radio,uo as RadioGroup,co as SearchField,Co as Section,go as SegmentedControl,Bo as SelectCard,So as SelectNative,Fo as SkeletonLoader,bo as Slider,To as Spacer,xo as SubHeading,yo as Switch,Lo as Tab,ko as TabList,ho as TabPanel,Po as Tabs,Io as Tag,Ao as TagGroup,Go as TextAreaField,vo as TextField,Ho as ToggleButton,No as ToggleIconButton,Ro as Tooltip,wo as VisuallyHidden,j as useBoxLink,Do as useTabsContext};
+import '../assets/global.css';/* empty css                */import{Accordion as o,AccordionGroup as r}from"./Accordion/Accordion.js";import{AppBannerSection as e}from"./AppBannerSection/AppBannerSection.js";import{AviosCurrencyBadge as i}from"./AviosCurrencyBadge/AviosCurrencyBadge.js";import{AviosCurrency as t}from"./AviosCurrency/AviosCurrency.js";import{AviosBadge as m}from"./AviosBadge/AviosBadge.js";import{AviosCurrencySymbol as s}from"./AviosCurrencySymbol/AviosCurrencySymbol.js";import{Badge as a}from"./Badge/Badge.js";import{BannerSectionContent as n}from"./BannerSectionContent/BannerSectionContent.js";import{BannerSectionPlectrum as p}from"./BannerSectionPlectrum/BannerSectionPlectrum.js";import{Box as l}from"./Box/Box.js";import{BoxLink as d}from"./BoxLink/BoxLink.js";import{BoxLinkContext as f,useBoxLink as j}from"./BoxLink/BoxLinkContext.js";import{Breadcrumbs as u}from"./Breadcrumbs/Breadcrumbs.js";import{Button as c}from"./Button/Button.js";import{ButtonGroup as C}from"./ButtonGroup/ButtonGroup.js";import{Calendar as g}from"./Calendar/Calendar.js";import{CalendarRange as B}from"./CalendarRange/CalendarRange.js";import{CalloutBanner as S}from"./CalloutBanner/CalloutBanner.js";import{default as F}from"./CardSection/CardSection.js";import{Carousel as b}from"./Carousel/Carousel.js";import{CarouselButton as T}from"./Carousel/CarouselButton/CarouselButton.js";import{CategoryTileGroup as x}from"./CategoryTileGroup/CategoryTileGroup.js";import{Checkbox as y}from"./Checkbox/Checkbox.js";import{CheckboxGroup as L}from"./CheckboxGroup/CheckboxGroup.js";import{ClearFieldButton as k}from"./ClearFieldButton/ClearFieldButton.js";import{CollectionCarouselSection as P}from"./CollectionCarouselSection/CollectionCarouselSection.js";import{ComboBox as D}from"./ComboBox/ComboBox.js";import{CreditCardNumberField as h}from"./CreditCardNumberField/CreditCardNumberField.js";import{CreditCardSecurityCodeField as I}from"./CreditCardSecurityCodeField/CreditCardSecurityCodeField.js";import{Currency as A}from"./Currency/Currency.js";import{DateField as v}from"./DateField/DateField.js";import{DatePicker as G}from"./DatePicker/DatePicker.js";import{DateRangePicker as H}from"./DateRangePicker/DateRangePicker.js";import{DestinationHeading as N}from"./DestinationHeading/DestinationHeading.js";import{DetailsDisclosure as R}from"./DetailsDisclosure/DetailsDisclosure.js";import{Dialog as w}from"./Dialog/Dialog.js";import{ErrorSummary as E}from"./ErrorSummary/ErrorSummary.js";import{Eyebrow as M}from"./Eyebrow/Eyebrow.js";import{default as V}from"./FieldDescription/FieldDescription.js";import{FieldError as Y}from"./FieldError/FieldError.js";import{FieldHeader as q}from"./FieldHeader/FieldHeader.js";import{FieldLabel as z}from"./FieldLabel/FieldLabel.js";import{default as J}from"./Fieldset/Fieldset.js";import{FieldsetHeader as K}from"./FieldsetHeader/FieldsetHeader.js";import{Form as O}from"./Form/Form.js";import{Grid as Q}from"./Grid/Grid.js";import{Heading as U}from"./Heading/Heading.js";import{Icon as W}from"./Icon/Icon.js";import{IconBackdrop as X}from"./IconBackdrop/IconBackdrop.js";import{IconButton as Z}from"./IconButton/IconButton.js";import{Image as $}from"./Image/Image.js";import{IntroSection as _}from"./IntroSection/IntroSection.js";import{Label as oo}from"./Label/Label.js";import{default as ro}from"./Link/Link.js";import{ListBox as eo}from"./ListBox/ListBox.js";import{ListBoxItem as io}from"./ListBoxItem/ListBoxItem.js";import{default as to}from"./LoadingSpinner/LoadingSpinner.js";import{Menu as mo}from"./Menu/Menu.js";import{MonthYearField as so}from"./MonthYearField/MonthYearField.js";import{NumberField as ao}from"./NumberField/NumberField.js";import{Paragraph as no}from"./Paragraph/Paragraph.js";import{PasswordField as po}from"./PasswordField/PasswordField.js";import{PhoneNumberField as lo}from"./PhoneNumberField/PhoneNumberField.js";import"../utils/phoneNumber/phoneNumber.js";import{Popover as fo}from"./Popover/Popover.js";import{ProductTile as jo}from"./ProductTile/ProductTile.js";import{Radio as uo}from"./Radio/Radio.js";import{RadioGroup as co}from"./RadioGroup/RadioGroup.js";import{SearchField as Co}from"./SearchField/SearchField.js";import{default as go}from"./Section/Section.js";import{SegmentedControl as Bo}from"./SegmentedControl/SegmentedControl.js";import{default as So}from"./SelectCard/SelectCard.js";import{default as Fo}from"./SelectNative/SelectNative.js";import{SkeletonLoader as bo}from"./SkeletonLoader/SkeletonLoader.js";import{Slider as To}from"./Slider/Slider.js";import{Spacer as xo}from"./Spacer/Spacer.js";import{SubHeading as yo}from"./SubHeading/SubHeading.js";import{Switch as Lo}from"./Switch/Switch.js";import{Tab as ko,TabList as Po,Tabs as Do,useTabsContext as ho}from"./Tabs/Tabs.js";import{T as Io}from"../TabPanel-DDYn4r31.js";import{Tag as Ao}from"./Tag/Tag.js";import{TagGroup as vo}from"./TagGroup/TagGroup.js";import{TextField as Go}from"./TextField/TextField.js";import{TextAreaField as Ho}from"./TextAreaField/TextAreaField.js";import{default as No}from"./ToggleButton/ToggleButton.js";import{default as Ro}from"./ToggleIconButton/ToggleIconButton.js";import{Tooltip as wo}from"./Tooltip/Tooltip.js";import{VisuallyHidden as Eo}from"./VisuallyHidden/VisuallyHidden.js";export{o as Accordion,r as AccordionGroup,e as AppBannerSection,m as AviosBadge,t as AviosCurrency,i as AviosCurrencyBadge,s as AviosCurrencySymbol,a as Badge,n as BannerSectionContent,p as BannerSectionPlectrum,l as Box,d as BoxLink,f as BoxLinkContext,u as Breadcrumbs,c as Button,C as ButtonGroup,g as Calendar,B as CalendarRange,S as CalloutBanner,F as CardSection,b as Carousel,T as CarouselButton,x as CategoryTileGroup,y as Checkbox,L as CheckboxGroup,k as ClearFieldButton,P as CollectionCarouselSection,D as ComboBox,h as CreditCardNumberField,I as CreditCardSecurityCodeField,A as Currency,v as DateField,G as DatePicker,H as DateRangePicker,N as DestinationHeading,R as DetailsDisclosure,w as Dialog,E as ErrorSummary,M as Eyebrow,V as FieldDescription,Y as FieldError,q as FieldHeader,z as FieldLabel,J as Fieldset,K as FieldsetHeader,O as Form,Q as Grid,U as Heading,W as Icon,X as IconBackdrop,Z as IconButton,$ as Image,_ as IntroSection,oo as Label,ro as Link,eo as ListBox,io as ListBoxItem,to as LoadingSpinner,mo as Menu,so as MonthYearField,ao as NumberField,no as Paragraph,po as PasswordField,lo as PhoneNumberField,fo as Popover,jo as ProductTile,uo as Radio,co as RadioGroup,Co as SearchField,go as Section,Bo as SegmentedControl,So as SelectCard,Fo as SelectNative,bo as SkeletonLoader,To as Slider,xo as Spacer,yo as SubHeading,Lo as Switch,ko as Tab,Po as TabList,Io as TabPanel,Do as Tabs,Ao as Tag,vo as TagGroup,Ho as TextAreaField,Go as TextField,No as ToggleButton,Ro as ToggleIconButton,wo as Tooltip,Eo as VisuallyHidden,j as useBoxLink,ho as useTabsContext};
 //# sourceMappingURL=index.js.map

package/dist/index.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import './assets/global.css';/* empty css               */import{Accordion as o,AccordionGroup as e}from"./components/Accordion/Accordion.js";import{AppBannerSection as r}from"./components/AppBannerSection/AppBannerSection.js";import{AviosCurrencyBadge as t}from"./components/AviosCurrencyBadge/AviosCurrencyBadge.js";import{AviosCurrency as n}from"./components/AviosCurrency/AviosCurrency.js";import{AviosBadge as m}from"./components/AviosBadge/AviosBadge.js";import{AviosCurrencySymbol as s}from"./components/AviosCurrencySymbol/AviosCurrencySymbol.js";import{Badge as i}from"./components/Badge/Badge.js";import{BannerSectionContent as p}from"./components/BannerSectionContent/BannerSectionContent.js";import{BannerSectionPlectrum as a}from"./components/BannerSectionPlectrum/BannerSectionPlectrum.js";import{Box as c}from"./components/Box/Box.js";import{BoxLink as l}from"./components/BoxLink/BoxLink.js";import{BoxLinkContext as d,useBoxLink as f}from"./components/BoxLink/BoxLinkContext.js";import{Breadcrumbs as j}from"./components/Breadcrumbs/Breadcrumbs.js";import{Button as u}from"./components/Button/Button.js";import{ButtonGroup as C}from"./components/ButtonGroup/ButtonGroup.js";import{Calendar as B}from"./components/Calendar/Calendar.js";import{CalendarRange as g}from"./components/CalendarRange/CalendarRange.js";import{CalloutBanner as S}from"./components/CalloutBanner/CalloutBanner.js";import{default as F}from"./components/CardSection/CardSection.js";import{Carousel as b}from"./components/Carousel/Carousel.js";import{CarouselButton as k}from"./components/Carousel/CarouselButton/CarouselButton.js";import{CategoryTileGroup as T}from"./components/CategoryTileGroup/CategoryTileGroup.js";import{Checkbox as x}from"./components/Checkbox/Checkbox.js";import{CheckboxGroup as y}from"./components/CheckboxGroup/CheckboxGroup.js";import{ClearFieldButton as h}from"./components/ClearFieldButton/ClearFieldButton.js";import{ComboBox as L}from"./components/ComboBox/ComboBox.js";import{CreditCardNumberField as P}from"./components/CreditCardNumberField/CreditCardNumberField.js";import{CreditCardSecurityCodeField as D}from"./components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js";import{Currency as I}from"./components/Currency/Currency.js";import{DateField as A}from"./components/DateField/DateField.js";import{DatePicker as v}from"./components/DatePicker/DatePicker.js";import{DateRangePicker as G}from"./components/DateRangePicker/DateRangePicker.js";import{DestinationHeading as H}from"./components/DestinationHeading/DestinationHeading.js";import{DetailsDisclosure as N}from"./components/DetailsDisclosure/DetailsDisclosure.js";import{Dialog as R}from"./components/Dialog/Dialog.js";import{ErrorSummary as w}from"./components/ErrorSummary/ErrorSummary.js";import{Eyebrow as E}from"./components/Eyebrow/Eyebrow.js";import{default as M}from"./components/FieldDescription/FieldDescription.js";import{FieldError as V}from"./components/FieldError/FieldError.js";import{FieldHeader as Y}from"./components/FieldHeader/FieldHeader.js";import{FieldLabel as q}from"./components/FieldLabel/FieldLabel.js";import{default as z}from"./components/Fieldset/Fieldset.js";import{FieldsetHeader as J}from"./components/FieldsetHeader/FieldsetHeader.js";import{Form as K}from"./components/Form/Form.js";import{Grid as O}from"./components/Grid/Grid.js";import{Heading as Q}from"./components/Heading/Heading.js";import{Icon as U}from"./components/Icon/Icon.js";import{IconBackdrop as W}from"./components/IconBackdrop/IconBackdrop.js";import{IconButton as X}from"./components/IconButton/IconButton.js";import{Image as Z}from"./components/Image/Image.js";import{IntroSection as $}from"./components/IntroSection/IntroSection.js";import{Label as _}from"./components/Label/Label.js";import{default as oo}from"./components/Link/Link.js";import{ListBox as eo}from"./components/ListBox/ListBox.js";import{ListBoxItem as ro}from"./components/ListBoxItem/ListBoxItem.js";import{default as to}from"./components/LoadingSpinner/LoadingSpinner.js";import{Menu as no}from"./components/Menu/Menu.js";import{MonthYearField as mo}from"./components/MonthYearField/MonthYearField.js";import{NumberField as so}from"./components/NumberField/NumberField.js";import{Paragraph as io}from"./components/Paragraph/Paragraph.js";import{PasswordField as po}from"./components/PasswordField/PasswordField.js";import{PhoneNumberField as ao}from"./components/PhoneNumberField/PhoneNumberField.js";import"./utils/phoneNumber/phoneNumber.js";import{Popover as co}from"./components/Popover/Popover.js";import{ProductTile as lo}from"./components/ProductTile/ProductTile.js";import{Radio as fo}from"./components/Radio/Radio.js";import{RadioGroup as jo}from"./components/RadioGroup/RadioGroup.js";import{SearchField as uo}from"./components/SearchField/SearchField.js";import{default as Co}from"./components/Section/Section.js";import{SegmentedControl as Bo}from"./components/SegmentedControl/SegmentedControl.js";import{default as go}from"./components/SelectCard/SelectCard.js";import{default as So}from"./components/SelectNative/SelectNative.js";import{SkeletonLoader as Fo}from"./components/SkeletonLoader/SkeletonLoader.js";import{Slider as bo}from"./components/Slider/Slider.js";import{Spacer as ko}from"./components/Spacer/Spacer.js";import{SubHeading as To}from"./components/SubHeading/SubHeading.js";import{Switch as xo}from"./components/Switch/Switch.js";import{Tab as yo,TabList as ho,Tabs as Lo,useTabsContext as Po}from"./components/Tabs/Tabs.js";import{T as Do}from"./TabPanel-DDYn4r31.js";import{Tag as Io}from"./components/Tag/Tag.js";import{TagGroup as Ao}from"./components/TagGroup/TagGroup.js";import{TextField as vo}from"./components/TextField/TextField.js";import{TextAreaField as Go}from"./components/TextAreaField/TextAreaField.js";import{default as Ho}from"./components/ToggleButton/ToggleButton.js";import{default as No}from"./components/ToggleIconButton/ToggleIconButton.js";import{Tooltip as Ro}from"./components/Tooltip/Tooltip.js";import{VisuallyHidden as wo}from"./components/VisuallyHidden/VisuallyHidden.js";import{useBreakpoint as Eo}from"./utils/breakpoint/hooks/useBreakpoint.js";import{useCarousel as Mo}from"./utils/carousel/hooks/useCarousel.js";import{BREAKPOINTS as Vo}from"./utils/breakpoint/theme/breakpoints.js";import{useFitCount as Yo}from"./utils/layout/hooks/useFitCount.js";export{o as Accordion,e as AccordionGroup,r as AppBannerSection,m as AviosBadge,n as AviosCurrency,t as AviosCurrencyBadge,s as AviosCurrencySymbol,Vo as BREAKPOINTS,i as Badge,p as BannerSectionContent,a as BannerSectionPlectrum,c as Box,l as BoxLink,d as BoxLinkContext,j as Breadcrumbs,u as Button,C as ButtonGroup,B as Calendar,g as CalendarRange,S as CalloutBanner,F as CardSection,b as Carousel,k as CarouselButton,T as CategoryTileGroup,x as Checkbox,y as CheckboxGroup,h as ClearFieldButton,L as ComboBox,P as CreditCardNumberField,D as CreditCardSecurityCodeField,I as Currency,A as DateField,v as DatePicker,G as DateRangePicker,H as DestinationHeading,N as DetailsDisclosure,R as Dialog,w as ErrorSummary,E as Eyebrow,M as FieldDescription,V as FieldError,Y as FieldHeader,q as FieldLabel,z as Fieldset,J as FieldsetHeader,K as Form,O as Grid,Q as Heading,U as Icon,W as IconBackdrop,X as IconButton,Z as Image,$ as IntroSection,_ as Label,oo as Link,eo as ListBox,ro as ListBoxItem,to as LoadingSpinner,no as Menu,mo as MonthYearField,so as NumberField,io as Paragraph,po as PasswordField,ao as PhoneNumberField,co as Popover,lo as ProductTile,fo as Radio,jo as RadioGroup,uo as SearchField,Co as Section,Bo as SegmentedControl,go as SelectCard,So as SelectNative,Fo as SkeletonLoader,bo as Slider,ko as Spacer,To as SubHeading,xo as Switch,yo as Tab,ho as TabList,Do as TabPanel,Lo as Tabs,Io as Tag,Ao as TagGroup,Go as TextAreaField,vo as TextField,Ho as ToggleButton,No as ToggleIconButton,Ro as Tooltip,wo as VisuallyHidden,f as useBoxLink,Eo as useBreakpoint,Mo as useCarousel,Yo as useFitCount,Po as useTabsContext};
+import './assets/global.css';/* empty css               */import{Accordion as o,AccordionGroup as e}from"./components/Accordion/Accordion.js";import{AppBannerSection as r}from"./components/AppBannerSection/AppBannerSection.js";import{AviosCurrencyBadge as t}from"./components/AviosCurrencyBadge/AviosCurrencyBadge.js";import{AviosCurrency as n}from"./components/AviosCurrency/AviosCurrency.js";import{AviosBadge as m}from"./components/AviosBadge/AviosBadge.js";import{AviosCurrencySymbol as s}from"./components/AviosCurrencySymbol/AviosCurrencySymbol.js";import{Badge as i}from"./components/Badge/Badge.js";import{BannerSectionContent as p}from"./components/BannerSectionContent/BannerSectionContent.js";import{BannerSectionPlectrum as a}from"./components/BannerSectionPlectrum/BannerSectionPlectrum.js";import{Box as c}from"./components/Box/Box.js";import{BoxLink as l}from"./components/BoxLink/BoxLink.js";import{BoxLinkContext as d,useBoxLink as f}from"./components/BoxLink/BoxLinkContext.js";import{Breadcrumbs as j}from"./components/Breadcrumbs/Breadcrumbs.js";import{Button as u}from"./components/Button/Button.js";import{ButtonGroup as C}from"./components/ButtonGroup/ButtonGroup.js";import{Calendar as B}from"./components/Calendar/Calendar.js";import{CalendarRange as g}from"./components/CalendarRange/CalendarRange.js";import{CalloutBanner as S}from"./components/CalloutBanner/CalloutBanner.js";import{default as F}from"./components/CardSection/CardSection.js";import{Carousel as b}from"./components/Carousel/Carousel.js";import{CarouselButton as k}from"./components/Carousel/CarouselButton/CarouselButton.js";import{CategoryTileGroup as T}from"./components/CategoryTileGroup/CategoryTileGroup.js";import{Checkbox as x}from"./components/Checkbox/Checkbox.js";import{CheckboxGroup as y}from"./components/CheckboxGroup/CheckboxGroup.js";import{ClearFieldButton as h}from"./components/ClearFieldButton/ClearFieldButton.js";import{CollectionCarouselSection as L}from"./components/CollectionCarouselSection/CollectionCarouselSection.js";import{ComboBox as P}from"./components/ComboBox/ComboBox.js";import{CreditCardNumberField as D}from"./components/CreditCardNumberField/CreditCardNumberField.js";import{CreditCardSecurityCodeField as I}from"./components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js";import{Currency as A}from"./components/Currency/Currency.js";import{DateField as v}from"./components/DateField/DateField.js";import{DatePicker as G}from"./components/DatePicker/DatePicker.js";import{DateRangePicker as H}from"./components/DateRangePicker/DateRangePicker.js";import{DestinationHeading as N}from"./components/DestinationHeading/DestinationHeading.js";import{DetailsDisclosure as R}from"./components/DetailsDisclosure/DetailsDisclosure.js";import{Dialog as w}from"./components/Dialog/Dialog.js";import{ErrorSummary as E}from"./components/ErrorSummary/ErrorSummary.js";import{Eyebrow as M}from"./components/Eyebrow/Eyebrow.js";import{default as V}from"./components/FieldDescription/FieldDescription.js";import{FieldError as Y}from"./components/FieldError/FieldError.js";import{FieldHeader as q}from"./components/FieldHeader/FieldHeader.js";import{FieldLabel as z}from"./components/FieldLabel/FieldLabel.js";import{default as J}from"./components/Fieldset/Fieldset.js";import{FieldsetHeader as K}from"./components/FieldsetHeader/FieldsetHeader.js";import{Form as O}from"./components/Form/Form.js";import{Grid as Q}from"./components/Grid/Grid.js";import{Heading as U}from"./components/Heading/Heading.js";import{Icon as W}from"./components/Icon/Icon.js";import{IconBackdrop as X}from"./components/IconBackdrop/IconBackdrop.js";import{IconButton as Z}from"./components/IconButton/IconButton.js";import{Image as $}from"./components/Image/Image.js";import{IntroSection as _}from"./components/IntroSection/IntroSection.js";import{Label as oo}from"./components/Label/Label.js";import{default as eo}from"./components/Link/Link.js";import{ListBox as ro}from"./components/ListBox/ListBox.js";import{ListBoxItem as to}from"./components/ListBoxItem/ListBoxItem.js";import{default as no}from"./components/LoadingSpinner/LoadingSpinner.js";import{Menu as mo}from"./components/Menu/Menu.js";import{MonthYearField as so}from"./components/MonthYearField/MonthYearField.js";import{NumberField as io}from"./components/NumberField/NumberField.js";import{Paragraph as po}from"./components/Paragraph/Paragraph.js";import{PasswordField as ao}from"./components/PasswordField/PasswordField.js";import{PhoneNumberField as co}from"./components/PhoneNumberField/PhoneNumberField.js";import"./utils/phoneNumber/phoneNumber.js";import{Popover as lo}from"./components/Popover/Popover.js";import{ProductTile as fo}from"./components/ProductTile/ProductTile.js";import{Radio as jo}from"./components/Radio/Radio.js";import{RadioGroup as uo}from"./components/RadioGroup/RadioGroup.js";import{SearchField as Co}from"./components/SearchField/SearchField.js";import{default as Bo}from"./components/Section/Section.js";import{SegmentedControl as go}from"./components/SegmentedControl/SegmentedControl.js";import{default as So}from"./components/SelectCard/SelectCard.js";import{default as Fo}from"./components/SelectNative/SelectNative.js";import{SkeletonLoader as bo}from"./components/SkeletonLoader/SkeletonLoader.js";import{Slider as ko}from"./components/Slider/Slider.js";import{Spacer as To}from"./components/Spacer/Spacer.js";import{SubHeading as xo}from"./components/SubHeading/SubHeading.js";import{Switch as yo}from"./components/Switch/Switch.js";import{Tab as ho,TabList as Lo,Tabs as Po,useTabsContext as Do}from"./components/Tabs/Tabs.js";import{T as Io}from"./TabPanel-DDYn4r31.js";import{Tag as Ao}from"./components/Tag/Tag.js";import{TagGroup as vo}from"./components/TagGroup/TagGroup.js";import{TextField as Go}from"./components/TextField/TextField.js";import{TextAreaField as Ho}from"./components/TextAreaField/TextAreaField.js";import{default as No}from"./components/ToggleButton/ToggleButton.js";import{default as Ro}from"./components/ToggleIconButton/ToggleIconButton.js";import{Tooltip as wo}from"./components/Tooltip/Tooltip.js";import{VisuallyHidden as Eo}from"./components/VisuallyHidden/VisuallyHidden.js";import{useBreakpoint as Mo}from"./utils/breakpoint/hooks/useBreakpoint.js";import{useCarousel as Vo}from"./utils/carousel/hooks/useCarousel.js";import{BREAKPOINTS as Yo}from"./utils/breakpoint/theme/breakpoints.js";import{useFitCount as qo}from"./utils/layout/hooks/useFitCount.js";export{o as Accordion,e as AccordionGroup,r as AppBannerSection,m as AviosBadge,n as AviosCurrency,t as AviosCurrencyBadge,s as AviosCurrencySymbol,Yo as BREAKPOINTS,i as Badge,p as BannerSectionContent,a as BannerSectionPlectrum,c as Box,l as BoxLink,d as BoxLinkContext,j as Breadcrumbs,u as Button,C as ButtonGroup,B as Calendar,g as CalendarRange,S as CalloutBanner,F as CardSection,b as Carousel,k as CarouselButton,T as CategoryTileGroup,x as Checkbox,y as CheckboxGroup,h as ClearFieldButton,L as CollectionCarouselSection,P as ComboBox,D as CreditCardNumberField,I as CreditCardSecurityCodeField,A as Currency,v as DateField,G as DatePicker,H as DateRangePicker,N as DestinationHeading,R as DetailsDisclosure,w as Dialog,E as ErrorSummary,M as Eyebrow,V as FieldDescription,Y as FieldError,q as FieldHeader,z as FieldLabel,J as Fieldset,K as FieldsetHeader,O as Form,Q as Grid,U as Heading,W as Icon,X as IconBackdrop,Z as IconButton,$ as Image,_ as IntroSection,oo as Label,eo as Link,ro as ListBox,to as ListBoxItem,no as LoadingSpinner,mo as Menu,so as MonthYearField,io as NumberField,po as Paragraph,ao as PasswordField,co as PhoneNumberField,lo as Popover,fo as ProductTile,jo as Radio,uo as RadioGroup,Co as SearchField,Bo as Section,go as SegmentedControl,So as SelectCard,Fo as SelectNative,bo as SkeletonLoader,ko as Slider,To as Spacer,xo as SubHeading,yo as Switch,ho as Tab,Lo as TabList,Io as TabPanel,Po as Tabs,Ao as Tag,vo as TagGroup,Ho as TextAreaField,Go as TextField,No as ToggleButton,Ro as ToggleIconButton,wo as Tooltip,Eo as VisuallyHidden,f as useBoxLink,Mo as useBreakpoint,Vo as useCarousel,qo as useFitCount,Do as useTabsContext};
 //# sourceMappingURL=index.js.map

package/dist/utils/stories/DraggableContainer.js CHANGED Viewed

@@ -1,8 +1,8 @@
-import{jsxs as o,jsx as e}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as r}from"react";import '../../assets/skeleton.css';import '../../assets/global.css';/* empty css                   */import"../../components/Accordion/Accordion.js";import"../../components/AppBannerSection/AppBannerSection.js";import"../../components/AviosCurrencySymbol/AviosCurrencySymbol.js";import"../../components/BannerSectionContent/BannerSectionContent.js";import"../../components/BannerSectionPlectrum/BannerSectionPlectrum.js";import{Box as i}from"../../components/Box/Box.js";import"../../components/BoxLink/BoxLink.js";import"../../components/BoxLink/BoxLinkContext.js";import"../../components/Breadcrumbs/Breadcrumbs.js";import"../../components/Button/Button.js";import"../../components/Calendar/Calendar.js";import"../../components/CalendarRange/CalendarRange.js";import"../../components/CalloutBanner/CalloutBanner.js";import"../../components/CardSection/CardSection.js";import"../../IconButton.module-C7YCy-MU.js";import"../../components/Carousel/CarouselButton/CarouselButton.js";import"@react-aria/focus";import"@react-aria/interactions";import"../../components/CategoryTileGroup/CategoryTileGroup.js";import"../../components/Checkbox/Checkbox.js";import"../../components/CheckboxGroup/CheckboxGroup.js";import"../../components/ClearFieldButton/ClearFieldButton.js";import"../../components/ComboBox/ComboBox.js";import"../../components/CreditCardNumberField/CreditCardNumberField.js";import"../../components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js";import"../../components/DateField/DateField.js";import"../../components/DatePicker/DatePicker.js";import"../../components/DateRangePicker/DateRangePicker.js";import{Heading as s}from"../../components/Heading/Heading.js";import"../../components/DetailsDisclosure/DetailsDisclosure.js";import"../../components/Dialog/Dialog.js";import"../../components/Link/Link.js";import"react-aria-components";import"../../components/FieldHeader/FieldHeader.js";import"../../components/Fieldset/Fieldset.js";import"../../components/Form/Form.js";import"../../components/Grid/Grid.js";import"../../components/IconButton/IconButton.js";import"../../components/Image/Image.js";import"../../components/IntroSection/IntroSection.js";import"../../components/Label/Label.js";import"../../components/ListBox/ListBox.js";import"../../components/Menu/Menu.js";import"../../components/MonthYearField/MonthYearField.js";import"../../components/NumberField/NumberField.js";import{Paragraph as m}from"../../components/Paragraph/Paragraph.js";import"../../components/PasswordField/PasswordField.js";import"../../components/PhoneNumberField/PhoneNumberField.js";import"../phoneNumber/phoneNumber.js";import"@react-aria/overlays";import"../../components/ProductTile/ProductTile.js";import"../../components/Radio/Radio.js";import"../../components/RadioGroup/RadioGroup.js";import"../../components/SearchField/SearchField.js";import"../../components/Section/Section.js";import"../../components/SegmentedControl/SegmentedControl.js";import"../../components/SelectCard/SelectCard.js";import"../../components/SelectNative/SelectNative.js";/* empty css                     */import"../../components/Slider/Slider.js";import"../../components/SubHeading/SubHeading.js";import"../../components/Tabs/Tabs.js";import"../../components/TextField/TextField.js";import"../../components/TextAreaField/TextAreaField.js";const a=({children:a,initialWidth:p=500,minWidth:c=300,maxWidth:d=800,title:l="Draggable Container",description:u="Drag the right edge to resize and see scroll behavior"})=>{const[j,b]=t(p),[g,C]=t(!1),h=n(null),x=n(0),S=n(p),B=o=>{if(!g)return;const e=o.clientX-x.current,t=Math.max(c,Math.min(d,S.current+e));b(t)},y=()=>{C(!1)};return r(()=>{if(g)return document.addEventListener("mousemove",B),document.addEventListener("mouseup",y),document.body.style.cursor="ew-resize",document.body.style.userSelect="none",()=>{document.removeEventListener("mousemove",B),document.removeEventListener("mouseup",y),document.body.style.cursor="",document.body.style.userSelect=""}},[g]),/* @__PURE__ */o("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"16px"},children:[
+import{jsxs as o,jsx as e}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as r}from"react";import '../../assets/skeleton.css';import '../../assets/global.css';/* empty css                   */import"../../components/Accordion/Accordion.js";import"../../components/AppBannerSection/AppBannerSection.js";import"../../components/AviosCurrencySymbol/AviosCurrencySymbol.js";import"../../components/BannerSectionContent/BannerSectionContent.js";import"../../components/BannerSectionPlectrum/BannerSectionPlectrum.js";import{Box as i}from"../../components/Box/Box.js";import"../../components/BoxLink/BoxLink.js";import"../../components/BoxLink/BoxLinkContext.js";import"../../components/Breadcrumbs/Breadcrumbs.js";import"../../components/Button/Button.js";import"../../components/Calendar/Calendar.js";import"../../components/CalendarRange/CalendarRange.js";import"../../components/CalloutBanner/CalloutBanner.js";import"../../components/CardSection/CardSection.js";import"../../IconButton.module-C7YCy-MU.js";import"../../components/Carousel/CarouselButton/CarouselButton.js";import"@react-aria/focus";import"@react-aria/interactions";import"../../components/CategoryTileGroup/CategoryTileGroup.js";import"../../components/Checkbox/Checkbox.js";import"../../components/CheckboxGroup/CheckboxGroup.js";import"../../components/ClearFieldButton/ClearFieldButton.js";import"../../components/CollectionCarouselSection/CollectionCarouselSection.js";import"../../components/ComboBox/ComboBox.js";import"../../components/CreditCardNumberField/CreditCardNumberField.js";import"../../components/CreditCardSecurityCodeField/CreditCardSecurityCodeField.js";import"../../components/DateField/DateField.js";import"../../components/DatePicker/DatePicker.js";import"../../components/DateRangePicker/DateRangePicker.js";import{Heading as s}from"../../components/Heading/Heading.js";import"../../components/DetailsDisclosure/DetailsDisclosure.js";import"../../components/Dialog/Dialog.js";import"../../components/Link/Link.js";import"react-aria-components";import"../../components/FieldHeader/FieldHeader.js";import"../../components/Fieldset/Fieldset.js";import"../../components/Form/Form.js";import"../../components/Grid/Grid.js";import"../../components/IconButton/IconButton.js";import"../../components/Image/Image.js";import"../../components/IntroSection/IntroSection.js";import"../../components/Label/Label.js";import"../../components/ListBox/ListBox.js";import"../../components/Menu/Menu.js";import"../../components/MonthYearField/MonthYearField.js";import"../../components/NumberField/NumberField.js";import{Paragraph as m}from"../../components/Paragraph/Paragraph.js";import"../../components/PasswordField/PasswordField.js";import"../../components/PhoneNumberField/PhoneNumberField.js";import"../phoneNumber/phoneNumber.js";import"@react-aria/overlays";import"../../components/ProductTile/ProductTile.js";import"../../components/Radio/Radio.js";import"../../components/RadioGroup/RadioGroup.js";import"../../components/SearchField/SearchField.js";import"../../components/Section/Section.js";import"../../components/SegmentedControl/SegmentedControl.js";import"../../components/SelectCard/SelectCard.js";import"../../components/SelectNative/SelectNative.js";/* empty css                     */import"../../components/Slider/Slider.js";import"../../components/SubHeading/SubHeading.js";import"../../components/Tabs/Tabs.js";import"../../components/TextField/TextField.js";import"../../components/TextAreaField/TextAreaField.js";const a=({children:a,initialWidth:p=500,minWidth:c=300,maxWidth:d=800,title:l="Draggable Container",description:u="Drag the right edge to resize and see scroll behavior"})=>{const[j,b]=t(p),[C,g]=t(!1),h=n(null),x=n(0),S=n(p),B=o=>{if(!C)return;const e=o.clientX-x.current,t=Math.max(c,Math.min(d,S.current+e));b(t)},y=()=>{g(!1)};return r(()=>{if(C)return document.addEventListener("mousemove",B),document.addEventListener("mouseup",y),document.body.style.cursor="ew-resize",document.body.style.userSelect="none",()=>{document.removeEventListener("mousemove",B),document.removeEventListener("mouseup",y),document.body.style.cursor="",document.body.style.userSelect=""}},[C]),/* @__PURE__ */o("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"16px"},children:[
 /* @__PURE__ */o(i,{justifyContent:"center",maxWidth:"600px",flexDirection:"column",children:[
 /* @__PURE__ */e(s,{as:"h3",size:"sm",foregroundColor:"accentSecondary",children:l}),
 /* @__PURE__ */e(i,{children:/* @__PURE__ */e(m,{children:u})})]}),
-/* @__PURE__ */o("div",{ref:h,style:{width:`${j}px`,border:"var(--alto-sem-border-width-sm) dashed var(--alto-sem-color-border-secondary)",borderRadius:"var(--alto-sem-radius-xs)",padding:"var(--alto-sem-space-lg)",position:"relative",transition:g?"none":"width 0.1s ease"},children:[a,
-/* @__PURE__ */e("button",{"aria-label":"Draggable handle",onMouseDown:o=>{C(!0),x.current=o.clientX,S.current=j,o.preventDefault()},style:{position:"absolute",top:0,right:"-3px",bottom:0,width:"6px",cursor:"ew-resize",background:g?"#3498db":"transparent",borderRadius:"0 8px 8px 0",zIndex:10,transition:"background-color 0.2s ease",border:"none",padding:0},onMouseEnter:o=>{g||(o.currentTarget.style.background="rgba(52, 152, 219, 0.3)")},onMouseLeave:o=>{g||(o.currentTarget.style.background="transparent")}}),
-/* @__PURE__ */e("div",{style:{position:"absolute",top:"50%",right:"-1px",transform:"translateY(-50%)",width:"2px",height:"40px",background:g?"#3498db":"#bdc3c7",borderRadius:"1px",opacity:g?1:.6,transition:"all 0.2s ease",pointerEvents:"none"}})]})]})};export{a as DraggableContainer};
+/* @__PURE__ */o("div",{ref:h,style:{width:`${j}px`,border:"var(--alto-sem-border-width-sm) dashed var(--alto-sem-color-border-secondary)",borderRadius:"var(--alto-sem-radius-xs)",padding:"var(--alto-sem-space-lg)",position:"relative",transition:C?"none":"width 0.1s ease"},children:[a,
+/* @__PURE__ */e("button",{"aria-label":"Draggable handle",onMouseDown:o=>{g(!0),x.current=o.clientX,S.current=j,o.preventDefault()},style:{position:"absolute",top:0,right:"-3px",bottom:0,width:"6px",cursor:"ew-resize",background:C?"#3498db":"transparent",borderRadius:"0 8px 8px 0",zIndex:10,transition:"background-color 0.2s ease",border:"none",padding:0},onMouseEnter:o=>{C||(o.currentTarget.style.background="rgba(52, 152, 219, 0.3)")},onMouseLeave:o=>{C||(o.currentTarget.style.background="transparent")}}),
+/* @__PURE__ */e("div",{style:{position:"absolute",top:"50%",right:"-1px",transform:"translateY(-50%)",width:"2px",height:"40px",background:C?"#3498db":"#bdc3c7",borderRadius:"1px",opacity:C?1:.6,transition:"all 0.2s ease",pointerEvents:"none"}})]})]})};export{a as DraggableContainer};
 //# sourceMappingURL=DraggableContainer.js.map

package/dist/utils/stories/DraggableContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DraggableContainer.js","sources":["../../../src/utils/stories/DraggableContainer.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react';\nimport { Box, Paragraph, Heading } from '../../components';\n\nexport const DraggableContainer = ({\n children,\n initialWidth = 500,\n minWidth = 300,\n maxWidth = 800,\n title = 'Draggable Container',\n description = 'Drag the right edge to resize and see scroll behavior',\n}: {\n children: React.ReactNode;\n initialWidth?: number;\n minWidth?: number;\n maxWidth?: number;\n title?: string;\n description?: string;\n}) => {\n const [width, setWidth] = useState(initialWidth);\n const [isDragging, setIsDragging] = useState(false);\n const containerRef = useRef<HTMLDivElement>(null);\n const dragStartX = useRef<number>(0);\n const dragStartWidth = useRef<number>(initialWidth);\n\n const handleMouseDown = (e: React.MouseEvent) => {\n setIsDragging(true);\n dragStartX.current = e.clientX;\n dragStartWidth.current = width;\n e.preventDefault();\n };\n\n const handleMouseMove = (e: MouseEvent) => {\n if (!isDragging) return;\n\n const deltaX = e.clientX - dragStartX.current;\n const newWidth = Math.max(\n minWidth,\n Math.min(maxWidth, dragStartWidth.current + deltaX),\n );\n setWidth(newWidth);\n };\n\n const handleMouseUp = () => {\n setIsDragging(false);\n };\n\n useEffect(() => {\n if (isDragging) {\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n document.body.style.cursor = 'ew-resize';\n document.body.style.userSelect = 'none';\n\n return () => {\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n document.body.style.cursor = '';\n document.body.style.userSelect = '';\n };\n }\n }, [isDragging]);\n\n return (\n <div\n style={{\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: '16px',\n }}\n >\n <Box justifyContent=\"center\" maxWidth=\"600px\" flexDirection=\"column\">\n <Heading as=\"h3\" size=\"sm\" foregroundColor=\"accentSecondary\">\n {title}\n </Heading>\n <Box>\n <Paragraph>{description}</Paragraph>\n </Box>\n </Box>\n\n <div\n ref={containerRef}\n style={{\n width: `${width}px`,\n border:\n 'var(--alto-sem-border-width-sm) dashed var(--alto-sem-color-border-secondary)',\n borderRadius: 'var(--alto-sem-radius-xs)',\n padding: 'var(--alto-sem-space-lg)',\n position: 'relative',\n transition: isDragging ? 'none' : 'width 0.1s ease',\n }}\n >\n {children}\n\n {/* Drag Handle /}\n <button\n aria-label=\"Draggable handle\"\n onMouseDown={handleMouseDown}\n style={{\n position: 'absolute',\n top: 0,\n right: '-3px',\n bottom: 0,\n width: '6px',\n cursor: 'ew-resize',\n background: isDragging ? '#3498db' : 'transparent',\n borderRadius: '0 8px 8px 0',\n zIndex: 10,\n transition: 'background-color 0.2s ease',\n border: 'none',\n padding: 0,\n }}\n onMouseEnter={(e) => {\n if (!isDragging) {\n e.currentTarget.style.background = 'rgba(52, 152, 219, 0.3)';\n }\n }}\n onMouseLeave={(e) => {\n if (!isDragging) {\n e.currentTarget.style.background = 'transparent';\n }\n }}\n />\n\n {/ Resize indicator */}\n <div\n style={{\n position: 'absolute',\n top: '50%',\n right: '-1px',\n transform: 'translateY(-50%)',\n width: '2px',\n height: '40px',\n background: isDragging ? '#3498db' : '#bdc3c7',\n borderRadius: '1px',\n opacity: isDragging ? 1 : 0.6,\n transition: 'all 0.2s ease',\n pointerEvents: 'none',\n }}\n />\n </div>\n </div>\n );\n};\n"],"names":["DraggableContainer","children","initialWidth","minWidth","maxWidth","title","description","width","setWidth","useState","isDragging","setIsDragging","containerRef","useRef","dragStartX","dragStartWidth","handleMouseMove","e","deltaX","clientX","current","newWidth","Math","max","min","handleMouseUp","useEffect","document","addEventListener","body","style","cursor","userSelect","removeEventListener","jsxs","display","flexDirection","alignItems","gap","Box","justifyContent","jsx","Heading","as","size","foregroundColor","Paragraph","ref","border","borderRadius","padding","position","transition","onMouseDown","preventDefault","top","right","bottom","background","zIndex","onMouseEnter","currentTarget","onMouseLeave","transform","height","opacity","pointerEvents"],"mappings":"~~szGAGO~~,MAAMA,EAAqB,EAChCC,WACAC,eAAe,IACfC,WAAW,IACXC,WAAW,IACXC,QAAQ,sBACRC,cAAc,4DASd,MAAOC,EAAOC,GAAYC,EAASP,IAC5BQ,EAAYC,GAAiBF,GAAS,GACvCG,EAAeC,EAAuB,MACtCC,EAAaD,EAAe,GAC5BE,EAAiBF,EAAeX,GAShCc,EAAmBC,IACvB,IAAKP,EAAY,OAEjB,MAAMQ,EAASD,EAAEE,QAAUL,EAAWM,QAChCC,EAAWC,KAAKC,IACpBpB,EACAmB,KAAKE,IAAIpB,EAAUW,EAAeK,QAAUF,IAE9CV,EAASa,IAGLI,EAAgB,KACpBd,GAAc,IAmBhB,OAhBAe,EAAU,KACR,GAAIhB,EAMF,OALAiB,SAASC,iBAAiB,YAAaZ,GACvCW,SAASC,iBAAiB,UAAWH,GACrCE,SAASE,KAAKC,MAAMC,OAAS,YAC7BJ,SAASE,KAAKC,MAAME,WAAa,OAE1B,KACLL,SAASM,oBAAoB,YAAajB,GAC1CW,SAASM,oBAAoB,UAAWR,GACxCE,SAASE,KAAKC,MAAMC,OAAS,GAC7BJ,SAASE,KAAKC,MAAME,WAAa,KAGpC,CAACtB,mBAGFwB,EAAC,MAAA,CACCJ,MAAO,CACLK,QAAS,OACTC,cAAe,SACfC,WAAY,SACZC,IAAK,QAGPrC,SAAA;eAAAiC,EAACK,GAAIC,eAAe,SAASpC,SAAS,QAAQgC,cAAc,SAC1DnC,SAAA;eAAAwC,EAACC,GAAQC,GAAG,KAAKC,KAAK,KAAKC,gBAAgB,kBACxC5C,SAAAI;eAEHoC,EAACF,EAAA,CACCtC,wBAAAwC,EAACK,EAAA,CAAW7C;eAIhBiC,EAAC,MAAA,CACCa,IAAKnC,EACLkB,MAAO,CACLvB,MAAO,GAAGA,MACVyC,OACE,gFACFC,aAAc,4BACdC,QAAS,2BACTC,SAAU,WACVC,WAAY1C,EAAa,OAAS,mBAGnCT,SAAA,CAAAA;eAGDwC,EAAC,SAAA,CACC,aAAW,mBACXY,YAzEiBpC,IACvBN,GAAc,GACdG,EAAWM,QAAUH,EAAEE,QACvBJ,EAAeK,QAAUb,EACzBU,EAAEqC,kBAsEIxB,MAAO,CACLqB,SAAU,WACVI,IAAK,EACLC,MAAO,OACPC,OAAQ,EACRlD,MAAO,MACPwB,OAAQ,YACR2B,WAAYhD,EAAa,UAAY,cACrCuC,aAAc,cACdU,OAAQ,GACRP,WAAY,6BACZJ,OAAQ,OACRE,QAAS,GAEXU,aAAe3C,IACRP,IACHO,EAAE4C,cAAc/B,MAAM4B,WAAa,4BAGvCI,aAAe7C,IACRP,IACHO,EAAE4C,cAAc/B,MAAM4B,WAAa;eAMzCjB,EAAC,MAAA,CACCX,MAAO,CACLqB,SAAU,WACVI,IAAK,MACLC,MAAO,OACPO,UAAW,mBACXxD,MAAO,MACPyD,OAAQ,OACRN,WAAYhD,EAAa,UAAY,UACrCuC,aAAc,MACdgB,QAASvD,EAAa,EAAI,GAC1B0C,WAAY,gBACZc,cAAe"}
1	+ {"version":3,"file":"DraggableContainer.js","sources":["../../../src/utils/stories/DraggableContainer.tsx"],"sourcesContent":["import { useState, useRef, useEffect } from 'react';\nimport { Box, Paragraph, Heading } from '../../components';\n\nexport const DraggableContainer = ({\n children,\n initialWidth = 500,\n minWidth = 300,\n maxWidth = 800,\n title = 'Draggable Container',\n description = 'Drag the right edge to resize and see scroll behavior',\n}: {\n children: React.ReactNode;\n initialWidth?: number;\n minWidth?: number;\n maxWidth?: number;\n title?: string;\n description?: string;\n}) => {\n const [width, setWidth] = useState(initialWidth);\n const [isDragging, setIsDragging] = useState(false);\n const containerRef = useRef<HTMLDivElement>(null);\n const dragStartX = useRef<number>(0);\n const dragStartWidth = useRef<number>(initialWidth);\n\n const handleMouseDown = (e: React.MouseEvent) => {\n setIsDragging(true);\n dragStartX.current = e.clientX;\n dragStartWidth.current = width;\n e.preventDefault();\n };\n\n const handleMouseMove = (e: MouseEvent) => {\n if (!isDragging) return;\n\n const deltaX = e.clientX - dragStartX.current;\n const newWidth = Math.max(\n minWidth,\n Math.min(maxWidth, dragStartWidth.current + deltaX),\n );\n setWidth(newWidth);\n };\n\n const handleMouseUp = () => {\n setIsDragging(false);\n };\n\n useEffect(() => {\n if (isDragging) {\n document.addEventListener('mousemove', handleMouseMove);\n document.addEventListener('mouseup', handleMouseUp);\n document.body.style.cursor = 'ew-resize';\n document.body.style.userSelect = 'none';\n\n return () => {\n document.removeEventListener('mousemove', handleMouseMove);\n document.removeEventListener('mouseup', handleMouseUp);\n document.body.style.cursor = '';\n document.body.style.userSelect = '';\n };\n }\n }, [isDragging]);\n\n return (\n <div\n style={{\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n gap: '16px',\n }}\n >\n <Box justifyContent=\"center\" maxWidth=\"600px\" flexDirection=\"column\">\n <Heading as=\"h3\" size=\"sm\" foregroundColor=\"accentSecondary\">\n {title}\n </Heading>\n <Box>\n <Paragraph>{description}</Paragraph>\n </Box>\n </Box>\n\n <div\n ref={containerRef}\n style={{\n width: `${width}px`,\n border:\n 'var(--alto-sem-border-width-sm) dashed var(--alto-sem-color-border-secondary)',\n borderRadius: 'var(--alto-sem-radius-xs)',\n padding: 'var(--alto-sem-space-lg)',\n position: 'relative',\n transition: isDragging ? 'none' : 'width 0.1s ease',\n }}\n >\n {children}\n\n {/* Drag Handle /}\n <button\n aria-label=\"Draggable handle\"\n onMouseDown={handleMouseDown}\n style={{\n position: 'absolute',\n top: 0,\n right: '-3px',\n bottom: 0,\n width: '6px',\n cursor: 'ew-resize',\n background: isDragging ? '#3498db' : 'transparent',\n borderRadius: '0 8px 8px 0',\n zIndex: 10,\n transition: 'background-color 0.2s ease',\n border: 'none',\n padding: 0,\n }}\n onMouseEnter={(e) => {\n if (!isDragging) {\n e.currentTarget.style.background = 'rgba(52, 152, 219, 0.3)';\n }\n }}\n onMouseLeave={(e) => {\n if (!isDragging) {\n e.currentTarget.style.background = 'transparent';\n }\n }}\n />\n\n {/ Resize indicator */}\n <div\n style={{\n position: 'absolute',\n top: '50%',\n right: '-1px',\n transform: 'translateY(-50%)',\n width: '2px',\n height: '40px',\n background: isDragging ? '#3498db' : '#bdc3c7',\n borderRadius: '1px',\n opacity: isDragging ? 1 : 0.6,\n transition: 'all 0.2s ease',\n pointerEvents: 'none',\n }}\n />\n </div>\n </div>\n );\n};\n"],"names":["DraggableContainer","children","initialWidth","minWidth","maxWidth","title","description","width","setWidth","useState","isDragging","setIsDragging","containerRef","useRef","dragStartX","dragStartWidth","handleMouseMove","e","deltaX","clientX","current","newWidth","Math","max","min","handleMouseUp","useEffect","document","addEventListener","body","style","cursor","userSelect","removeEventListener","jsxs","display","flexDirection","alignItems","gap","Box","justifyContent","jsx","Heading","as","size","foregroundColor","Paragraph","ref","border","borderRadius","padding","position","transition","onMouseDown","preventDefault","top","right","bottom","background","zIndex","onMouseEnter","currentTarget","onMouseLeave","transform","height","opacity","pointerEvents"],"mappings":"s4GAGO,MAAMA,EAAqB,EAChCC,WACAC,eAAe,IACfC,WAAW,IACXC,WAAW,IACXC,QAAQ,sBACRC,cAAc,4DASd,MAAOC,EAAOC,GAAYC,EAASP,IAC5BQ,EAAYC,GAAiBF,GAAS,GACvCG,EAAeC,EAAuB,MACtCC,EAAaD,EAAe,GAC5BE,EAAiBF,EAAeX,GAShCc,EAAmBC,IACvB,IAAKP,EAAY,OAEjB,MAAMQ,EAASD,EAAEE,QAAUL,EAAWM,QAChCC,EAAWC,KAAKC,IACpBpB,EACAmB,KAAKE,IAAIpB,EAAUW,EAAeK,QAAUF,IAE9CV,EAASa,IAGLI,EAAgB,KACpBd,GAAc,IAmBhB,OAhBAe,EAAU,KACR,GAAIhB,EAMF,OALAiB,SAASC,iBAAiB,YAAaZ,GACvCW,SAASC,iBAAiB,UAAWH,GACrCE,SAASE,KAAKC,MAAMC,OAAS,YAC7BJ,SAASE,KAAKC,MAAME,WAAa,OAE1B,KACLL,SAASM,oBAAoB,YAAajB,GAC1CW,SAASM,oBAAoB,UAAWR,GACxCE,SAASE,KAAKC,MAAMC,OAAS,GAC7BJ,SAASE,KAAKC,MAAME,WAAa,KAGpC,CAACtB,mBAGFwB,EAAC,MAAA,CACCJ,MAAO,CACLK,QAAS,OACTC,cAAe,SACfC,WAAY,SACZC,IAAK,QAGPrC,SAAA;eAAAiC,EAACK,GAAIC,eAAe,SAASpC,SAAS,QAAQgC,cAAc,SAC1DnC,SAAA;eAAAwC,EAACC,GAAQC,GAAG,KAAKC,KAAK,KAAKC,gBAAgB,kBACxC5C,SAAAI;eAEHoC,EAACF,EAAA,CACCtC,wBAAAwC,EAACK,EAAA,CAAW7C;eAIhBiC,EAAC,MAAA,CACCa,IAAKnC,EACLkB,MAAO,CACLvB,MAAO,GAAGA,MACVyC,OACE,gFACFC,aAAc,4BACdC,QAAS,2BACTC,SAAU,WACVC,WAAY1C,EAAa,OAAS,mBAGnCT,SAAA,CAAAA;eAGDwC,EAAC,SAAA,CACC,aAAW,mBACXY,YAzEiBpC,IACvBN,GAAc,GACdG,EAAWM,QAAUH,EAAEE,QACvBJ,EAAeK,QAAUb,EACzBU,EAAEqC,kBAsEIxB,MAAO,CACLqB,SAAU,WACVI,IAAK,EACLC,MAAO,OACPC,OAAQ,EACRlD,MAAO,MACPwB,OAAQ,YACR2B,WAAYhD,EAAa,UAAY,cACrCuC,aAAc,cACdU,OAAQ,GACRP,WAAY,6BACZJ,OAAQ,OACRE,QAAS,GAEXU,aAAe3C,IACRP,IACHO,EAAE4C,cAAc/B,MAAM4B,WAAa,4BAGvCI,aAAe7C,IACRP,IACHO,EAAE4C,cAAc/B,MAAM4B,WAAa;eAMzCjB,EAAC,MAAA,CACCX,MAAO,CACLqB,SAAU,WACVI,IAAK,MACLC,MAAO,OACPO,UAAW,mBACXxD,MAAO,MACPyD,OAAQ,OACRN,WAAYhD,EAAa,UAAY,UACrCuC,aAAc,MACdgB,QAASvD,EAAa,EAAI,GAC1B0C,WAAY,gBACZc,cAAe"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@alto-avios/alto-ui",
-  "version": "5.8.1",
+  "version": "5.9.0",
   "description": "A react component library for Alto Design System",
   "author": {
     "name": "Ian Caldwell IAGL",