jvetrau-ds 0.2.35 → 0.2.37

package/components/course-outline/course-outline.css

@@ -2,7 +2,7 @@
   /* color */
   --course-outline-color: inherit;
   --course-outline-meta-color: var(--color-text-note);
-  
+
   color: var(--course-outline-color);
 
   /* typography */
@@ -18,15 +18,15 @@
     var(--font-h3-letter-spacing);
 
   --course-outline-item-title-font-family:
-    var(--font-h4-family);
+    var(--font-lead-family);
   --course-outline-item-title-font-size:
-    var(--font-h4);
+    var(--font-lead);
   --course-outline-item-title-font-weight:
-    var(--font-h4-weight);
+    var(--font-lead-weight);
   --course-outline-item-title-line-height:
-    var(--font-h4-line);
+    var(--font-lead-line);
   --course-outline-item-title-letter-spacing:
-    var(--font-h4-letter-spacing);
+    var(--font-lead-letter-spacing);
 
   --course-outline-body-font-family:
     var(--font-body-family);
@@ -74,6 +74,30 @@
   /* motion */
 }
 
+.layout-sidebar__side .course-outline {
+  /* color */
+
+  /* typography */
+  --course-outline-item-title-font-family:
+    var(--font-body-family);
+  --course-outline-item-title-font-size:
+    var(--font-body);
+  --course-outline-item-title-font-weight:
+    var(--font-body-weight);
+  --course-outline-item-title-line-height:
+    var(--font-body-line);
+  --course-outline-item-title-letter-spacing:
+    var(--font-body-letter-spacing);
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .course-outline__groups {
   /* color */
 
@@ -158,6 +182,44 @@
   /* motion */
 }
 
+h2.course-outline__group-title {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2);
+  font-weight: var(--font-h2-weight);
+  line-height: var(--font-h2-line);
+  letter-spacing: var(--font-h2-letter-spacing);
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+h4.course-outline__group-title {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-h4-family);
+  font-size: var(--font-h4);
+  font-weight: var(--font-h4-weight);
+  line-height: var(--font-h4-line);
+  letter-spacing: var(--font-h4-letter-spacing);
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .course-outline__group-title a {
   /* color */
   color: inherit;

package/components/index.d.ts

@@ -61,4 +61,4 @@ export type { FlipListItem, FlipListProps, } from './flip-list/flip-list';
 export { default as AvatarUpload } from './avatar-upload/avatar-upload';
 export type { AvatarUploadProps, } from './avatar-upload/avatar-upload';
 export { default as Table } from './table';
-export type { TableBodyProps, TableCellProps, TableColumn, TableColumnWidth, TableProps, TableRowProps } from './table';
+export type { TableBodyProps, TableCellProps, TableCellStatus, TableColumn, TableColumnWidth, TableProps, TableRowProps, } from './table';

package/components/table/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './table';
 export { default as Table } from './table';
-export type { TableBodyProps, TableCellProps, TableColumn, TableColumnWidth, TableProps, TableRowProps } from './table';
+export type { TableBodyProps, TableCellProps, TableCellStatus, TableColumn, TableColumnWidth, TableProps, TableRowProps, } from './table';

package/components/table/table.cjs

@@ -69,13 +69,20 @@ const TableRow = ({
   );
 };
 const TableCell = ({
+  status,
   className = "",
   ...props
 }) => {
   const classes = classnames.classnames(
     "table__cell",
     className,
-    {}
+    {
+      "table__cell--good": status === "good",
+      "table__cell--semi-good": status === "semi-good",
+      "table__cell--med": status === "med",
+      "table__cell--semi-bad": status === "semi-bad",
+      "table__cell--bad": status === "bad"
+    }
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "td",

package/components/table/table.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/table/table.tsx"],"names":["classnames","jsx","jsxs"],"mappings":"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","file":"table.cjs","sourcesContent":["import React from 'react';\n\nimport './table.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type TableColumnWidth =\n  | {\n      type: 'auto';\n    }\n  | {\n      type: 'max';\n    }\n  | {\n      type: 'fraction';\n      value: number;\n    }\n  | {\n      type: 'min';\n    }\n  | {\n      type: 'fixed';\n      value: string;\n    };\n\nexport interface TableColumn {\n  id: React.Key;\n  header: React.ReactNode;\n  width?: TableColumnWidth;\n}\n\nexport interface TableProps\n  extends React.TableHTMLAttributes<HTMLTableElement> {\n  columns: TableColumn[];\n}\n\nexport interface TableBodyProps\n  extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {}\n\nconst getFractionTotal = (\n  columns: TableColumn[],\n) =>\n  columns.reduce((total, column) => {\n    if (\n      column.width?.type !== 'fraction' ||\n      column.width.value <= 0\n    ) {\n      return total;\n    }\n\n    return total + column.width.value;\n  }, 0);\n\nconst getFractionPercentage = (\n  value: number,\n  total: number,\n) =>\n  Number(\n    ((value / total) * 100).toFixed(6),\n  );\n\nconst getColumnWidth = (\n  width: TableColumnWidth | undefined,\n  fractionTotal: number,\n): React.CSSProperties['width'] => {\n  if (!width || width.type === 'auto') {\n    return undefined;\n  }\n\n  if (width.type === 'min') {\n    return '1%';\n  }\n\n  if (width.type === 'max') {\n    return '100%';\n  }\n\n  if (width.type === 'fixed') {\n    return width.value;\n  }\n\n  if (\n    width.value <= 0 ||\n    fractionTotal <= 0\n  ) {\n    return undefined;\n  }\n\n  return `${getFractionPercentage(\n    width.value,\n    fractionTotal,\n  )}%`;\n};\n\nconst TableBody: React.FC<\n  TableBodyProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__body',\n    className,\n    {},\n  );\n\n  return (\n    <tbody\n      className={classes}\n      {...props}\n    />\n  );\n};\n\nconst TableRow: React.FC<\n  TableRowProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__row',\n    className,\n    {},\n  );\n\n  return (\n    <tr\n      className={classes}\n      {...props}\n    />\n  );\n};\n\nconst TableCell: React.FC<\n  TableCellProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__cell',\n    className,\n    {},\n  );\n\n  return (\n    <td\n      className={classes}\n      {...props}\n    />\n  );\n};\n\ninterface TableComponent\n  extends React.FC<TableProps> {\n  Body: typeof TableBody;\n  Row: typeof TableRow;\n  Cell: typeof TableCell;\n}\n\nconst Table: TableComponent = ({\n  columns,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'table',\n    className,\n    {},\n  );\n\n  const fractionTotal =\n    getFractionTotal(columns);\n\n  return (\n    <table\n      className={classes}\n      {...props}\n    >\n      <colgroup>\n        {columns.map((column) => (\n          <col\n            key={column.id}\n            style={{\n              width: getColumnWidth(\n                column.width,\n                fractionTotal,\n              ),\n            }}\n          />\n        ))}\n      </colgroup>\n\n      <thead className=\"table__head\">\n        <tr className=\"table__row\">\n          {columns.map((column) => (\n            <th\n              key={column.id}\n              className=\"table__header\"\n              scope=\"col\"\n            >\n              {column.header}\n            </th>\n          ))}\n        </tr>\n      </thead>\n\n      {children}\n    </table>\n  );\n};\n\nTable.Body = TableBody;\nTable.Row = TableRow;\nTable.Cell = TableCell;\n\nexport default Table;\n"]}
+{"version":3,"sources":["../../../src/components/table/table.tsx"],"names":["classnames","jsx","jsxs"],"mappings":"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","file":"table.cjs","sourcesContent":["import React from 'react';\n\nimport './table.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type TableColumnWidth =\n  | {\n      type: 'auto';\n    }\n  | {\n      type: 'max';\n    }\n  | {\n      type: 'fraction';\n      value: number;\n    }\n  | {\n      type: 'min';\n    }\n  | {\n      type: 'fixed';\n      value: string;\n    };\n\nexport type TableCellStatus =\n  | 'good'\n  | 'semi-good'\n  | 'med'\n  | 'semi-bad'\n  | 'bad';\n\nexport interface TableColumn {\n  id: React.Key;\n  header: React.ReactNode;\n  width?: TableColumnWidth;\n}\n\nexport interface TableProps\n  extends React.TableHTMLAttributes<HTMLTableElement> {\n  columns: TableColumn[];\n}\n\nexport interface TableBodyProps\n  extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  status?: TableCellStatus;\n}\n\nconst getFractionTotal = (\n  columns: TableColumn[],\n) =>\n  columns.reduce((total, column) => {\n    if (\n      column.width?.type !== 'fraction' ||\n      column.width.value <= 0\n    ) {\n      return total;\n    }\n\n    return total + column.width.value;\n  }, 0);\n\nconst getFractionPercentage = (\n  value: number,\n  total: number,\n) =>\n  Number(\n    ((value / total) * 100).toFixed(6),\n  );\n\nconst getColumnWidth = (\n  width: TableColumnWidth | undefined,\n  fractionTotal: number,\n): React.CSSProperties['width'] => {\n  if (!width || width.type === 'auto') {\n    return undefined;\n  }\n\n  if (width.type === 'min') {\n    return '1%';\n  }\n\n  if (width.type === 'max') {\n    return '100%';\n  }\n\n  if (width.type === 'fixed') {\n    return width.value;\n  }\n\n  if (\n    width.value <= 0 ||\n    fractionTotal <= 0\n  ) {\n    return undefined;\n  }\n\n  return `${getFractionPercentage(\n    width.value,\n    fractionTotal,\n  )}%`;\n};\n\nconst TableBody: React.FC<\n  TableBodyProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__body',\n    className,\n    {},\n  );\n\n  return (\n    <tbody\n      className={classes}\n      {...props}\n    />\n  );\n};\n\nconst TableRow: React.FC<\n  TableRowProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__row',\n    className,\n    {},\n  );\n\n  return (\n    <tr\n      className={classes}\n      {...props}\n    />\n  );\n};\n\nconst TableCell: React.FC<\n  TableCellProps\n> = ({\n  status,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__cell',\n    className,\n    {\n      'table__cell--good':\n        status === 'good',\n      'table__cell--semi-good':\n        status === 'semi-good',\n      'table__cell--med':\n        status === 'med',\n      'table__cell--semi-bad':\n        status === 'semi-bad',\n      'table__cell--bad':\n        status === 'bad',\n    },\n  );\n\n  return (\n    <td\n      className={classes}\n      {...props}\n    />\n  );\n};\n\ninterface TableComponent\n  extends React.FC<TableProps> {\n  Body: typeof TableBody;\n  Row: typeof TableRow;\n  Cell: typeof TableCell;\n}\n\nconst Table: TableComponent = ({\n  columns,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'table',\n    className,\n    {},\n  );\n\n  const fractionTotal =\n    getFractionTotal(columns);\n\n  return (\n    <table\n      className={classes}\n      {...props}\n    >\n      <colgroup>\n        {columns.map((column) => (\n          <col\n            key={column.id}\n            style={{\n              width: getColumnWidth(\n                column.width,\n                fractionTotal,\n              ),\n            }}\n          />\n        ))}\n      </colgroup>\n\n      <thead className=\"table__head\">\n        <tr className=\"table__row\">\n          {columns.map((column) => (\n            <th\n              key={column.id}\n              className=\"table__header\"\n              scope=\"col\"\n            >\n              {column.header}\n            </th>\n          ))}\n        </tr>\n      </thead>\n\n      {children}\n    </table>\n  );\n};\n\nTable.Body = TableBody;\nTable.Row = TableRow;\nTable.Cell = TableCell;\n\nexport default Table;\n"]}

package/components/table/table.css

@@ -149,6 +149,83 @@
   /* motion */
 }
 
+.table__cell--good {
+  /* color */
+  background-color: var(--color-good);
+  color: var(--color-text-primary-1);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__cell--semi-good {
+  /* color */
+  background-color: var(--color-semi-good);
+  color: var(--color-text-primary-1);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__cell--med {
+  /* color */
+  background-color: var(--color-med);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__cell--semi-bad {
+  /* color */
+  background-color: var(--color-semi-bad);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__cell--bad {
+  /* color */
+  background-color: var(--color-bad);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .table__body
   .table__row:last-child
   .table__cell {
@@ -157,7 +234,6 @@
   /* typography */
 
   /* size */
-  padding-bottom: var(--padding-table-vert);
 
   /* border */
   border-bottom: 0;

package/components/table/table.d.ts

@@ -13,6 +13,7 @@ export type TableColumnWidth = {
     type: 'fixed';
     value: string;
 };
+export type TableCellStatus = 'good' | 'semi-good' | 'med' | 'semi-bad' | 'bad';
 export interface TableColumn {
     id: React.Key;
     header: React.ReactNode;
@@ -26,6 +27,7 @@ export interface TableBodyProps extends React.HTMLAttributes<HTMLTableSectionEle
 export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
 }
 export interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {
+    status?: TableCellStatus;
 }
 declare const TableBody: React.FC<TableBodyProps>;
 declare const TableRow: React.FC<TableRowProps>;

package/components/table/table.js

@@ -67,13 +67,20 @@ const TableRow = ({
   );
 };
 const TableCell = ({
+  status,
   className = "",
   ...props
 }) => {
   const classes = classnames(
     "table__cell",
     className,
-    {}
+    {
+      "table__cell--good": status === "good",
+      "table__cell--semi-good": status === "semi-good",
+      "table__cell--med": status === "med",
+      "table__cell--semi-bad": status === "semi-bad",
+      "table__cell--bad": status === "bad"
+    }
   );
   return /* @__PURE__ */ jsx(
     "td",

package/components/table/table.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"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","file":"table.js","sourcesContent":["import React from 'react';\n\nimport './table.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type TableColumnWidth =\n  | {\n      type: 'auto';\n    }\n  | {\n      type: 'max';\n    }\n  | {\n      type: 'fraction';\n      value: number;\n    }\n  | {\n      type: 'min';\n    }\n  | {\n      type: 'fixed';\n      value: string;\n    };\n\nexport interface TableColumn {\n  id: React.Key;\n  header: React.ReactNode;\n  width?: TableColumnWidth;\n}\n\nexport interface TableProps\n  extends React.TableHTMLAttributes<HTMLTableElement> {\n  columns: TableColumn[];\n}\n\nexport interface TableBodyProps\n  extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {}\n\nconst getFractionTotal = (\n  columns: TableColumn[],\n) =>\n  columns.reduce((total, column) => {\n    if (\n      column.width?.type !== 'fraction' ||\n      column.width.value <= 0\n    ) {\n      return total;\n    }\n\n    return total + column.width.value;\n  }, 0);\n\nconst getFractionPercentage = (\n  value: number,\n  total: number,\n) =>\n  Number(\n    ((value / total) * 100).toFixed(6),\n  );\n\nconst getColumnWidth = (\n  width: TableColumnWidth | undefined,\n  fractionTotal: number,\n): React.CSSProperties['width'] => {\n  if (!width || width.type === 'auto') {\n    return undefined;\n  }\n\n  if (width.type === 'min') {\n    return '1%';\n  }\n\n  if (width.type === 'max') {\n    return '100%';\n  }\n\n  if (width.type === 'fixed') {\n    return width.value;\n  }\n\n  if (\n    width.value <= 0 ||\n    fractionTotal <= 0\n  ) {\n    return undefined;\n  }\n\n  return `${getFractionPercentage(\n    width.value,\n    fractionTotal,\n  )}%`;\n};\n\nconst TableBody: React.FC<\n  TableBodyProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__body',\n    className,\n    {},\n  );\n\n  return (\n    <tbody\n      className={classes}\n      {...props}\n    />\n  );\n};\n\nconst TableRow: React.FC<\n  TableRowProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__row',\n    className,\n    {},\n  );\n\n  return (\n    <tr\n      className={classes}\n      {...props}\n    />\n  );\n};\n\nconst TableCell: React.FC<\n  TableCellProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__cell',\n    className,\n    {},\n  );\n\n  return (\n    <td\n      className={classes}\n      {...props}\n    />\n  );\n};\n\ninterface TableComponent\n  extends React.FC<TableProps> {\n  Body: typeof TableBody;\n  Row: typeof TableRow;\n  Cell: typeof TableCell;\n}\n\nconst Table: TableComponent = ({\n  columns,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'table',\n    className,\n    {},\n  );\n\n  const fractionTotal =\n    getFractionTotal(columns);\n\n  return (\n    <table\n      className={classes}\n      {...props}\n    >\n      <colgroup>\n        {columns.map((column) => (\n          <col\n            key={column.id}\n            style={{\n              width: getColumnWidth(\n                column.width,\n                fractionTotal,\n              ),\n            }}\n          />\n        ))}\n      </colgroup>\n\n      <thead className=\"table__head\">\n        <tr className=\"table__row\">\n          {columns.map((column) => (\n            <th\n              key={column.id}\n              className=\"table__header\"\n              scope=\"col\"\n            >\n              {column.header}\n            </th>\n          ))}\n        </tr>\n      </thead>\n\n      {children}\n    </table>\n  );\n};\n\nTable.Body = TableBody;\nTable.Row = TableRow;\nTable.Cell = TableCell;\n\nexport default Table;\n"]}
+{"version":3,"sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"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","file":"table.js","sourcesContent":["import React from 'react';\n\nimport './table.css';\nimport { classnames } from '../helpers/classnames';\n\nexport type TableColumnWidth =\n  | {\n      type: 'auto';\n    }\n  | {\n      type: 'max';\n    }\n  | {\n      type: 'fraction';\n      value: number;\n    }\n  | {\n      type: 'min';\n    }\n  | {\n      type: 'fixed';\n      value: string;\n    };\n\nexport type TableCellStatus =\n  | 'good'\n  | 'semi-good'\n  | 'med'\n  | 'semi-bad'\n  | 'bad';\n\nexport interface TableColumn {\n  id: React.Key;\n  header: React.ReactNode;\n  width?: TableColumnWidth;\n}\n\nexport interface TableProps\n  extends React.TableHTMLAttributes<HTMLTableElement> {\n  columns: TableColumn[];\n}\n\nexport interface TableBodyProps\n  extends React.HTMLAttributes<HTMLTableSectionElement> {}\n\nexport interface TableRowProps\n  extends React.HTMLAttributes<HTMLTableRowElement> {}\n\nexport interface TableCellProps\n  extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  status?: TableCellStatus;\n}\n\nconst getFractionTotal = (\n  columns: TableColumn[],\n) =>\n  columns.reduce((total, column) => {\n    if (\n      column.width?.type !== 'fraction' ||\n      column.width.value <= 0\n    ) {\n      return total;\n    }\n\n    return total + column.width.value;\n  }, 0);\n\nconst getFractionPercentage = (\n  value: number,\n  total: number,\n) =>\n  Number(\n    ((value / total) * 100).toFixed(6),\n  );\n\nconst getColumnWidth = (\n  width: TableColumnWidth | undefined,\n  fractionTotal: number,\n): React.CSSProperties['width'] => {\n  if (!width || width.type === 'auto') {\n    return undefined;\n  }\n\n  if (width.type === 'min') {\n    return '1%';\n  }\n\n  if (width.type === 'max') {\n    return '100%';\n  }\n\n  if (width.type === 'fixed') {\n    return width.value;\n  }\n\n  if (\n    width.value <= 0 ||\n    fractionTotal <= 0\n  ) {\n    return undefined;\n  }\n\n  return `${getFractionPercentage(\n    width.value,\n    fractionTotal,\n  )}%`;\n};\n\nconst TableBody: React.FC<\n  TableBodyProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__body',\n    className,\n    {},\n  );\n\n  return (\n    <tbody\n      className={classes}\n      {...props}\n    />\n  );\n};\n\nconst TableRow: React.FC<\n  TableRowProps\n> = ({\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__row',\n    className,\n    {},\n  );\n\n  return (\n    <tr\n      className={classes}\n      {...props}\n    />\n  );\n};\n\nconst TableCell: React.FC<\n  TableCellProps\n> = ({\n  status,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'table__cell',\n    className,\n    {\n      'table__cell--good':\n        status === 'good',\n      'table__cell--semi-good':\n        status === 'semi-good',\n      'table__cell--med':\n        status === 'med',\n      'table__cell--semi-bad':\n        status === 'semi-bad',\n      'table__cell--bad':\n        status === 'bad',\n    },\n  );\n\n  return (\n    <td\n      className={classes}\n      {...props}\n    />\n  );\n};\n\ninterface TableComponent\n  extends React.FC<TableProps> {\n  Body: typeof TableBody;\n  Row: typeof TableRow;\n  Cell: typeof TableCell;\n}\n\nconst Table: TableComponent = ({\n  columns,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'table',\n    className,\n    {},\n  );\n\n  const fractionTotal =\n    getFractionTotal(columns);\n\n  return (\n    <table\n      className={classes}\n      {...props}\n    >\n      <colgroup>\n        {columns.map((column) => (\n          <col\n            key={column.id}\n            style={{\n              width: getColumnWidth(\n                column.width,\n                fractionTotal,\n              ),\n            }}\n          />\n        ))}\n      </colgroup>\n\n      <thead className=\"table__head\">\n        <tr className=\"table__row\">\n          {columns.map((column) => (\n            <th\n              key={column.id}\n              className=\"table__header\"\n              scope=\"col\"\n            >\n              {column.header}\n            </th>\n          ))}\n        </tr>\n      </thead>\n\n      {children}\n    </table>\n  );\n};\n\nTable.Body = TableBody;\nTable.Row = TableRow;\nTable.Cell = TableCell;\n\nexport default Table;\n"]}

package/index.d.ts

@@ -69,7 +69,7 @@ export type { FlipListItem, FlipListProps, } from './components/flip-list';
 export { default as AvatarUpload } from './components/avatar-upload';
 export type { AvatarUploadProps, } from './components/avatar-upload';
 export { default as Table } from './components/table';
-export type { TableBodyProps, TableCellProps, TableColumn, TableColumnWidth, TableProps, TableRowProps } from './components/table';
+export type { TableBodyProps, TableCellProps, TableCellStatus, TableColumn, TableColumnWidth, TableProps, TableRowProps, } from './components/table';
 export { default as Header } from './patterns/header';
 export type { HeaderProps } from './patterns/header';
 export { default as Footer } from './patterns/footer';

package/layouts/auth/auth.cjs

@@ -3,6 +3,7 @@
 var jsxRuntime = require('react/jsx-runtime');
 var LayoutBase = require('../base');
 require('./auth.css');
+var classnames = require('../../components/helpers/classnames');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -12,8 +13,14 @@ const LayoutAuth = ({
   brand,
   footer,
   children,
+  className = "",
   ...props
 }) => {
+  const classes = classnames.classnames(
+    "layout-auth",
+    className,
+    {}
+  );
   return /* @__PURE__ */ jsxRuntime.jsx(
     LayoutBase__default.default,
     {
@@ -22,6 +29,7 @@ const LayoutAuth = ({
       mainAlign: "center",
       header: brand,
       footer,
+      className: classes,
       ...props,
       children
     }

package/layouts/auth/auth.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layouts/auth/auth.tsx"],"names":["jsx","LayoutBase"],"mappings":";;;;;;;;;;AAWA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,uBACEA,cAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAU,QAAA;AAAA,MACV,MAAA,EAAQ,KAAA;AAAA,MACR,MAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"auth.cjs","sourcesContent":["import React from 'react';\nimport LayoutBase from '../base';\nimport './auth.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface LayoutAuthProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  brand?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutAuth: React.FC<LayoutAuthProps> = ({\n  brand,\n  footer,\n  children,\n  ...props\n}) => {\n  return (\n    <LayoutBase\n      width=\"narrow\"\n      headerAlign=\"end\"\n      mainAlign=\"center\"\n      header={brand}\n      footer={footer}\n      {...props}\n    >\n      {children}\n    </LayoutBase>\n  );\n};\n\nexport default LayoutAuth;"]}
+{"version":3,"sources":["../../../src/layouts/auth/auth.tsx"],"names":["classnames","jsx","LayoutBase"],"mappings":";;;;;;;;;;;AAWA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,aAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACEC,cAAA;AAAA,IAACC,2BAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAU,QAAA;AAAA,MACV,MAAA,EAAQ,KAAA;AAAA,MACR,MAAA;AAAA,MACA,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"auth.cjs","sourcesContent":["import React from 'react';\nimport LayoutBase from '../base';\nimport './auth.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface LayoutAuthProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  brand?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutAuth: React.FC<LayoutAuthProps> = ({\n  brand,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'layout-auth',\n    className,\n    {},\n  );\n\n  return (\n    <LayoutBase\n      width=\"narrow\"\n      headerAlign=\"end\"\n      mainAlign=\"center\"\n      header={brand}\n      footer={footer}\n      className={classes}\n      {...props}\n    >\n      {children}\n    </LayoutBase>\n  );\n};\n\nexport default LayoutAuth;\n"]}

package/layouts/auth/auth.css

@@ -0,0 +1,19 @@
+.layout-auth .panel h1 {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2);
+  font-weight: var(--font-h2-weight);
+  line-height: var(--font-h2-line);
+  letter-spacing: var(--font-h2-letter-spacing);
+
+  /* size */
+  margin: 0 0 var(--font-h2-margin) 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}

package/layouts/auth/auth.js

@@ -1,13 +1,20 @@
 import { jsx } from 'react/jsx-runtime';
 import LayoutBase from '../base';
 import './auth.css';
+import { classnames } from '../../components/helpers/classnames';
 
 const LayoutAuth = ({
   brand,
   footer,
   children,
+  className = "",
   ...props
 }) => {
+  const classes = classnames(
+    "layout-auth",
+    className,
+    {}
+  );
   return /* @__PURE__ */ jsx(
     LayoutBase,
     {
@@ -16,6 +23,7 @@ const LayoutAuth = ({
       mainAlign: "center",
       header: brand,
       footer,
+      className: classes,
       ...props,
       children
     }

package/layouts/auth/auth.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/layouts/auth/auth.tsx"],"names":[],"mappings":";;;;AAWA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAU,QAAA;AAAA,MACV,MAAA,EAAQ,KAAA;AAAA,MACR,MAAA;AAAA,MACC,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"auth.js","sourcesContent":["import React from 'react';\nimport LayoutBase from '../base';\nimport './auth.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface LayoutAuthProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  brand?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutAuth: React.FC<LayoutAuthProps> = ({\n  brand,\n  footer,\n  children,\n  ...props\n}) => {\n  return (\n    <LayoutBase\n      width=\"narrow\"\n      headerAlign=\"end\"\n      mainAlign=\"center\"\n      header={brand}\n      footer={footer}\n      {...props}\n    >\n      {children}\n    </LayoutBase>\n  );\n};\n\nexport default LayoutAuth;"]}
+{"version":3,"sources":["../../../src/layouts/auth/auth.tsx"],"names":[],"mappings":";;;;;AAWA,MAAM,aAAwC,CAAC;AAAA,EAC7C,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,aAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAC,GACH;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,QAAA;AAAA,MACN,WAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAU,QAAA;AAAA,MACV,MAAA,EAAQ,KAAA;AAAA,MACR,MAAA;AAAA,MACA,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ,CAAA;AAEA,IAAO,YAAA,GAAQ","file":"auth.js","sourcesContent":["import React from 'react';\nimport LayoutBase from '../base';\nimport './auth.css';\nimport { classnames } from '../../components/helpers/classnames';\n\nexport interface LayoutAuthProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  brand?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nconst LayoutAuth: React.FC<LayoutAuthProps> = ({\n  brand,\n  footer,\n  children,\n  className = '',\n  ...props\n}) => {\n  const classes = classnames(\n    'layout-auth',\n    className,\n    {},\n  );\n\n  return (\n    <LayoutBase\n      width=\"narrow\"\n      headerAlign=\"end\"\n      mainAlign=\"center\"\n      header={brand}\n      footer={footer}\n      className={classes}\n      {...props}\n    >\n      {children}\n    </LayoutBase>\n  );\n};\n\nexport default LayoutAuth;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jvetrau-ds",
-  "version": "0.2.35",
+  "version": "0.2.37",
   "description": "Multi-brand React design system with semantic tokens",
   "license": "UNLICENSED",
   "type": "module",

package/styles.css

@@ -1630,7 +1630,7 @@
   /* color */
   --course-outline-color: inherit;
   --course-outline-meta-color: var(--color-text-note);
-  
+
   color: var(--course-outline-color);
 
   /* typography */
@@ -1646,15 +1646,15 @@
     var(--font-h3-letter-spacing);
 
   --course-outline-item-title-font-family:
-    var(--font-h4-family);
+    var(--font-lead-family);
   --course-outline-item-title-font-size:
-    var(--font-h4);
+    var(--font-lead);
   --course-outline-item-title-font-weight:
-    var(--font-h4-weight);
+    var(--font-lead-weight);
   --course-outline-item-title-line-height:
-    var(--font-h4-line);
+    var(--font-lead-line);
   --course-outline-item-title-letter-spacing:
-    var(--font-h4-letter-spacing);
+    var(--font-lead-letter-spacing);
 
   --course-outline-body-font-family:
     var(--font-body-family);
@@ -1702,6 +1702,30 @@
   /* motion */
 }
 
+.layout-sidebar__side .course-outline {
+  /* color */
+
+  /* typography */
+  --course-outline-item-title-font-family:
+    var(--font-body-family);
+  --course-outline-item-title-font-size:
+    var(--font-body);
+  --course-outline-item-title-font-weight:
+    var(--font-body-weight);
+  --course-outline-item-title-line-height:
+    var(--font-body-line);
+  --course-outline-item-title-letter-spacing:
+    var(--font-body-letter-spacing);
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .course-outline__groups {
   /* color */
 
@@ -1786,6 +1810,44 @@
   /* motion */
 }
 
+h2.course-outline__group-title {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2);
+  font-weight: var(--font-h2-weight);
+  line-height: var(--font-h2-line);
+  letter-spacing: var(--font-h2-letter-spacing);
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+h4.course-outline__group-title {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-h4-family);
+  font-size: var(--font-h4);
+  font-weight: var(--font-h4-weight);
+  line-height: var(--font-h4-line);
+  letter-spacing: var(--font-h4-letter-spacing);
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .course-outline__group-title a {
   /* color */
   color: inherit;
@@ -5132,6 +5194,83 @@
   /* motion */
 }
 
+.table__cell--good {
+  /* color */
+  background-color: var(--color-good);
+  color: var(--color-text-primary-1);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__cell--semi-good {
+  /* color */
+  background-color: var(--color-semi-good);
+  color: var(--color-text-primary-1);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__cell--med {
+  /* color */
+  background-color: var(--color-med);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__cell--semi-bad {
+  /* color */
+  background-color: var(--color-semi-bad);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.table__cell--bad {
+  /* color */
+  background-color: var(--color-bad);
+
+  /* typography */
+
+  /* size */
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .table__body
   .table__row:last-child
   .table__cell {
@@ -5140,7 +5279,6 @@
   /* typography */
 
   /* size */
-  padding-bottom: var(--padding-table-vert);
 
   /* border */
   border-bottom: 0;
@@ -6563,7 +6701,25 @@
 }
 
 /* src/layouts/auth/auth.css */
+.layout-auth .panel h1 {
+  /* color */
+
+  /* typography */
+  font-family: var(--font-h2-family);
+  font-size: var(--font-h2);
+  font-weight: var(--font-h2-weight);
+  line-height: var(--font-h2-line);
+  letter-spacing: var(--font-h2-letter-spacing);
 
+  /* size */
+  margin: 0 0 var(--font-h2-margin) 0;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
 
 /* src/layouts/base/base.css */
 .layout-base .layout-foundation__grid {