@akinon/ui-layout 0.4.0 → 0.6.0

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

@@ -0,0 +1,32 @@
+export type NavCardColorVariant =
+  | 'akinon'
+  | 'azure'
+  | 'blue'
+  | 'orange'
+  | 'red'
+  | 'green'
+  | 'pink'
+  | 'purple';
+
+export interface NavCardProps {
+  /**
+   * The title of the NavCard.
+   */
+  title: string;
+  /**
+   * The description of the NavCard.
+   */
+  description: string;
+  /**
+   * The icon of the NavCard.
+   */
+  icon?: React.ReactNode;
+  /**
+   * The color variant of the NavCard.
+   */
+  variant?: NavCardColorVariant;
+  /**
+   * The additional css class
+   */
+  className?: string;
+}

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/PageContent/types.d.ts

@@ -0,0 +1,3 @@
+export interface PageContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: ReactNode;
+}

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/PageHeading/types.d.ts

@@ -0,0 +1,18 @@
+export interface PageHeadingProps {
+  /**
+   * The title of the PageHeading.
+   */
+  title: string;
+  /**
+   * The description of the PageHeading.
+   */
+  description?: string;
+  /**
+   * The action items of the PageHeading.
+   */
+  actions?: ReactNode;
+  /**
+   * The additional css class
+   */
+  className?: string;
+}

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';

package/dist/esm/types.d.ts

@@ -0,0 +1,12 @@
+import { Layout } from './Layout';
+import { Content } from './Layout/Content';
+import { Footer } from './Layout/Footer';
+import { Header } from './Layout/Header';
+import { Sider } from './Layout/Sider';
+
+export type LayoutType = typeof Layout & {
+  Header: typeof Header;
+  Footer: typeof Footer;
+  Content: typeof Content;
+  Sider: typeof Sider;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@akinon/ui-layout",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "private": false,
   "type": "module",
   "main": "dist/esm/index.js",
@@ -9,16 +9,16 @@
     "dist"
   ],
   "dependencies": {
-    "antd": "5.17.0"
+    "antd": "5.17.0",
+    "clsx": "^2.0.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0",
     "copyfiles": "^2.4.1",
     "rimraf": "^5.0.5",
     "typescript": "^5.2.2",
-    "@akinon/vite-config": "0.4.0",
-    "@akinon/eslint-config": "0.1.0",
-    "@akinon/typescript-config": "0.2.0"
+    "@akinon/typescript-config": "0.4.0",
+    "@akinon/ui-theme": "0.7.0"
   },
   "peerDependencies": {
     "react": ">=18",
@@ -38,12 +38,8 @@
     "build": "pnpm run build:esm && pnpm run build:commonjs && pnpm run copy:files",
     "build:esm": "tsc --outDir dist/esm",
     "build:commonjs": "tsc --module commonjs --outDir dist/cjs",
-    "copy:files": "copyfiles -u 1 src/**/*.css dist/esm && copyfiles -u 1 src/**/*.css dist/cjs",
+    "copy:files": "copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/esm && copyfiles -u 1 \"src/**/*.!(ts|tsx)\" dist/cjs",
     "clean": "rimraf dist/",
-    "lint": "eslint *.ts*",
-    "test": "vitest run",
-    "test:ui": "vitest --ui",
-    "test:watch": "vitest watch",
     "typecheck": "tsc --noEmit"
   }
 }

package/dist/cjs/Content.d.ts

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

package/dist/cjs/Content.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Content.d.ts","sourceRoot":"","sources":["../../src/Content.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,YAAY;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,OAAO,iBAAkB,YAAY,sBAEjD,CAAC"}

package/dist/cjs/Content.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Content = void 0;
-const antd_1 = require("antd");
-const React = require("react");
-const Content = ({ children }) => {
-    return React.createElement(antd_1.Layout.Content, null, children);
-};
-exports.Content = Content;

package/dist/cjs/Flex.d.ts

@@ -1,4 +0,0 @@
-import { Flex, FlexProps } from 'antd';
-export type { FlexProps };
-export { Flex };
-//# sourceMappingURL=Flex.d.ts.map

package/dist/cjs/Flex.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../src/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,MAAM,CAAC;AAEvC,YAAY,EAAE,SAAS,EAAE,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,CAAC"}

package/dist/cjs/Flex.js

@@ -1,5 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Flex = void 0;
-const antd_1 = require("antd");
-Object.defineProperty(exports, "Flex", { enumerable: true, get: function () { return antd_1.Flex; } });

package/dist/cjs/Footer.d.ts

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

package/dist/cjs/Footer.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Footer.d.ts","sourceRoot":"","sources":["../../src/Footer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,iBAAkB,WAAW,sBAM/C,CAAC"}

package/dist/cjs/Footer.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Footer = void 0;
-const antd_1 = require("antd");
-const React = require("react");
-const Footer = ({ children }) => {
-    return (React.createElement(antd_1.Layout.Footer, { style: { textAlign: 'center' } }, children));
-};
-exports.Footer = Footer;

package/dist/cjs/Grid.d.ts

@@ -1,4 +0,0 @@
-import { Col, ColProps, Row, RowProps } from 'antd';
-export type { ColProps, RowProps };
-export { Col, Row };
-//# sourceMappingURL=Grid.d.ts.map

package/dist/cjs/Grid.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAEpD,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AACnC,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC"}

package/dist/cjs/Grid.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Row = exports.Col = void 0;
-const antd_1 = require("antd");
-Object.defineProperty(exports, "Col", { enumerable: true, get: function () { return antd_1.Col; } });
-Object.defineProperty(exports, "Row", { enumerable: true, get: function () { return antd_1.Row; } });

package/dist/cjs/Header.d.ts

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

package/dist/cjs/Header.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../src/Header.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,MAAM,iBAAkB,WAAW,sBAE/C,CAAC"}

package/dist/cjs/Header.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Header = void 0;
-const antd_1 = require("antd");
-const React = require("react");
-const Header = ({ children }) => {
-    return React.createElement(antd_1.Layout.Header, null, children);
-};
-exports.Header = Header;

package/dist/cjs/Layout.d.ts

@@ -1,6 +0,0 @@
-interface LayoutProps {
-    children: any;
-}
-export declare const Layout: ({ children }: LayoutProps) => JSX.Element;
-export {};
-//# sourceMappingURL=Layout.d.ts.map

package/dist/cjs/Layout.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../src/Layout.tsx"],"names":[],"mappings":"AAGA,UAAU,WAAW;IACnB,QAAQ,EAAE,GAAG,CAAC;CACf;AAED,eAAO,MAAM,MAAM,iBAAkB,WAAW,KAAG,WAElD,CAAC"}

package/dist/cjs/Layout.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Layout = void 0;
-const antd_1 = require("antd");
-const React = require("react");
-const Layout = ({ children }) => {
-    return React.createElement(antd_1.Layout, { style: { minHeight: '100vh' } }, children);
-};
-exports.Layout = Layout;

package/dist/cjs/Sider.d.ts

@@ -1,12 +0,0 @@
-import './index.css';
-import * as React from 'react';
-export interface SiderProps {
-    children?: React.ReactNode;
-    direction: 'left' | 'right';
-    collapsed?: boolean;
-    collapsedWidth?: number | string;
-    iconUrl?: string;
-    brandImageUrl?: string;
-}
-export declare const Sider: ({ children, direction, collapsed, collapsedWidth, iconUrl, brandImageUrl }: SiderProps) => React.JSX.Element;
-//# sourceMappingURL=Sider.d.ts.map

package/dist/cjs/Sider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Sider.d.ts","sourceRoot":"","sources":["../../src/Sider.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAGrB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,cAAc,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACjC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,eAAO,MAAM,KAAK,+EAOf,UAAU,sBA8BZ,CAAC"}

package/dist/cjs/Sider.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Sider = void 0;
-require("./index.css");
-const antd_1 = require("antd");
-const React = require("react");
-const Sider = ({ children, direction, collapsed, collapsedWidth, iconUrl, brandImageUrl }) => {
-    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 (React.createElement(antd_1.Layout.Sider, { collapsible: true, collapsed: collapsed, collapsedWidth: collapsedWidth, trigger: null, width: 250, className: `${direction}` },
-        LogoContainer,
-        children));
-};
-exports.Sider = Sider;

package/dist/cjs/index.css

@@ -1,49 +0,0 @@
-.akinon-layout {
-  &:not(.akinon-layout-has-sider) {
-    border-inline: 1px solid var(--color-gray-900);
-  }
-
-  .akinon-layout-header {
-    padding-inline: 1rem;
-    height: 3.5rem;
-    border-bottom: 1px solid var(--color-gray-900);
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    line-height: unset;
-    position: sticky;
-    top: 0;
-    z-index: 999;
-  }
-
-  .akinon-layout-sider {
-    position: sticky;
-    top: 0;
-    height: 100vh;
-    overflow-y: auto;
-
-    &.left {
-      inset-inline-start: 0;
-    }
-
-    &.right {
-      inset-inline-end: 0;
-    }
-
-    .logo-container {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      height: 3.5rem;
-      gap: 0.8rem;
-      /* border-bottom: 1px solid var(--color-gray-900); */
-
-      &.collapsed {
-        .brand-image {
-          display: none;
-        }
-      }
-    }
-  }
-}

package/dist/cjs/nav-card.css

@@ -1,83 +0,0 @@
-.nav-card {
-  background-color: var(--color-neutral-50);
-  border-radius: 0.35rem;
-  display: flex;
-}
-
-.nav-card__icon {
-  background-color: var(--color-gray-500);
-  border-bottom-left-radius: 0.25rem;
-  border-top-left-radius: 0.25rem;
-  color: var(--color-neutral-50);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 180px;
-
-  /* Overriding SVG so you will not have to pass size prop to Icon component. */
-  svg {
-    width: 1.75rem !important;
-    height: 1.75rem !important;
-  }
-
-  /* Change bg color based on the class set on .nav-card */
-  &:is(.nav-card-akinon *) {
-    background-color: var(--color-akinon-500);
-  }
-
-  &:is(.nav-card-azure *) {
-    background-color: var(--color-azure-500);
-  }
-
-  &:is(.nav-card-blue *) {
-    background-color: var(--color-blue-500);
-  }
-
-  &:is(.nav-card-orange *) {
-    background-color: var(--color-orange-500);
-  }
-
-  &:is(.nav-card-red *) {
-    background-color: var(--color-red-500);
-  }
-
-  &:is(.nav-card-green *) {
-    background-color: var(--color-green-500);
-  }
-
-  &:is(.nav-card-pink *) {
-    background-color: var(--color-pink-500);
-  }
-
-  &:is(.nav-card-purple *) {
-    background-color: var(--color-purple-500);
-  }
-}
-
-.nav-card__content {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: flex-start;
-  padding: 1.5rem 1rem;
-  width: 100%;
-}
-
-.nav-card__title {
-  color: var(--color-ebonyClay-900);
-  font-size: 1.15rem;
-  font-weight: 500;
-  margin: 0;
-  padding: 0;
-  line-height: 1;
-  text-decoration: none;
-}
-
-.nav-card__description {
-  color: var(--color-gray-400);
-  font-weight: 400;
-  margin: 0.5rem 0 0;
-  padding: 0;
-  line-height: 1.3;
-  text-decoration: none;
-}

package/dist/cjs/nav-card.d.ts

@@ -1,12 +0,0 @@
-import './nav-card.css';
-import React, { ReactNode } from 'react';
-export type NavCardColorVariant = 'akinon' | 'azure' | 'blue' | 'orange' | 'red' | 'green' | 'pink' | 'purple';
-export interface NavCardProps {
-    title: string;
-    description: string;
-    icon?: ReactNode;
-    variant?: NavCardColorVariant;
-    className?: string;
-}
-export declare const NavCard: ({ title, description, icon, variant, className }: NavCardProps) => React.JSX.Element;
-//# sourceMappingURL=nav-card.d.ts.map

package/dist/cjs/nav-card.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"nav-card.d.ts","sourceRoot":"","sources":["../../src/nav-card.tsx"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,CAAC;AAGxB,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,MAAM,mBAAmB,GAC3B,QAAQ,GACR,OAAO,GACP,MAAM,GACN,QAAQ,GACR,KAAK,GACL,OAAO,GACP,MAAM,GACN,QAAQ,CAAC;AAEb,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,OAAO,qDAMjB,YAAY,sBAad,CAAC"}

package/dist/cjs/nav-card.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NavCard = void 0;
-require("./nav-card.css");
-const clsx_1 = require("clsx");
-const react_1 = require("react");
-const NavCard = ({ title, description, icon, variant, className }) => {
-    const variantClass = variant ? `nav-card-${variant}` : '';
-    return (react_1.default.createElement("div", { className: (0, clsx_1.default)('nav-card', variantClass, className) },
-        icon && react_1.default.createElement("div", { className: "nav-card__icon" }, icon),
-        react_1.default.createElement("div", { className: "nav-card__content" },
-            react_1.default.createElement("h2", { className: "nav-card__title" }, title),
-            react_1.default.createElement("div", { className: "nav-card__description" }, description))));
-};
-exports.NavCard = NavCard;

package/dist/cjs/page-content.d.ts

@@ -1,7 +0,0 @@
-import './page-content.css';
-import React, { ReactNode } from 'react';
-export interface PageContentProps extends React.HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
-}
-export declare const PageContent: ({ children, ...props }: PageContentProps) => React.JSX.Element;
-//# sourceMappingURL=page-content.d.ts.map

package/dist/cjs/page-content.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"page-content.d.ts","sourceRoot":"","sources":["../../src/page-content.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,2BAA4B,gBAAgB,sBAInE,CAAC"}

package/dist/cjs/page-heading.d.ts

@@ -1,9 +0,0 @@
-import './page-heading.css';
-import React, { ReactNode } from 'react';
-export interface PageHeadingProps {
-    title: string;
-    description?: string;
-    actions?: ReactNode;
-}
-export declare const PageHeading: ({ title, description, actions }: PageHeadingProps) => React.JSX.Element;
-//# sourceMappingURL=page-heading.d.ts.map

package/dist/cjs/page-heading.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"page-heading.d.ts","sourceRoot":"","sources":["../../src/page-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,WAAW,oCAIrB,gBAAgB,sBAalB,CAAC"}