@deriv-com/dds-marketing 0.1.0 → 0.2.0

package/dist/components/index.d.ts

@@ -1 +1,114 @@
-export {};
+export { Accordion, type AccordionProps } from './core/accordion/Accordion.js';
+export { accordionParts, accordionDefaults } from './core/accordion/Accordion.types.js';
+export { AccordionItem, type AccordionItemProps } from './core/accordion-item/AccordionItem.js';
+export { accordionItemParts, accordionItemDefaults } from './core/accordion-item/AccordionItem.types.js';
+export { AspectRatio, type AspectRatioProps } from './layout/aspect-ratio/AspectRatio.js';
+export { aspectRatioParts, aspectRatioDefaults } from './layout/aspect-ratio/AspectRatio.types.js';
+export { Badge, type BadgeProps } from './core/badge/Badge.js';
+export { badgeParts, badgeDefaults } from './core/badge/Badge.types.js';
+export { BottomSheet, type BottomSheetProps } from './core/bottom-sheet/BottomSheet.js';
+export { bottomSheetParts, bottomSheetDefaults } from './core/bottom-sheet/BottomSheet.types.js';
+export { Breadcrumb, type BreadcrumbProps } from './core/breadcrumb/Breadcrumb.js';
+export { breadcrumbParts, breadcrumbDefaults } from './core/breadcrumb/Breadcrumb.types.js';
+export { BreadcrumbItem, type BreadcrumbItemProps } from './core/breadcrumb-item/BreadcrumbItem.js';
+export { breadcrumbItemParts, breadcrumbItemDefaults } from './core/breadcrumb-item/BreadcrumbItem.types.js';
+export { Button, type ButtonProps } from './core/button/Button.js';
+export { buttonParts, buttonDefaults } from './core/button/Button.types.js';
+export { ButtonIcon, type ButtonIconProps } from './core/button-icon/ButtonIcon.js';
+export { buttonIconParts, buttonIconDefaults } from './core/button-icon/ButtonIcon.types.js';
+export { Card, type CardProps } from './core/card/Card.js';
+export { cardParts, cardDefaults } from './core/card/Card.types.js';
+export { CardBody, type CardBodyProps } from './core/card-body/CardBody.js';
+export { cardBodyParts, cardBodyDefaults } from './core/card-body/CardBody.types.js';
+export { CardButton, type CardButtonProps } from './core/card-button/CardButton.js';
+export { cardButtonParts, cardButtonDefaults } from './core/card-button/CardButton.types.js';
+export { Checkbox, type CheckboxProps } from './core/checkbox/Checkbox.js';
+export { checkboxParts, checkboxDefaults } from './core/checkbox/Checkbox.types.js';
+export { Divider, type DividerProps } from './core/divider/Divider.js';
+export { dividerParts, dividerDefaults } from './core/divider/Divider.types.js';
+export { DropdownMenu, type DropdownMenuProps } from './core/dropdown-menu/DropdownMenu.js';
+export { dropdownMenuParts, dropdownMenuDefaults } from './core/dropdown-menu/DropdownMenu.types.js';
+export { FilterChip, type FilterChipProps } from './core/filter-chip/FilterChip.js';
+export { filterChipParts, filterChipDefaults } from './core/filter-chip/FilterChip.types.js';
+export { Footer, type FooterProps } from './core/footer/Footer.js';
+export { footerParts, footerDefaults } from './core/footer/Footer.types.js';
+export { FooterGroup, type FooterGroupProps } from './core/footer-group/FooterGroup.js';
+export { footerGroupParts, footerGroupDefaults } from './core/footer-group/FooterGroup.types.js';
+export { Grid, type GridProps } from './layout/grid/Grid.js';
+export { gridParts, gridDefaults } from './layout/grid/Grid.types.js';
+export { Icon, type IconProps } from './core/icon/Icon.js';
+export { iconParts, iconDefaults } from './core/icon/Icon.types.js';
+export { Link, type LinkProps } from './core/link/Link.js';
+export { linkParts, linkDefaults } from './core/link/Link.types.js';
+export { MenuItem, type MenuItemProps } from './core/menu-item/MenuItem.js';
+export { menuItemParts, menuItemDefaults } from './core/menu-item/MenuItem.types.js';
+export { Navbar, type NavbarProps } from './core/navbar/Navbar.js';
+export { navbarParts, navbarDefaults } from './core/navbar/Navbar.types.js';
+export { NavbarItem, type NavbarItemProps } from './core/navbar-item/NavbarItem.js';
+export { navbarItemParts, navbarItemDefaults } from './core/navbar-item/NavbarItem.types.js';
+export { NavbarMenu, type NavbarMenuProps } from './core/navbar-menu/NavbarMenu.js';
+export { navbarMenuParts, navbarMenuDefaults } from './core/navbar-menu/NavbarMenu.types.js';
+export { NavbarMenuGroup, type NavbarMenuGroupProps } from './core/navbar-menu-group/NavbarMenuGroup.js';
+export { navbarMenuGroupParts } from './core/navbar-menu-group/NavbarMenuGroup.types.js';
+export { NavbarPanel, type NavbarPanelProps } from './core/navbar-panel/NavbarPanel.js';
+export { navbarPanelParts } from './core/navbar-panel/NavbarPanel.types.js';
+export { useNavbarPanel } from './core/navbar-panel/use-navbar-panel.js';
+export { NavbarSwitcher, type NavbarSwitcherProps } from './core/navbar-switcher/NavbarSwitcher.js';
+export { navbarSwitcherParts, navbarSwitcherDefaults } from './core/navbar-switcher/NavbarSwitcher.types.js';
+export { NavbarSwitcherOption, type NavbarSwitcherOptionProps } from './core/navbar-switcher-option/NavbarSwitcherOption.js';
+export { navbarSwitcherOptionParts, navbarSwitcherOptionDefaults } from './core/navbar-switcher-option/NavbarSwitcherOption.types.js';
+export { Option, type OptionProps } from './core/option/Option.js';
+export { optionParts, optionDefaults } from './core/option/Option.types.js';
+export { Pagination, type PaginationProps } from './core/pagination/Pagination.js';
+export { paginationParts, paginationDefaults } from './core/pagination/Pagination.types.js';
+export { RemovableChip, type RemovableChipProps } from './core/removable-chip/RemovableChip.js';
+export { removableChipParts, removableChipDefaults } from './core/removable-chip/RemovableChip.types.js';
+export { Row, type RowProps } from './layout/row/Row.js';
+export { rowParts, rowDefaults } from './layout/row/Row.types.js';
+export { Scroller, type ScrollerProps } from './layout/scroller/Scroller.js';
+export { scrollerParts, scrollerDefaults } from './layout/scroller/Scroller.types.js';
+export { SearchInput, type SearchInputProps } from './core/search-input/SearchInput.js';
+export { searchInputParts, searchInputDefaults } from './core/search-input/SearchInput.types.js';
+export { SegmentedControl, type SegmentedControlProps } from './core/segmented-control/SegmentedControl.js';
+export { segmentedControlParts, segmentedControlDefaults } from './core/segmented-control/SegmentedControl.types.js';
+export { SegmentedControlItem, type SegmentedControlItemProps } from './core/segmented-control-item/SegmentedControlItem.js';
+export { segmentedControlItemParts, segmentedControlItemDefaults } from './core/segmented-control-item/SegmentedControlItem.types.js';
+export { Select, type SelectProps } from './core/select/Select.js';
+export { selectParts, selectDefaults } from './core/select/Select.types.js';
+export { SelectChip, type SelectChipProps } from './core/select-chip/SelectChip.js';
+export { selectChipParts, selectChipDefaults } from './core/select-chip/SelectChip.types.js';
+export { Spinner, type SpinnerProps } from './core/spinner/Spinner.js';
+export { spinnerParts, spinnerDefaults } from './core/spinner/Spinner.types.js';
+export { Stack, type StackProps } from './layout/stack/Stack.js';
+export { stackParts, stackDefaults } from './layout/stack/Stack.types.js';
+export { StatusDot, type StatusDotProps } from './core/status-dot/StatusDot.js';
+export { statusDotParts, statusDotDefaults } from './core/status-dot/StatusDot.types.js';
+export { SubdomainNavbar, type SubdomainNavbarProps } from './core/subdomain-navbar/SubdomainNavbar.js';
+export { subdomainNavbarParts, subdomainNavbarDefaults } from './core/subdomain-navbar/SubdomainNavbar.types.js';
+export { Tab, type TabProps } from './core/tab/Tab.js';
+export { tabParts, tabDefaults } from './core/tab/Tab.types.js';
+export { Table, type TableProps } from './core/table/Table.js';
+export { tableParts, tableDefaults } from './core/table/Table.types.js';
+export { useTableSort, type TableSort, type TableSortDirection } from './core/table/use-table-sort.js';
+export { TableBody, type TableBodyProps } from './core/table-body/TableBody.js';
+export { tableBodyParts, tableBodyDefaults } from './core/table-body/TableBody.types.js';
+export { TableCell, type TableCellProps } from './core/table-cell/TableCell.js';
+export { tableCellParts, tableCellDefaults } from './core/table-cell/TableCell.types.js';
+export { TableHead, type TableHeadProps } from './core/table-head/TableHead.js';
+export { tableHeadParts, tableHeadDefaults } from './core/table-head/TableHead.types.js';
+export { TableHeaderCell, type TableHeaderCellProps } from './core/table-header-cell/TableHeaderCell.js';
+export { tableHeaderCellParts, tableHeaderCellDefaults } from './core/table-header-cell/TableHeaderCell.types.js';
+export { TableRow, type TableRowProps } from './core/table-row/TableRow.js';
+export { tableRowParts, tableRowDefaults } from './core/table-row/TableRow.types.js';
+export { TabList, type TabListProps } from './core/tab-list/TabList.js';
+export { tabListParts } from './core/tab-list/TabList.types.js';
+export { TextArea, type TextAreaProps } from './core/text-area/TextArea.js';
+export { textAreaParts, textAreaDefaults } from './core/text-area/TextArea.types.js';
+export { TextInput, type TextInputProps } from './core/text-input/TextInput.js';
+export { textInputParts, textInputDefaults } from './core/text-input/TextInput.types.js';
+export { Tooltip, type TooltipProps } from './core/tooltip/Tooltip.js';
+export { tooltipParts, tooltipDefaults } from './core/tooltip/Tooltip.types.js';
+export { useTooltip, useTooltipDefaults, type UseTooltipOptions, type UseTooltipResult } from './core/tooltip/use-tooltip.js';
+export { TooltipAnchor, type TooltipAnchorProps } from './core/tooltip/TooltipAnchor.js';
+export { Typography, type TypographyProps } from './core/typography/Typography.js';
+export { typographyParts, typographyDefaults } from './core/typography/Typography.types.js';

package/dist/components/index.js

@@ -1,2 +1,115 @@
-// GENERATED from components/*/*.contract.json. Do not edit.
-export {};
+// GENERATED from components/**/*.contract.json. Do not edit.
+export { Accordion } from './core/accordion/Accordion.js';
+export { accordionParts, accordionDefaults } from './core/accordion/Accordion.types.js';
+export { AccordionItem } from './core/accordion-item/AccordionItem.js';
+export { accordionItemParts, accordionItemDefaults } from './core/accordion-item/AccordionItem.types.js';
+export { AspectRatio } from './layout/aspect-ratio/AspectRatio.js';
+export { aspectRatioParts, aspectRatioDefaults } from './layout/aspect-ratio/AspectRatio.types.js';
+export { Badge } from './core/badge/Badge.js';
+export { badgeParts, badgeDefaults } from './core/badge/Badge.types.js';
+export { BottomSheet } from './core/bottom-sheet/BottomSheet.js';
+export { bottomSheetParts, bottomSheetDefaults } from './core/bottom-sheet/BottomSheet.types.js';
+export { Breadcrumb } from './core/breadcrumb/Breadcrumb.js';
+export { breadcrumbParts, breadcrumbDefaults } from './core/breadcrumb/Breadcrumb.types.js';
+export { BreadcrumbItem } from './core/breadcrumb-item/BreadcrumbItem.js';
+export { breadcrumbItemParts, breadcrumbItemDefaults } from './core/breadcrumb-item/BreadcrumbItem.types.js';
+export { Button } from './core/button/Button.js';
+export { buttonParts, buttonDefaults } from './core/button/Button.types.js';
+export { ButtonIcon } from './core/button-icon/ButtonIcon.js';
+export { buttonIconParts, buttonIconDefaults } from './core/button-icon/ButtonIcon.types.js';
+export { Card } from './core/card/Card.js';
+export { cardParts, cardDefaults } from './core/card/Card.types.js';
+export { CardBody } from './core/card-body/CardBody.js';
+export { cardBodyParts, cardBodyDefaults } from './core/card-body/CardBody.types.js';
+export { CardButton } from './core/card-button/CardButton.js';
+export { cardButtonParts, cardButtonDefaults } from './core/card-button/CardButton.types.js';
+export { Checkbox } from './core/checkbox/Checkbox.js';
+export { checkboxParts, checkboxDefaults } from './core/checkbox/Checkbox.types.js';
+export { Divider } from './core/divider/Divider.js';
+export { dividerParts, dividerDefaults } from './core/divider/Divider.types.js';
+export { DropdownMenu } from './core/dropdown-menu/DropdownMenu.js';
+export { dropdownMenuParts, dropdownMenuDefaults } from './core/dropdown-menu/DropdownMenu.types.js';
+export { FilterChip } from './core/filter-chip/FilterChip.js';
+export { filterChipParts, filterChipDefaults } from './core/filter-chip/FilterChip.types.js';
+export { Footer } from './core/footer/Footer.js';
+export { footerParts, footerDefaults } from './core/footer/Footer.types.js';
+export { FooterGroup } from './core/footer-group/FooterGroup.js';
+export { footerGroupParts, footerGroupDefaults } from './core/footer-group/FooterGroup.types.js';
+export { Grid } from './layout/grid/Grid.js';
+export { gridParts, gridDefaults } from './layout/grid/Grid.types.js';
+export { Icon } from './core/icon/Icon.js';
+export { iconParts, iconDefaults } from './core/icon/Icon.types.js';
+export { Link } from './core/link/Link.js';
+export { linkParts, linkDefaults } from './core/link/Link.types.js';
+export { MenuItem } from './core/menu-item/MenuItem.js';
+export { menuItemParts, menuItemDefaults } from './core/menu-item/MenuItem.types.js';
+export { Navbar } from './core/navbar/Navbar.js';
+export { navbarParts, navbarDefaults } from './core/navbar/Navbar.types.js';
+export { NavbarItem } from './core/navbar-item/NavbarItem.js';
+export { navbarItemParts, navbarItemDefaults } from './core/navbar-item/NavbarItem.types.js';
+export { NavbarMenu } from './core/navbar-menu/NavbarMenu.js';
+export { navbarMenuParts, navbarMenuDefaults } from './core/navbar-menu/NavbarMenu.types.js';
+export { NavbarMenuGroup } from './core/navbar-menu-group/NavbarMenuGroup.js';
+export { navbarMenuGroupParts } from './core/navbar-menu-group/NavbarMenuGroup.types.js';
+export { NavbarPanel } from './core/navbar-panel/NavbarPanel.js';
+export { navbarPanelParts } from './core/navbar-panel/NavbarPanel.types.js';
+export { useNavbarPanel } from './core/navbar-panel/use-navbar-panel.js';
+export { NavbarSwitcher } from './core/navbar-switcher/NavbarSwitcher.js';
+export { navbarSwitcherParts, navbarSwitcherDefaults } from './core/navbar-switcher/NavbarSwitcher.types.js';
+export { NavbarSwitcherOption } from './core/navbar-switcher-option/NavbarSwitcherOption.js';
+export { navbarSwitcherOptionParts, navbarSwitcherOptionDefaults } from './core/navbar-switcher-option/NavbarSwitcherOption.types.js';
+export { Option } from './core/option/Option.js';
+export { optionParts, optionDefaults } from './core/option/Option.types.js';
+export { Pagination } from './core/pagination/Pagination.js';
+export { paginationParts, paginationDefaults } from './core/pagination/Pagination.types.js';
+export { RemovableChip } from './core/removable-chip/RemovableChip.js';
+export { removableChipParts, removableChipDefaults } from './core/removable-chip/RemovableChip.types.js';
+export { Row } from './layout/row/Row.js';
+export { rowParts, rowDefaults } from './layout/row/Row.types.js';
+export { Scroller } from './layout/scroller/Scroller.js';
+export { scrollerParts, scrollerDefaults } from './layout/scroller/Scroller.types.js';
+export { SearchInput } from './core/search-input/SearchInput.js';
+export { searchInputParts, searchInputDefaults } from './core/search-input/SearchInput.types.js';
+export { SegmentedControl } from './core/segmented-control/SegmentedControl.js';
+export { segmentedControlParts, segmentedControlDefaults } from './core/segmented-control/SegmentedControl.types.js';
+export { SegmentedControlItem } from './core/segmented-control-item/SegmentedControlItem.js';
+export { segmentedControlItemParts, segmentedControlItemDefaults } from './core/segmented-control-item/SegmentedControlItem.types.js';
+export { Select } from './core/select/Select.js';
+export { selectParts, selectDefaults } from './core/select/Select.types.js';
+export { SelectChip } from './core/select-chip/SelectChip.js';
+export { selectChipParts, selectChipDefaults } from './core/select-chip/SelectChip.types.js';
+export { Spinner } from './core/spinner/Spinner.js';
+export { spinnerParts, spinnerDefaults } from './core/spinner/Spinner.types.js';
+export { Stack } from './layout/stack/Stack.js';
+export { stackParts, stackDefaults } from './layout/stack/Stack.types.js';
+export { StatusDot } from './core/status-dot/StatusDot.js';
+export { statusDotParts, statusDotDefaults } from './core/status-dot/StatusDot.types.js';
+export { SubdomainNavbar } from './core/subdomain-navbar/SubdomainNavbar.js';
+export { subdomainNavbarParts, subdomainNavbarDefaults } from './core/subdomain-navbar/SubdomainNavbar.types.js';
+export { Tab } from './core/tab/Tab.js';
+export { tabParts, tabDefaults } from './core/tab/Tab.types.js';
+export { Table } from './core/table/Table.js';
+export { tableParts, tableDefaults } from './core/table/Table.types.js';
+export { useTableSort } from './core/table/use-table-sort.js';
+export { TableBody } from './core/table-body/TableBody.js';
+export { tableBodyParts, tableBodyDefaults } from './core/table-body/TableBody.types.js';
+export { TableCell } from './core/table-cell/TableCell.js';
+export { tableCellParts, tableCellDefaults } from './core/table-cell/TableCell.types.js';
+export { TableHead } from './core/table-head/TableHead.js';
+export { tableHeadParts, tableHeadDefaults } from './core/table-head/TableHead.types.js';
+export { TableHeaderCell } from './core/table-header-cell/TableHeaderCell.js';
+export { tableHeaderCellParts, tableHeaderCellDefaults } from './core/table-header-cell/TableHeaderCell.types.js';
+export { TableRow } from './core/table-row/TableRow.js';
+export { tableRowParts, tableRowDefaults } from './core/table-row/TableRow.types.js';
+export { TabList } from './core/tab-list/TabList.js';
+export { tabListParts } from './core/tab-list/TabList.types.js';
+export { TextArea } from './core/text-area/TextArea.js';
+export { textAreaParts, textAreaDefaults } from './core/text-area/TextArea.types.js';
+export { TextInput } from './core/text-input/TextInput.js';
+export { textInputParts, textInputDefaults } from './core/text-input/TextInput.types.js';
+export { Tooltip } from './core/tooltip/Tooltip.js';
+export { tooltipParts, tooltipDefaults } from './core/tooltip/Tooltip.types.js';
+export { useTooltip, useTooltipDefaults } from './core/tooltip/use-tooltip.js';
+export { TooltipAnchor } from './core/tooltip/TooltipAnchor.js';
+export { Typography } from './core/typography/Typography.js';
+export { typographyParts, typographyDefaults } from './core/typography/Typography.types.js';

package/dist/components/layout/aspect-ratio/AspectRatio.css

@@ -0,0 +1,29 @@
+/* GENERATED from aspectratio.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-aspectratio {
+  box-sizing: border-box;
+  display: block;
+  inline-size: 100%;
+  overflow: hidden;
+}
+
+:where([data-dds-context="marketing"]) .dds-aspectratio[data-ratio="landscape"] {
+  aspect-ratio: var(--aspect-landscape);
+}
+
+:where([data-dds-context="marketing"]) .dds-aspectratio[data-ratio="portrait"] {
+  aspect-ratio: var(--aspect-portrait);
+}
+
+:where([data-dds-context="marketing"]) .dds-aspectratio[data-ratio="square"] {
+  aspect-ratio: var(--aspect-square);
+}
+
+:where([data-dds-context="marketing"]) .dds-aspectratio[data-ratio="ultrawide"] {
+  aspect-ratio: var(--aspect-ultrawide);
+}
+
+:where([data-dds-context="marketing"]) .dds-aspectratio[data-ratio="widescreen"] {
+  aspect-ratio: var(--aspect-widescreen);
+}
+

package/dist/components/layout/aspect-ratio/AspectRatio.d.ts

@@ -0,0 +1,24 @@
+import './AspectRatio.css';
+import './aspect-ratio-impl.css';
+import { type AspectRatioProps } from './AspectRatio.types.js';
+export type { AspectRatioProps };
+/**
+ * A box that holds one shape whatever is put in it.
+ *
+ * It renders one element and decides one thing. The ratio reaches the stylesheet as
+ * an axis rather than a style written here, which is what makes it a shape the system
+ * knows about: one rule per shape, and a variant grid a designer can judge them in.
+ * A free ratio would have to be an inline style — a number cannot be a styling axis,
+ * because an axis emits one rule per value and a number has none to enumerate — and
+ * the component's whole purpose would then be invisible to every gate. CardBody's own
+ * `aspect` is that shape, and its source says so.
+ *
+ * It draws nothing and has no size of its own. A ratio and a width give a height; a
+ * ratio alone gives nothing, so the box is as wide as whatever holds it and as tall as
+ * that width implies. What fills it is stated in the impl sheet, because the child is
+ * whatever the page passed and there is no part here to put a class on.
+ *
+ * The spread goes first, so a consumer can set an id, a test hook or a label and cannot
+ * write over the class or the axis the stylesheet reads.
+ */
+export declare function AspectRatio({ ratio, children, ...rest }: AspectRatioProps): import("react").JSX.Element;

package/dist/components/layout/aspect-ratio/AspectRatio.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './AspectRatio.css';
+import './aspect-ratio-impl.css';
+import { aspectRatioDefaults, aspectRatioParts } from './AspectRatio.types.js';
+/**
+ * A box that holds one shape whatever is put in it.
+ *
+ * It renders one element and decides one thing. The ratio reaches the stylesheet as
+ * an axis rather than a style written here, which is what makes it a shape the system
+ * knows about: one rule per shape, and a variant grid a designer can judge them in.
+ * A free ratio would have to be an inline style — a number cannot be a styling axis,
+ * because an axis emits one rule per value and a number has none to enumerate — and
+ * the component's whole purpose would then be invisible to every gate. CardBody's own
+ * `aspect` is that shape, and its source says so.
+ *
+ * It draws nothing and has no size of its own. A ratio and a width give a height; a
+ * ratio alone gives nothing, so the box is as wide as whatever holds it and as tall as
+ * that width implies. What fills it is stated in the impl sheet, because the child is
+ * whatever the page passed and there is no part here to put a class on.
+ *
+ * The spread goes first, so a consumer can set an id, a test hook or a label and cannot
+ * write over the class or the axis the stylesheet reads.
+ */
+export function AspectRatio({ ratio = aspectRatioDefaults.ratio, children, ...rest }) {
+    return (_jsx("div", { ...rest, className: aspectRatioParts.root, "data-ratio": ratio, children: children }));
+}

package/dist/components/layout/aspect-ratio/AspectRatio.types.d.ts

@@ -0,0 +1,22 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface AspectRatioOwnProps {
+    /**
+     * `portrait` — Taller than wide, for a picture read on a phone where the width is the constraint — a card whose image carries the card, a person, a product standing up. Four by five rather than anything narrower: past that the image takes the whole screen and the copy under it is below the fold
+     * `square` — Equal sides, for a set that repeats — a grid of logos, a row of market tiles, an avatar’s frame. The one shape a grid can tile without the rows disagreeing, and the only one that reads the same in a column as in a row
+     * `landscape` — Wider than tall and barely so — the shape a photograph or a screenshot arrives in before anything crops it. Reach for it where the picture was not composed for a wider slot and losing its top and foot would cost the subject
+     * `widescreen` — The default, and the shape most moving media already is: an embedded video, a screen recording, a still from one. Sixteen by nine is what a camera and a capture both hand over, so asking for it usually means asking for what the file already was
+     * `ultrawide` — Far wider than it is tall, for a hero or a section break where the picture is scenery rather than subject. Twenty-one by nine crops hard — most of a photograph’s height is gone — so it belongs to art chosen for it rather than to a picture that happens to be there
+     */
+    ratio?: 'portrait' | 'square' | 'landscape' | 'widescreen' | 'ultrawide';
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type AspectRatioProps = AspectRatioOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'ratio'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const aspectRatioParts: {
+    readonly root: "dds-aspectratio";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const aspectRatioDefaults: {
+    readonly ratio: "widescreen";
+};

package/dist/components/layout/aspect-ratio/AspectRatio.types.js

@@ -0,0 +1,7 @@
+// GENERATED from aspect-ratio.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const aspectRatioParts = {
+    root: 'dds-aspectratio',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const aspectRatioDefaults = { ratio: 'widescreen' };

package/dist/components/layout/aspect-ratio/aspect-ratio-impl.css

@@ -0,0 +1,44 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing
+ * specificity, so every override below still ties or beats exactly what it did before.
+ */
+
+/*
+ * What the box holds fills it, which the contract has no way to say.
+ *
+ * The child is whatever the page passed — an `<img>`, an `<iframe>`, a `<video>`, a band of
+ * art — so there is no part here to put a class on, and a rule for it is a relationship
+ * between this element and its own child rather than a property of either. `> *` is the
+ * only way to state it, and it is the same kind of positional fact a table's head states
+ * about its second row.
+ *
+ * `object-fit` is the other half and applies only to the things that have intrinsic
+ * proportions of their own: a picture given a shape it does not have must lose something,
+ * and `cover` is what decides that it loses the overflow rather than the shape. It is a
+ * keyword no token carries — there is no design decision in it, only the answer to which
+ * of two proportions wins — so it belongs here beside the rule that needs it.
+ *
+ * Every side is set rather than just the block one, because a child with a width of its own
+ * would otherwise sit in the corner of a box it was meant to fill, and an image is exactly
+ * that: `<img>` carries its file's dimensions until something says otherwise.
+ */
+:where([data-dds-context="marketing"]) .dds-aspectratio > * {
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+/*
+ * Except an embed, which has nothing to fit.
+ *
+ * `object-fit` is a rule about replaced content with proportions of its own, and an iframe
+ * has none — it is a viewport onto a document that lays itself out. Left in it does nothing
+ * at all, which is harmless, but a border is not: every browser draws one on an iframe by
+ * default, and a box whose whole job is a clean shape should not ship with a line around it
+ * that nobody asked for.
+ */
+:where([data-dds-context="marketing"]) .dds-aspectratio > iframe {
+  border: none;
+}

package/dist/components/layout/grid/Grid.css

@@ -0,0 +1,76 @@
+/* GENERATED from grid.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-grid {
+  box-sizing: border-box;
+  display: grid;
+  min-inline-size: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-align="center"] {
+  align-items: center;
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-align="end"] {
+  align-items: end;
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-align="start"] {
+  align-items: start;
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-align="stretch"] {
+  align-items: stretch;
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-gap="2xl"] {
+  --dds-grid-gap: var(--space-gap-2xl);
+  gap: var(--space-gap-2xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-gap="3xl"] {
+  --dds-grid-gap: var(--space-gap-3xl);
+  gap: var(--space-gap-3xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-gap="lg"] {
+  --dds-grid-gap: var(--space-gap-lg);
+  gap: var(--space-gap-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-gap="md"] {
+  --dds-grid-gap: var(--space-gap-md);
+  gap: var(--space-gap-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-gap="none"] {
+  --dds-grid-gap: var(--space-gap-none);
+  gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-gap="sm"] {
+  --dds-grid-gap: var(--space-gap-sm);
+  gap: var(--space-gap-sm);
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-gap="xl"] {
+  --dds-grid-gap: var(--space-gap-xl);
+  gap: var(--space-gap-xl);
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-gap="xs"] {
+  --dds-grid-gap: var(--space-gap-xs);
+  gap: var(--space-gap-xs);
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-min="lg"] {
+  --dds-grid-track: var(--size-grid-track-lg);
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-min="md"] {
+  --dds-grid-track: var(--size-grid-track-md);
+}
+
+:where([data-dds-context="marketing"]) .dds-grid[data-min="sm"] {
+  --dds-grid-track: var(--size-grid-track-sm);
+}
+

package/dist/components/layout/grid/Grid.d.ts

@@ -0,0 +1,31 @@
+import './Grid.css';
+import './grid-impl.css';
+import { type GridProps } from './Grid.types.js';
+export type { GridProps };
+/**
+ * A field of equal tracks, and one measure between them.
+ *
+ * One element, which is the whole of it. The four axes reach the root as attributes, the
+ * stylesheet reads them there, and the browser does the arranging — there is nothing to compose
+ * and no state to hold. In particular nothing here measures anything: the column count is
+ * resolved by the browser from an expression, not by this component from a width it observed, so
+ * there is no resize listener, no layout effect, and nothing that can be a frame out of date
+ * while the reader drags a window.
+ *
+ * `grid-impl.css` is imported after the generated sheet, which is the order that matters: the
+ * generated rules set the two custom properties the track expression is built from, and the impl
+ * rules read them. Both are `:where()`, so neither wins on specificity and the later file simply
+ * adds the property the earlier one has no way to state.
+ *
+ * The defaults are destructured from the generated `gridDefaults` rather than typed here, so the
+ * attribute the stylesheet matches on cannot drift from the value the contract declares. Every
+ * axis is written to the root unconditionally, including when it holds its default: a rule per
+ * value means there is no bare-element case to fall through to, and `columns` left off would
+ * leave the field with no track expression at all — one column, silently, which looks like a
+ * Stack that forgot what it was.
+ *
+ * The spread goes first, so a consumer can set what is not load-bearing — an id, a data
+ * attribute, a ref — and cannot set what is. `className` is not in the type at all, which is the
+ * point of the component: everything this field can be, it can be through the four props.
+ */
+export declare function Grid({ gap, columns, min, align, children, ...rest }: GridProps): import("react").JSX.Element;

package/dist/components/layout/grid/Grid.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import './Grid.css';
+import './grid-impl.css';
+import { gridDefaults, gridParts } from './Grid.types.js';
+/**
+ * A field of equal tracks, and one measure between them.
+ *
+ * One element, which is the whole of it. The four axes reach the root as attributes, the
+ * stylesheet reads them there, and the browser does the arranging — there is nothing to compose
+ * and no state to hold. In particular nothing here measures anything: the column count is
+ * resolved by the browser from an expression, not by this component from a width it observed, so
+ * there is no resize listener, no layout effect, and nothing that can be a frame out of date
+ * while the reader drags a window.
+ *
+ * `grid-impl.css` is imported after the generated sheet, which is the order that matters: the
+ * generated rules set the two custom properties the track expression is built from, and the impl
+ * rules read them. Both are `:where()`, so neither wins on specificity and the later file simply
+ * adds the property the earlier one has no way to state.
+ *
+ * The defaults are destructured from the generated `gridDefaults` rather than typed here, so the
+ * attribute the stylesheet matches on cannot drift from the value the contract declares. Every
+ * axis is written to the root unconditionally, including when it holds its default: a rule per
+ * value means there is no bare-element case to fall through to, and `columns` left off would
+ * leave the field with no track expression at all — one column, silently, which looks like a
+ * Stack that forgot what it was.
+ *
+ * The spread goes first, so a consumer can set what is not load-bearing — an id, a data
+ * attribute, a ref — and cannot set what is. `className` is not in the type at all, which is the
+ * point of the component: everything this field can be, it can be through the four props.
+ */
+export function Grid({ gap = gridDefaults.gap, columns = gridDefaults.columns, min = gridDefaults.min, align = gridDefaults.align, children, ...rest }) {
+    return (_jsx("div", { ...rest, className: gridParts.root, "data-gap": gap, "data-columns": columns, "data-min": min, "data-align": align, children: children }));
+}

package/dist/components/layout/grid/Grid.types.d.ts

@@ -0,0 +1,48 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+export interface GridOwnProps {
+    /**
+     * `none` — No gap at all, for a field whose cells are meant to read as one object rather than as a set. The only step here that is a decision rather than a measure
+     * `xs` — The tightest gap between related elements, for a field read as one texture rather than as separate cells
+     * `sm` — The step the token names for sibling controls — a field of small tiles, where the tightness makes the set read as one block
+     * `md` — The step the token names for stacked items, taken as a field: cells close enough to be scanned in one pass rather than weighed one at a time
+     * `lg` — The default, and what the token names for feature cards in a grid, footer columns and pricing plans. Reach for this unless the cells are smaller or larger than a card
+     * `xl` — Between the parts of a card, taken as a field — cells that each hold a picture as well as words. Drops one step below 768px, a phone having a third of the width to spend
+     * `2xl` — Between one section of a page and the next, laid out as a field. Drops one step below 768px, a phone having a third of the width to spend
+     * `3xl` — The largest gap, for separating whole movements of a page laid out as a field. Drops one step below 768px, a phone having a third of the width to spend
+     */
+    gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+    /**
+     * `sm` — The narrow floor, for a cell holding a logo, an icon and a word, or one short claim. Six of these clear the page's measure with its gutter still on both sides
+     * `md` — The default floor, for a feature card: a heading and a line or two beneath it. Four fit the page's measure, so a field of three has room to spare
+     * `lg` — The wide floor, for a cell holding a picture as well as words, or a pricing plan with a list under it. Three fit the page's measure and four do not
+     */
+    min?: 'sm' | 'md' | 'lg';
+    /**
+     * `start` — Cells keep their own height and sit against the top of their row, so a short cell beside a tall one ends early rather than being drawn out
+     * `center` — Cells keep their own height and sit in the middle of their row
+     * `end` — Cells keep their own height and sit against the bottom of their row
+     * `stretch` — The default. Every cell takes the full height of its row, so a field of cards finishes level however much is in each — which is the reason most fields are a grid rather than a wrapped line
+     */
+    align?: 'start' | 'center' | 'end' | 'stretch';
+    /**
+     * `2` — Two across — cells that hold enough to be read rather than scanned, or a field beside a picture
+     * `3` — The default, and what most fields of feature cards want. Three is the most a reader takes in as a set rather than as a list
+     * `4` — Four across, for cells holding a claim and a line — a field of benefits, a set of tiles
+     * `6` — Six across, for marks rather than cards — partner logos, payment methods, regulator badges. A field this wide is read as a texture
+     */
+    columns?: '2' | '3' | '4' | '6';
+    /** Allowed: any content */
+    children: ReactNode;
+}
+export type GridProps = GridOwnProps & Omit<HTMLAttributes<HTMLDivElement>, 'className' | 'gap' | 'min' | 'align' | 'columns'>;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const gridParts: {
+    readonly root: "dds-grid";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const gridDefaults: {
+    readonly gap: "lg";
+    readonly min: "md";
+    readonly align: "stretch";
+    readonly columns: "3";
+};

package/dist/components/layout/grid/Grid.types.js

@@ -0,0 +1,7 @@
+// GENERATED from grid.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const gridParts = {
+    root: 'dds-grid',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const gridDefaults = { gap: 'lg', min: 'md', align: 'stretch', columns: '3' };