@astral/ui 0.10.1 → 0.12.0

package/Grid/Grid.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { GridProps } from './types';
-export declare const Grid: ({ container, templateColumns, templateRows, templateAreas, columnSpacing, rowSpacing, spacing, autoColumns, autoRows, autoFlow, column, row, area, children, ...props }: GridProps) => JSX.Element;
+export declare const Grid: ({ container, templateColumns, templateRows, templateAreas, columnSpacing, rowSpacing, spacing, autoColumns, autoRows, autoFlow, column, row, area, component, children, ...props }: GridProps) => JSX.Element;

package/Grid/Grid.js

@@ -26,7 +26,7 @@ exports.Grid = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_1 = require("./styled");
 var Grid = function (_a) {
-    var _b = _a.container, container = _b === void 0 ? false : _b, templateColumns = _a.templateColumns, templateRows = _a.templateRows, templateAreas = _a.templateAreas, columnSpacing = _a.columnSpacing, rowSpacing = _a.rowSpacing, spacing = _a.spacing, autoColumns = _a.autoColumns, autoRows = _a.autoRows, autoFlow = _a.autoFlow, column = _a.column, row = _a.row, area = _a.area, children = _a.children, props = __rest(_a, ["container", "templateColumns", "templateRows", "templateAreas", "columnSpacing", "rowSpacing", "spacing", "autoColumns", "autoRows", "autoFlow", "column", "row", "area", "children"]);
-    return ((0, jsx_runtime_1.jsx)(styled_1.StyledGrid, __assign({ container: container, gridTemplateColumns: templateColumns, gridTemplateRows: templateRows, gridTemplateAreas: templateAreas, columnGap: columnSpacing, rowGap: rowSpacing, gap: spacing, gridAutoColumns: autoColumns, gridAutoRows: autoRows, gridAutoFlow: autoFlow, gridColumn: column, gridRow: row, gridArea: area }, props, { children: children }), void 0));
+    var _b = _a.container, container = _b === void 0 ? false : _b, templateColumns = _a.templateColumns, templateRows = _a.templateRows, templateAreas = _a.templateAreas, columnSpacing = _a.columnSpacing, rowSpacing = _a.rowSpacing, spacing = _a.spacing, autoColumns = _a.autoColumns, autoRows = _a.autoRows, autoFlow = _a.autoFlow, column = _a.column, row = _a.row, area = _a.area, _c = _a.component, component = _c === void 0 ? 'div' : _c, children = _a.children, props = __rest(_a, ["container", "templateColumns", "templateRows", "templateAreas", "columnSpacing", "rowSpacing", "spacing", "autoColumns", "autoRows", "autoFlow", "column", "row", "area", "component", "children"]);
+    return ((0, jsx_runtime_1.jsx)(styled_1.StyledGrid, __assign({ container: container, gridTemplateColumns: templateColumns, gridTemplateRows: templateRows, gridTemplateAreas: templateAreas, columnGap: columnSpacing, rowGap: rowSpacing, gap: spacing, gridAutoColumns: autoColumns, gridAutoRows: autoRows, gridAutoFlow: autoFlow, gridColumn: column, gridRow: row, gridArea: area, component: component }, props, { children: children }), void 0));
 };
 exports.Grid = Grid;

package/Grid/types.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import { CSSProperties, ElementType, ReactNode } from 'react';
 import { Breakpoint } from '@mui/material/styles';
-declare type StyleCSSType<Type extends keyof React.CSSProperties> = React.CSSProperties[Type] | Partial<Record<Breakpoint, React.CSSProperties[Type]>>;
+declare type StyleCSSType<Type extends keyof CSSProperties> = CSSProperties[Type] | Partial<Record<Breakpoint, CSSProperties[Type]>>;
 export declare type GridContainerProps = {
     container?: boolean;
     templateColumns?: StyleCSSType<'gridTemplateColumns'>;
@@ -16,6 +16,7 @@ export declare type GridContainerProps = {
     autoColumns?: StyleCSSType<'gridAutoColumns'>;
     autoRows?: StyleCSSType<'gridAutoRows'>;
     autoFlow?: StyleCSSType<'gridAutoFlow'>;
+    component?: ElementType;
 };
 export declare type GridElementsProps = {
     column?: StyleCSSType<'gridColumn'>;
@@ -25,6 +26,6 @@ export declare type GridElementsProps = {
     alignSelf?: StyleCSSType<'alignSelf'>;
 };
 export declare type GridProps = GridContainerProps & GridElementsProps & {
-    children?: React.ReactNode;
+    children?: ReactNode;
 };
 export {};

package/Placeholder/Placeholder.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PlaceholderProps } from './types';
+export declare const Placeholder: ({ title, imgSrc, imgAlt, description, Actions, }: PlaceholderProps) => JSX.Element;

package/Placeholder/Placeholder.js

@@ -0,0 +1,21 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Placeholder = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_1 = require("./styled");
+var Placeholder = function (_a) {
+    var title = _a.title, imgSrc = _a.imgSrc, imgAlt = _a.imgAlt, description = _a.description, Actions = _a.Actions;
+    return ((0, jsx_runtime_1.jsxs)(styled_1.StyledContainer, { children: [(0, jsx_runtime_1.jsxs)(styled_1.StyledInnerContainer, { children: [imgSrc && (0, jsx_runtime_1.jsx)(styled_1.StyledImage, { src: imgSrc, alt: imgAlt }, void 0), title && (0, jsx_runtime_1.jsx)(styled_1.StyledTitle, __assign({ variant: "h4" }, { children: title }), void 0), description && ((0, jsx_runtime_1.jsx)(styled_1.StyledDescription, __assign({ variant: "ui" }, { children: description }), void 0))] }, void 0), Actions && (0, jsx_runtime_1.jsx)(styled_1.StyledActions, { children: Actions }, void 0)] }, void 0));
+};
+exports.Placeholder = Placeholder;

package/Placeholder/index.d.ts

@@ -0,0 +1 @@
+export * from './Placeholder';

package/Placeholder/index.js

@@ -0,0 +1,13 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Placeholder"), exports);

package/Placeholder/styled.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare const StyledContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledInnerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const StyledTitle: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").TypographyProps<"span", {}>, "variant"> & {
+    variant?: "small" | import("@mui/material").TypographyVariant | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledDescription: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").TypographyProps<"span", {}>, "variant"> & {
+    variant?: "small" | import("@mui/material").TypographyVariant | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledActions: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/Placeholder/styled.js

@@ -0,0 +1,34 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledActions = exports.StyledDescription = exports.StyledTitle = exports.StyledImage = exports.StyledInnerContainer = exports.StyledContainer = void 0;
+var styles_1 = require("../styles");
+var Typography_1 = require("../Typography");
+exports.StyledContainer = styles_1.styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n\n  background-color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(4);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.background.paper;
+});
+exports.StyledInnerContainer = styles_1.styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 384px;\n"], ["\n  width: 384px;\n"])));
+exports.StyledImage = styles_1.styled.img(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  width: auto;\n  height: 162px;\n  margin: auto;\n  margin-bottom: ", ";\n"], ["\n  display: block;\n  width: auto;\n  height: 162px;\n  margin: auto;\n  margin-bottom: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(8);
+});
+exports.StyledTitle = (0, styles_1.styled)(Typography_1.Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-bottom: ", ";\n\n  text-align: center;\n"], ["\n  margin-bottom: ", ";\n\n  text-align: center;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(4);
+});
+exports.StyledDescription = (0, styles_1.styled)(Typography_1.Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n\n  text-align: center;\n"], ["\n  display: block;\n\n  text-align: center;\n"])));
+exports.StyledActions = styles_1.styled.footer(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  margin-top: ", ";\n\n  > * {\n    margin: ", ";\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  margin-top: ", ";\n\n  > * {\n    margin: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(5);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(1);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/Placeholder/types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare type PlaceholderProps = {
+    imgSrc: string;
+    imgAlt: string;
+    title: string;
+    description?: string | ReactNode;
+    Actions?: ReactNode;
+};

package/Placeholder/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/esm/Grid/Grid.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { GridProps } from './types';
-export declare const Grid: ({ container, templateColumns, templateRows, templateAreas, columnSpacing, rowSpacing, spacing, autoColumns, autoRows, autoFlow, column, row, area, children, ...props }: GridProps) => JSX.Element;
+export declare const Grid: ({ container, templateColumns, templateRows, templateAreas, columnSpacing, rowSpacing, spacing, autoColumns, autoRows, autoFlow, column, row, area, component, children, ...props }: GridProps) => JSX.Element;

package/esm/Grid/Grid.js

@@ -23,6 +23,6 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { StyledGrid } from './styled';
 export var Grid = function (_a) {
-    var _b = _a.container, container = _b === void 0 ? false : _b, templateColumns = _a.templateColumns, templateRows = _a.templateRows, templateAreas = _a.templateAreas, columnSpacing = _a.columnSpacing, rowSpacing = _a.rowSpacing, spacing = _a.spacing, autoColumns = _a.autoColumns, autoRows = _a.autoRows, autoFlow = _a.autoFlow, column = _a.column, row = _a.row, area = _a.area, children = _a.children, props = __rest(_a, ["container", "templateColumns", "templateRows", "templateAreas", "columnSpacing", "rowSpacing", "spacing", "autoColumns", "autoRows", "autoFlow", "column", "row", "area", "children"]);
-    return (_jsx(StyledGrid, __assign({ container: container, gridTemplateColumns: templateColumns, gridTemplateRows: templateRows, gridTemplateAreas: templateAreas, columnGap: columnSpacing, rowGap: rowSpacing, gap: spacing, gridAutoColumns: autoColumns, gridAutoRows: autoRows, gridAutoFlow: autoFlow, gridColumn: column, gridRow: row, gridArea: area }, props, { children: children }), void 0));
+    var _b = _a.container, container = _b === void 0 ? false : _b, templateColumns = _a.templateColumns, templateRows = _a.templateRows, templateAreas = _a.templateAreas, columnSpacing = _a.columnSpacing, rowSpacing = _a.rowSpacing, spacing = _a.spacing, autoColumns = _a.autoColumns, autoRows = _a.autoRows, autoFlow = _a.autoFlow, column = _a.column, row = _a.row, area = _a.area, _c = _a.component, component = _c === void 0 ? 'div' : _c, children = _a.children, props = __rest(_a, ["container", "templateColumns", "templateRows", "templateAreas", "columnSpacing", "rowSpacing", "spacing", "autoColumns", "autoRows", "autoFlow", "column", "row", "area", "component", "children"]);
+    return (_jsx(StyledGrid, __assign({ container: container, gridTemplateColumns: templateColumns, gridTemplateRows: templateRows, gridTemplateAreas: templateAreas, columnGap: columnSpacing, rowGap: rowSpacing, gap: spacing, gridAutoColumns: autoColumns, gridAutoRows: autoRows, gridAutoFlow: autoFlow, gridColumn: column, gridRow: row, gridArea: area, component: component }, props, { children: children }), void 0));
 };

package/esm/Grid/types.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
+import { CSSProperties, ElementType, ReactNode } from 'react';
 import { Breakpoint } from '@mui/material/styles';
-declare type StyleCSSType<Type extends keyof React.CSSProperties> = React.CSSProperties[Type] | Partial<Record<Breakpoint, React.CSSProperties[Type]>>;
+declare type StyleCSSType<Type extends keyof CSSProperties> = CSSProperties[Type] | Partial<Record<Breakpoint, CSSProperties[Type]>>;
 export declare type GridContainerProps = {
     container?: boolean;
     templateColumns?: StyleCSSType<'gridTemplateColumns'>;
@@ -16,6 +16,7 @@ export declare type GridContainerProps = {
     autoColumns?: StyleCSSType<'gridAutoColumns'>;
     autoRows?: StyleCSSType<'gridAutoRows'>;
     autoFlow?: StyleCSSType<'gridAutoFlow'>;
+    component?: ElementType;
 };
 export declare type GridElementsProps = {
     column?: StyleCSSType<'gridColumn'>;
@@ -25,6 +26,6 @@ export declare type GridElementsProps = {
     alignSelf?: StyleCSSType<'alignSelf'>;
 };
 export declare type GridProps = GridContainerProps & GridElementsProps & {
-    children?: React.ReactNode;
+    children?: ReactNode;
 };
 export {};

package/esm/Placeholder/Placeholder.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { PlaceholderProps } from './types';
+export declare const Placeholder: ({ title, imgSrc, imgAlt, description, Actions, }: PlaceholderProps) => JSX.Element;

package/esm/Placeholder/Placeholder.js

@@ -0,0 +1,17 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { StyledActions, StyledContainer, StyledDescription, StyledImage, StyledInnerContainer, StyledTitle, } from './styled';
+export var Placeholder = function (_a) {
+    var title = _a.title, imgSrc = _a.imgSrc, imgAlt = _a.imgAlt, description = _a.description, Actions = _a.Actions;
+    return (_jsxs(StyledContainer, { children: [_jsxs(StyledInnerContainer, { children: [imgSrc && _jsx(StyledImage, { src: imgSrc, alt: imgAlt }, void 0), title && _jsx(StyledTitle, __assign({ variant: "h4" }, { children: title }), void 0), description && (_jsx(StyledDescription, __assign({ variant: "ui" }, { children: description }), void 0))] }, void 0), Actions && _jsx(StyledActions, { children: Actions }, void 0)] }, void 0));
+};

package/esm/Placeholder/index.d.ts

@@ -0,0 +1 @@
+export * from './Placeholder';

package/esm/Placeholder/index.js

@@ -0,0 +1 @@
+export * from './Placeholder';

package/esm/Placeholder/styled.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+export declare const StyledContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledInnerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledImage: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
+export declare const StyledTitle: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").TypographyProps<"span", {}>, "variant"> & {
+    variant?: "small" | import("@mui/material").TypographyVariant | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledDescription: import("@emotion/styled").StyledComponent<Omit<import("@mui/material").TypographyProps<"span", {}>, "variant"> & {
+    variant?: "small" | import("@mui/material").TypographyVariant | "h7" | "h8" | "h9" | "ui" | "link" | "pointer" | "code" | undefined;
+} & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const StyledActions: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/esm/Placeholder/styled.js

@@ -0,0 +1,31 @@
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+import { styled } from '../styles';
+import { Typography } from '../Typography';
+export var StyledContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n\n  background-color: ", ";\n"], ["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  padding: ", ";\n\n  background-color: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(4);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.palette.background.paper;
+});
+export var StyledInnerContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  width: 384px;\n"], ["\n  width: 384px;\n"])));
+export var StyledImage = styled.img(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: block;\n  width: auto;\n  height: 162px;\n  margin: auto;\n  margin-bottom: ", ";\n"], ["\n  display: block;\n  width: auto;\n  height: 162px;\n  margin: auto;\n  margin-bottom: ", ";\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(8);
+});
+export var StyledTitle = styled(Typography)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  margin-bottom: ", ";\n\n  text-align: center;\n"], ["\n  margin-bottom: ", ";\n\n  text-align: center;\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(4);
+});
+export var StyledDescription = styled(Typography)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: block;\n\n  text-align: center;\n"], ["\n  display: block;\n\n  text-align: center;\n"])));
+export var StyledActions = styled.footer(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  margin-top: ", ";\n\n  > * {\n    margin: ", ";\n  }\n"], ["\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  margin-top: ", ";\n\n  > * {\n    margin: ", ";\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(5);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.spacing(1);
+});
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/esm/Placeholder/types.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export declare type PlaceholderProps = {
+    imgSrc: string;
+    imgAlt: string;
+    title: string;
+    description?: string | ReactNode;
+    Actions?: ReactNode;
+};

package/esm/Placeholder/types.js

@@ -0,0 +1 @@
+export {};

package/esm/index.d.ts

@@ -27,3 +27,12 @@ export * from './DialogTitle';
 export * from './DialogContent';
 export * from './DialogContentText';
 export * from './DialogActions';
+export * from './List';
+export * from './ListItem';
+export * from './ListItemAvatar';
+export * from './ListSubheader';
+export * from './ListItemButton';
+export * from './ListItemIcon';
+export * from './ListItemSecondaryAction';
+export * from './ListItemText';
+export * from './Placeholder';

package/esm/index.js

@@ -27,3 +27,12 @@ export * from './DialogTitle';
 export * from './DialogContent';
 export * from './DialogContentText';
 export * from './DialogActions';
+export * from './List';
+export * from './ListItem';
+export * from './ListItemAvatar';
+export * from './ListSubheader';
+export * from './ListItemButton';
+export * from './ListItemIcon';
+export * from './ListItemSecondaryAction';
+export * from './ListItemText';
+export * from './Placeholder';

package/index.d.ts

@@ -27,3 +27,12 @@ export * from './DialogTitle';
 export * from './DialogContent';
 export * from './DialogContentText';
 export * from './DialogActions';
+export * from './List';
+export * from './ListItem';
+export * from './ListItemAvatar';
+export * from './ListSubheader';
+export * from './ListItemButton';
+export * from './ListItemIcon';
+export * from './ListItemSecondaryAction';
+export * from './ListItemText';
+export * from './Placeholder';

package/index.js

@@ -39,3 +39,12 @@ __exportStar(require("./DialogTitle"), exports);
 __exportStar(require("./DialogContent"), exports);
 __exportStar(require("./DialogContentText"), exports);
 __exportStar(require("./DialogActions"), exports);
+__exportStar(require("./List"), exports);
+__exportStar(require("./ListItem"), exports);
+__exportStar(require("./ListItemAvatar"), exports);
+__exportStar(require("./ListSubheader"), exports);
+__exportStar(require("./ListItemButton"), exports);
+__exportStar(require("./ListItemIcon"), exports);
+__exportStar(require("./ListItemSecondaryAction"), exports);
+__exportStar(require("./ListItemText"), exports);
+__exportStar(require("./Placeholder"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "0.10.1",
+  "version": "0.12.0",
   "browser": "./src/index.ts",
   "jest": {
     "moduleNameMapper": {
@@ -8,7 +8,7 @@
     }
   },
   "dependencies": {
-    "@astral/icons": "^0.10.1",
+    "@astral/icons": "^0.12.0",
     "@emotion/cache": "11.7.1",
     "@emotion/react": "11.8.1",
     "@emotion/server": "11.4.0",