@akinon/ui-layout 0.4.0 → 0.5.0

package/dist/cjs/index.js

@@ -15,12 +15,11 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Layout = void 0;
-require("./index.css");
-const Content_1 = require("./Content");
-const Footer_1 = require("./Footer");
-const Header_1 = require("./Header");
 const Layout_1 = require("./Layout");
-const Sider_1 = require("./Sider");
+const Content_1 = require("./Layout/Content");
+const Footer_1 = require("./Layout/Footer");
+const Header_1 = require("./Layout/Header");
+const Sider_1 = require("./Layout/Sider");
 const Layout = Object.assign(Layout_1.Layout, {
     Header: Header_1.Header,
     Footer: Footer_1.Footer,
@@ -28,10 +27,8 @@ const Layout = Object.assign(Layout_1.Layout, {
     Sider: Sider_1.Sider
 });
 exports.Layout = Layout;
-// TODO: Rename these files to be lowercase.
-// TODO: Add our file naming conventions to documentation.
 __exportStar(require("./Flex"), exports);
 __exportStar(require("./Grid"), exports);
-__exportStar(require("./nav-card"), exports);
-__exportStar(require("./page-content"), exports);
-__exportStar(require("./page-heading"), exports);
+__exportStar(require("./NavCard"), exports);
+__exportStar(require("./PageContent"), exports);
+__exportStar(require("./PageHeading"), exports);

package/dist/esm/Flex/index.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { FlexProps } from './types';
+export type { FlexProps } from './types';
+export declare const Flex: ({ children, ...restFlexProps }: FlexProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/Flex/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Flex/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,YAAY,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,eAAO,MAAM,IAAI,mCAAoC,SAAS,sBA4B7D,CAAC"}

package/dist/esm/Flex/index.js

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Flex as AntFlex } from 'antd';
+import * as React from 'react';
+export const Flex = (_a) => {
+    var { children } = _a, restFlexProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    //const flexToken = (token as GlobalToken).Flex;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Flex'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-flex`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-flex`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(AntFlex, Object.assign({}, restFlexProps), children));
+};

package/dist/esm/Grid/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { ColProps, RowProps } from './types';
+export type { ColProps, RowProps } from './types';
+export declare const Row: ({ children, ...restRowProps }: RowProps) => React.JSX.Element;
+export declare const Col: ({ children, ...restColProps }: ColProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/Grid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Grid/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAElD,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAElD,eAAO,MAAM,GAAG,kCAAmC,QAAQ,sBAkC1D,CAAC;AAEF,eAAO,MAAM,GAAG,kCAAmC,QAAQ,sBA4B1D,CAAC"}

package/dist/esm/Grid/index.js

@@ -0,0 +1,57 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { Col as AntCol, ConfigProvider, Row as AntRow } from 'antd';
+import * as React from 'react';
+export const Row = (_a) => {
+    var { children } = _a, restRowProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    const gridToken = token.Grid;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Row'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-row`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-row`;
+        return {
+            [prefixCls]: {
+                maxWidth: gridToken === null || gridToken === void 0 ? void 0 : gridToken.rowMaxWidth
+            },
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(AntRow, Object.assign({ gutter: [gridToken === null || gridToken === void 0 ? void 0 : gridToken.gutter, gridToken === null || gridToken === void 0 ? void 0 : gridToken.gutter] }, restRowProps), children));
+};
+export const Col = (_a) => {
+    var { children } = _a, restColProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    //const colToken = (token as GlobalToken).Col;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Col'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-col`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-col`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(AntCol, Object.assign({}, restColProps), children));
+};

package/dist/esm/Layout/Content/index.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { ContentProps } from './types';
+export type { ContentProps } from './types';
+export declare const Content: ({ children, ...restContentProps }: ContentProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/Layout/Content/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Content/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAI5C,eAAO,MAAM,OAAO,sCAAuC,YAAY,sBA4BtE,CAAC"}

package/dist/esm/Layout/Content/index.js

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Layout as AntLayout } from 'antd';
+import * as React from 'react';
+const { Content: AntContent } = AntLayout;
+export const Content = (_a) => {
+    var { children } = _a, restContentProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    //const layoutToken = (token as GlobalToken).Layout;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Content'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-content`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-content`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(AntContent, Object.assign({}, restContentProps), children));
+};

package/dist/esm/Layout/Footer/index.d.ts

@@ -0,0 +1,6 @@
+import './index.css';
+import * as React from 'react';
+import type { FooterProps } from './types';
+export type { FooterProps } from './types';
+export declare const Footer: ({ children, ...restFooterProps }: FooterProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/Layout/Footer/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Footer/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,eAAO,MAAM,MAAM,qCAAsC,WAAW,sBA4BnE,CAAC"}

package/dist/esm/Layout/Footer/index.js

@@ -0,0 +1,37 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import './index.css';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Layout as AntLayout } from 'antd';
+import * as React from 'react';
+const { Footer: AntFooter } = AntLayout;
+export const Footer = (_a) => {
+    var { children } = _a, restFooterProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    //const layoutToken = (token as GlobalToken).Layout;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Footer'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-footer`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-footer`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(AntFooter, Object.assign({}, restFooterProps), children));
+};

package/dist/esm/Layout/Header/index.d.ts

@@ -0,0 +1,6 @@
+import './index.css';
+import * as React from 'react';
+import type { HeaderProps } from './types';
+export type { HeaderProps } from './types';
+export declare const Header: ({ children, ...restHeaderProps }: HeaderProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/Layout/Header/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Header/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAI3C,eAAO,MAAM,MAAM,qCAAsC,WAAW,sBA4BnE,CAAC"}

package/dist/esm/Layout/Header/index.js

@@ -0,0 +1,37 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import './index.css';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Layout as AntLayout } from 'antd';
+import * as React from 'react';
+const { Header: AntHeader } = AntLayout;
+export const Header = (_a) => {
+    var { children } = _a, restHeaderProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    //const layoutToken = (token as GlobalToken).Layout;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Header'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-header`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-header`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(AntHeader, Object.assign({}, restHeaderProps), children));
+};

package/dist/esm/Layout/Sider/index.d.ts

@@ -0,0 +1,6 @@
+import './index.css';
+import * as React from 'react';
+import type { SiderProps } from './types';
+export type { LeftSiderItem, SiderProps } from './types';
+export declare const Sider: ({ children, collapsed, iconUrl, brandImageUrl, ...restSiderProps }: SiderProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/Layout/Sider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Layout/Sider/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAKrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAIzD,eAAO,MAAM,KAAK,uEAMf,UAAU,sBAuDZ,CAAC"}

package/dist/esm/Layout/Sider/index.js

@@ -0,0 +1,45 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import './index.css';
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Layout as AntLayout } from 'antd';
+import * as React from 'react';
+const { Sider: AntSider } = AntLayout;
+export const Sider = (_a) => {
+    var { children, collapsed, iconUrl, brandImageUrl } = _a, restSiderProps = __rest(_a, ["children", "collapsed", "iconUrl", "brandImageUrl"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    //const layoutToken = (token as GlobalToken).Layout;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Sider'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-sider`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-sider`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    let LogoContainer;
+    if (iconUrl && brandImageUrl) {
+        LogoContainer = (React.createElement("div", { className: `logo-container ${collapsed ? 'collapsed' : ''}` },
+            React.createElement("img", { className: "logo", src: iconUrl, alt: "icon", width: 20, height: 20 }),
+            React.createElement("img", { className: "brand-image", src: brandImageUrl, alt: "brand-image", height: 20 })));
+    }
+    return useStyle(React.createElement(AntSider, Object.assign({ collapsible: true, collapsed: collapsed, trigger: null, width: 250 }, restSiderProps),
+        LogoContainer,
+        children));
+};

package/dist/esm/Layout/index.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import type { LayoutProps } from './types';
+export type { LayoutProps } from './types';
+export declare const Layout: ({ children, ...restLayoutProps }: LayoutProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/Layout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Layout/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,YAAY,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAE3C,eAAO,MAAM,MAAM,qCAAsC,WAAW,sBA4BnE,CAAC"}

package/dist/esm/Layout/index.js

@@ -0,0 +1,35 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useToken } from '@akinon/ui-theme';
+import { useStyleRegister } from '@ant-design/cssinjs';
+import { ConfigProvider, Layout as AntLayout } from 'antd';
+import * as React from 'react';
+export const Layout = (_a) => {
+    var { children } = _a, restLayoutProps = __rest(_a, ["children"]);
+    const { getPrefixCls, theme } = React.useContext(ConfigProvider.ConfigContext);
+    const { token, hashId } = useToken();
+    //const layoutToken = (token as GlobalToken).Layout;
+    const useStyle = useStyleRegister({
+        token: token,
+        path: ['Layout'],
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        theme: theme
+    }, () => {
+        const prefixCls = `:where(.${hashId}).${getPrefixCls()}-layout`;
+        const prefixClsWithoutHash = `.${getPrefixCls()}-layout`;
+        return {
+            [prefixCls]: {},
+            [prefixClsWithoutHash]: {}
+        };
+    });
+    return useStyle(React.createElement(AntLayout, Object.assign({}, restLayoutProps), children));
+};

package/dist/esm/{nav-card.css → NavCard/index.css}

@@ -1,13 +1,13 @@
 .nav-card {
   background-color: var(--color-neutral-50);
-  border-radius: 0.35rem;
+  border-radius: 5.6px;
   display: flex;
 }
 
 .nav-card__icon {
   background-color: var(--color-gray-500);
-  border-bottom-left-radius: 0.25rem;
-  border-top-left-radius: 0.25rem;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
   color: var(--color-neutral-50);
   display: flex;
   align-items: center;
@@ -16,8 +16,8 @@
 
   /* Overriding SVG so you will not have to pass size prop to Icon component. */
   svg {
-    width: 1.75rem !important;
-    height: 1.75rem !important;
+    width: 28px !important;
+    height: 28px !important;
   }
 
   /* Change bg color based on the class set on .nav-card */
@@ -59,13 +59,13 @@
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  padding: 1.5rem 1rem;
+  padding: 24px 16px;
   width: 100%;
 }
 
 .nav-card__title {
   color: var(--color-ebonyClay-900);
-  font-size: 1.15rem;
+  font-size: calc(var(--token-fontSize) * 1.28571428571px);
   font-weight: 500;
   margin: 0;
   padding: 0;
@@ -76,7 +76,7 @@
 .nav-card__description {
   color: var(--color-gray-400);
   font-weight: 400;
-  margin: 0.5rem 0 0;
+  margin: 8px 0 0;
   padding: 0;
   line-height: 1.3;
   text-decoration: none;

package/dist/esm/NavCard/index.d.ts

@@ -0,0 +1,6 @@
+import './index.css';
+import * as React from 'react';
+import type { NavCardProps } from './types';
+export type { NavCardProps } from './types';
+export declare const NavCard: ({ title, description, icon, variant, className }: NavCardProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/NavCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/NavCard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAE5C,eAAO,MAAM,OAAO,qDAMjB,YAAY,sBAad,CAAC"}

package/dist/esm/{nav-card.js → NavCard/index.js}

@@ -1,6 +1,6 @@
-import './nav-card.css';
+import './index.css';
 import clsx from 'clsx';
-import React from 'react';
+import * as React from 'react';
 export const NavCard = ({ title, description, icon, variant, className }) => {
     const variantClass = variant ? `nav-card-${variant}` : '';
     return (React.createElement("div", { className: clsx('nav-card', variantClass, className) },

package/dist/esm/{page-content.css → PageContent/index.css}

@@ -1,3 +1,3 @@
 .akinon-page-content {
-  padding: 1.5rem;
+  padding: 24px;
 }

package/dist/esm/PageContent/index.d.ts

@@ -0,0 +1,6 @@
+import './index.css';
+import * as React from 'react';
+import type { PageContentProps } from './types';
+export type { PageContentProps } from './types';
+export declare const PageContent: ({ children, className, ...restProps }: PageContentProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/PageContent/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageContent/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,WAAW,0CAIrB,gBAAgB,sBAIlB,CAAC"}

package/dist/esm/{page-content.js → PageContent/index.js}

@@ -9,9 +9,10 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import './page-content.css';
-import React from 'react';
+import './index.css';
+import clsx from 'clsx';
+import * as React from 'react';
 export const PageContent = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    return (React.createElement("div", Object.assign({ className: "akinon-page-content" }, props), children));
+    var { children, className } = _a, restProps = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", Object.assign({ className: clsx('akinon-page-content', className) }, restProps), children));
 };

package/dist/esm/{page-heading.css → PageHeading/index.css}

@@ -3,7 +3,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 1.5rem;
+  padding: 24px;
 }
 
 .akinon-page-heading__content {
@@ -12,7 +12,7 @@
 
 .akinon-page-heading__title {
   color: var(--color-neutral-50);
-  font-size: 1.25rem;
+  font-size: calc(var(--token-fontSize) * 1.42857142857px);
   font-weight: 700;
   margin: 0;
 }

package/dist/esm/PageHeading/index.d.ts

@@ -0,0 +1,6 @@
+import './index.css';
+import * as React from 'react';
+import type { PageHeadingProps } from './types';
+export type { PageHeadingProps } from './types';
+export declare const PageHeading: ({ title, description, actions, className }: PageHeadingProps) => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/esm/PageHeading/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageHeading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,YAAY,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD,eAAO,MAAM,WAAW,+CAKrB,gBAAgB,sBAalB,CAAC"}

package/dist/esm/{page-heading.js → PageHeading/index.js}

@@ -1,7 +1,8 @@
-import './page-heading.css';
-import React from 'react';
-export const PageHeading = ({ title, description, actions }) => {
-    return (React.createElement("div", { className: "akinon-page-heading" },
+import './index.css';
+import clsx from 'clsx';
+import * as React from 'react';
+export const PageHeading = ({ title, description, actions, className }) => {
+    return (React.createElement("div", { className: clsx('akinon-page-heading', className) },
         React.createElement("div", { className: "akinon-page-heading__content" },
             React.createElement("h1", { className: "akinon-page-heading__title" }, title),
             description && (React.createElement("p", { className: "akinon-page-heading__description" }, description))),

package/dist/esm/index.d.ts

@@ -1,30 +1,15 @@
-/// <reference types="react" />
-import './index.css';
-import { Content } from './Content';
-import { Footer } from './Footer';
-import { Header } from './Header';
-import { Layout as InternalLayout } from './Layout';
-import { Sider } from './Sider';
-type CompoundedComponent = typeof InternalLayout & {
-    Header: typeof Header;
-    Footer: typeof Footer;
-    Content: typeof Content;
-    Sider: typeof Sider;
-};
-declare const Layout: CompoundedComponent;
-export type LeftSiderItem = {
-    key: string;
-    label: string;
-    icon?: React.ReactNode;
-    className?: string;
-    onClick?: () => void;
-    children?: LeftSiderItem[];
-    disabled?: boolean;
-};
+import type { LayoutType } from './types';
+export type { ContentProps } from './Layout/Content/types';
+export type { FooterProps } from './Layout/Footer/types';
+export type { HeaderProps } from './Layout/Header/types';
+export type { LeftSiderItem, SiderProps } from './Layout/Sider/types';
+export type { LayoutProps } from './Layout/types';
+export type { LayoutType } from './types';
+declare const Layout: LayoutType;
 export { Layout };
 export * from './Flex';
 export * from './Grid';
-export * from './nav-card';
-export * from './page-content';
-export * from './page-heading';
+export * from './NavCard';
+export * from './PageContent';
+export * from './PageHeading';
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";AAAA,OAAO,aAAa,CAAC;AAErB,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,UAAU,CAAC;AACpD,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,KAAK,mBAAmB,GAAG,OAAO,cAAc,GAAG;IACjD,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,MAAM,EAAE,OAAO,MAAM,CAAC;IACtB,OAAO,EAAE,OAAO,OAAO,CAAC;IACxB,KAAK,EAAE,OAAO,KAAK,CAAC;CACrB,CAAC;AAEF,QAAA,MAAM,MAAM,EAAE,mBAKZ,CAAC;AAGH,MAAM,MAAM,aAAa,GAAG;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,OAAO,EAAE,MAAM,EAAE,CAAC;AAGlB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,YAAY,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACzD,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AACtE,YAAY,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAClD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,QAAA,MAAM,MAAM,EAAE,UAKZ,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,CAAC;AAElB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC"}

package/dist/esm/index.js

@@ -1,9 +1,8 @@
-import './index.css';
-import { Content } from './Content';
-import { Footer } from './Footer';
-import { Header } from './Header';
 import { Layout as InternalLayout } from './Layout';
-import { Sider } from './Sider';
+import { Content } from './Layout/Content';
+import { Footer } from './Layout/Footer';
+import { Header } from './Layout/Header';
+import { Sider } from './Layout/Sider';
 const Layout = Object.assign(InternalLayout, {
     Header,
     Footer,
@@ -11,10 +10,8 @@ const Layout = Object.assign(InternalLayout, {
     Sider
 });
 export { Layout };
-// TODO: Rename these files to be lowercase.
-// TODO: Add our file naming conventions to documentation.
 export * from './Flex';
 export * from './Grid';
-export * from './nav-card';
-export * from './page-content';
-export * from './page-heading';
+export * from './NavCard';
+export * from './PageContent';
+export * from './PageHeading';