jvetrau-ds 0.2.6 → 0.2.8

package/catalog/types.d.ts

@@ -0,0 +1,12 @@
+export type ComponentState = 'default' | 'primary' | 'hover' | 'focus' | 'active' | 'disabled' | 'error' | 'success' | 'checked' | 'unchecked' | 'loading' | 'idle' | 'playing' | 'paused' | string;
+export interface ComponentMeta {
+    name: string;
+    purpose: string;
+    anatomy: string[];
+    states: ComponentState[];
+    props: string[];
+    usage: string[];
+    llmDescription: string;
+    example: string;
+    isPlaceholder?: boolean;
+}

package/components/action-group/action-group.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const actionGroupMeta: ComponentMeta;

package/components/attach/attach.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const attachMeta: ComponentMeta;

package/components/avatar/avatar.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const avatarMeta: ComponentMeta;

package/components/avatar-upload/avatar-upload.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const avatarUploadMeta: ComponentMeta;

package/components/breadcrumbs/breadcrumbs.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const breadcrumbsMeta: ComponentMeta;

package/components/button/button.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const buttonMeta: ComponentMeta;

package/components/calendar-month/calendar-month.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const calendarMonthMeta: ComponentMeta;

package/components/card/card.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const cardMeta: ComponentMeta;

package/components/card-group/card-group.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const cardGroupMeta: ComponentMeta;

package/components/checkbox/checkbox.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const checkboxMeta: ComponentMeta;

package/components/course-outline/course-outline.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const courseOutlineMeta: ComponentMeta;

package/components/discussion/discussion.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const discussionMeta: ComponentMeta;

package/components/dropdown/dropdown.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const dropdownMeta: ComponentMeta;

package/components/field/field.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const fieldMeta: ComponentMeta;

package/components/field-group/field-group.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const fieldGroupMeta: ComponentMeta;

package/components/flip-list/flip-list.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const flipListMeta: ComponentMeta;

package/components/helpers/helpers.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const helpersMeta: ComponentMeta;

package/components/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var button = require('./button');
-var input = require('./input/input');
+var input = require('./input');
 var textarea = require('./textarea/textarea');
 var select = require('./select/select');
 var dropdown = require('./dropdown/dropdown');

package/components/index.d.ts

@@ -1,8 +1,8 @@
 export { default as Button } from './button';
 export { buttonLink, } from './button';
 export type { ButtonProps, } from './button';
-export { default as Input } from './input/input';
-export type { InputProps } from './input/input';
+export { default as Input, } from './input';
+export type { InputProps, InputWidth, } from './input';
 export { default as Textarea } from './textarea/textarea';
 export type { TextareaProps } from './textarea/textarea';
 export { default as Select } from './select/select';

package/components/index.js

@@ -1,5 +1,5 @@
 export { default as Button, buttonLink } from './button';
-export { default as Input } from './input/input';
+export { default as Input } from './input';
 export { default as Textarea } from './textarea/textarea';
 export { default as Select } from './select/select';
 export { default as Dropdown } from './dropdown/dropdown';

package/components/input/index.cjs

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var input = require('./input');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -8,6 +10,13 @@ var input__default = /*#__PURE__*/_interopDefault(input);
 
 
 
-module.exports = input__default.default;
+Object.defineProperty(exports, "Input", {
+  enumerable: true,
+  get: function () { return input.Input; }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () { return input__default.default; }
+});
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map

package/components/input/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './input';
-export type { InputProps } from './input';
+export { default, Input, } from './input';
+export type { InputProps, InputWidth, } from './input';

package/components/input/index.js

@@ -1,3 +1,3 @@
-export { default } from './input';
+export { Input, default } from './input';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/components/input/input.cjs

@@ -1,17 +1,23 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var jsxRuntime = require('react/jsx-runtime');
 var classnames = require('../helpers/classnames');
 
 const Input = ({
   state = "default",
+  width = "default",
   className = "",
   disabled = false,
   ...props
 }) => {
   const classes = classnames.classnames("input", className, {
-    error: state === "error",
-    success: state === "success"
+    "input--error": state === "error",
+    "input--success": state === "success",
+    "input--width-short": width === "short",
+    "input--width-default": width === "default",
+    "input--width-max": width === "max"
   });
   return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
@@ -24,6 +30,7 @@ const Input = ({
 };
 var input_default = Input;
 
-module.exports = input_default;
+exports.Input = Input;
+exports.default = input_default;
 //# sourceMappingURL=input.cjs.map
 //# sourceMappingURL=input.cjs.map

package/components/input/input.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/input/input.tsx"],"names":["classnames","jsx"],"mappings":";;;;;AASA,MAAM,QAA8B,CAAC;AAAA,EACnC,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,OAAA,EAAS,SAAA,EAAW;AAAA,IAC7C,OAAO,KAAA,KAAU,OAAA;AAAA,IACjB,SAAS,KAAA,KAAU;AAAA,GACpB,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"input.cjs","sourcesContent":["import React from 'react';\n//import './input.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  state?: 'default' | 'error' | 'success';\n}\n\nconst Input: React.FC<InputProps> = ({\n  state = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames('input', className, {\n    error: state === 'error',\n    success: state === 'success',\n  });\n\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Input;"]}
+{"version":3,"sources":["../../../src/components/input/input.tsx"],"names":["classnames","jsx"],"mappings":";;;;;;;AAWO,MAAM,QAA8B,CAAC;AAAA,EAC1C,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA,CAAW,OAAA,EAAS,SAAA,EAAW;AAAA,IAC7C,gBAAgB,KAAA,KAAU,OAAA;AAAA,IAC1B,kBAAkB,KAAA,KAAU,SAAA;AAAA,IAC5B,sBAAsB,KAAA,KAAU,OAAA;AAAA,IAChC,wBAAwB,KAAA,KAAU,SAAA;AAAA,IAClC,oBAAoB,KAAA,KAAU;AAAA,GAC/B,CAAA;AAED,EAAA,uBACEC,cAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,IAAO,aAAA,GAAQ","file":"input.cjs","sourcesContent":["import React from 'react';\nimport { classnames } from '../helpers/classnames';\n\nexport type InputWidth = 'short' | 'default' | 'max';\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  state?: 'default' | 'error' | 'success';\n  width?: InputWidth;\n}\n\nexport const Input: React.FC<InputProps> = ({\n  state = 'default',\n  width = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames('input', className, {\n    'input--error': state === 'error',\n    'input--success': state === 'success',\n    'input--width-short': width === 'short',\n    'input--width-default': width === 'default',\n    'input--width-max': width === 'max',\n  });\n\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Input;\n"]}

package/components/input/input.css

@@ -25,6 +25,7 @@
   --input-height: var(--size-control-height);
   --input-padding-x: var(--padding-control-horz);
 
+  box-sizing: border-box;
   height: var(--input-height);
   padding-inline: var(--input-padding-x);
 
@@ -53,6 +54,21 @@
     background-color var(--input-transition-duration) ease;
 }
 
+.input--width-short {
+  /* size */
+  width: auto;
+}
+
+.input--width-default {
+  /* size */
+  width: 400px;
+}
+
+.input--width-max {
+  /* size */
+  width: 100%;
+}
+
 .input::placeholder {
   color: var(--input-placeholder);
 }

package/components/input/input.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
+export type InputWidth = 'short' | 'default' | 'max';
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     state?: 'default' | 'error' | 'success';
+    width?: InputWidth;
 }
-declare const Input: React.FC<InputProps>;
+export declare const Input: React.FC<InputProps>;
 export default Input;

package/components/input/input.js

@@ -3,13 +3,17 @@ import { classnames } from '../helpers/classnames';
 
 const Input = ({
   state = "default",
+  width = "default",
   className = "",
   disabled = false,
   ...props
 }) => {
   const classes = classnames("input", className, {
-    error: state === "error",
-    success: state === "success"
+    "input--error": state === "error",
+    "input--success": state === "success",
+    "input--width-short": width === "short",
+    "input--width-default": width === "default",
+    "input--width-max": width === "max"
   });
   return /* @__PURE__ */ jsx(
     "input",
@@ -22,6 +26,6 @@ const Input = ({
 };
 var input_default = Input;
 
-export { input_default as default };
+export { Input, input_default as default };
 //# sourceMappingURL=input.js.map
 //# sourceMappingURL=input.js.map

package/components/input/input.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":";;;AASA,MAAM,QAA8B,CAAC;AAAA,EACnC,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,OAAA,EAAS,SAAA,EAAW;AAAA,IAC7C,OAAO,KAAA,KAAU,OAAA;AAAA,IACjB,SAAS,KAAA,KAAU;AAAA,GACpB,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"input.js","sourcesContent":["import React from 'react';\n//import './input.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  state?: 'default' | 'error' | 'success';\n}\n\nconst Input: React.FC<InputProps> = ({\n  state = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames('input', className, {\n    error: state === 'error',\n    success: state === 'success',\n  });\n\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Input;"]}
+{"version":3,"sources":["../../../src/components/input/input.tsx"],"names":[],"mappings":";;;AAWO,MAAM,QAA8B,CAAC;AAAA,EAC1C,KAAA,GAAQ,SAAA;AAAA,EACR,KAAA,GAAQ,SAAA;AAAA,EACR,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA,CAAW,OAAA,EAAS,SAAA,EAAW;AAAA,IAC7C,gBAAgB,KAAA,KAAU,OAAA;AAAA,IAC1B,kBAAkB,KAAA,KAAU,SAAA;AAAA,IAC5B,sBAAsB,KAAA,KAAU,OAAA;AAAA,IAChC,wBAAwB,KAAA,KAAU,SAAA;AAAA,IAClC,oBAAoB,KAAA,KAAU;AAAA,GAC/B,CAAA;AAED,EAAA,uBACE,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACX,QAAA;AAAA,MACC,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,IAAO,aAAA,GAAQ","file":"input.js","sourcesContent":["import React from 'react';\nimport { classnames } from '../helpers/classnames';\n\nexport type InputWidth = 'short' | 'default' | 'max';\n\nexport interface InputProps\n  extends React.InputHTMLAttributes<HTMLInputElement> {\n  state?: 'default' | 'error' | 'success';\n  width?: InputWidth;\n}\n\nexport const Input: React.FC<InputProps> = ({\n  state = 'default',\n  width = 'default',\n  className = '',\n  disabled = false,\n  ...props\n}) => {\n  const classes = classnames('input', className, {\n    'input--error': state === 'error',\n    'input--success': state === 'success',\n    'input--width-short': width === 'short',\n    'input--width-default': width === 'default',\n    'input--width-max': width === 'max',\n  });\n\n  return (\n    <input\n      className={classes}\n      disabled={disabled}\n      {...props}\n    />\n  );\n};\n\nexport default Input;\n"]}

package/components/input/input.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const inputMeta: ComponentMeta;

package/components/logo/logo.meta.d.ts

@@ -0,0 +1,10 @@
+export declare const logoMeta: {
+    name: string;
+    purpose: string;
+    anatomy: string[];
+    states: string[];
+    props: string[];
+    usage: string[];
+    llmDescription: string;
+    example: string;
+};

package/components/markdown/markdown.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const markdownMeta: ComponentMeta;

package/components/menu/menu.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const menuMeta: ComponentMeta;

package/components/panel/panel.cjs

@@ -9,6 +9,7 @@ function hasContent(value) {
 }
 const Panel = ({
   layout = "card",
+  overflow = "visible",
   heading,
   headingLevel = 2,
   description,
@@ -20,34 +21,36 @@ const Panel = ({
     "panel",
     className,
     {
-      "panel--transparent": layout === "transparent"
+      "panel--transparent": layout === "transparent",
+      "panel--content-overflow": overflow === "content"
     }
   );
   const HeadingTag = `h${headingLevel}`;
   const hasHeading = hasContent(heading);
   const hasDescription = hasContent(description);
-  const hasHeader = hasHeading || hasDescription;
+  const hasChildren = hasContent(children);
+  const hasBody = hasDescription || hasChildren;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
       className: classes,
       ...props,
       children: [
-        hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel__header", children: [
-          hasHeading && /* @__PURE__ */ jsxRuntime.jsx(
-            HeadingTag,
-            {
-              className: classnames.classnames(
-                "panel__heading",
-                `panel__heading--h${headingLevel}`,
-                {}
-              ),
-              children: heading
-            }
-          ),
-          hasDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "panel__description", children: description })
-        ] }),
-        hasContent(children) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel__content", children })
+        hasHeading && /* @__PURE__ */ jsxRuntime.jsx(
+          HeadingTag,
+          {
+            className: classnames.classnames(
+              "panel__heading",
+              `panel__heading--h${headingLevel}`,
+              {}
+            ),
+            children: heading
+          }
+        ),
+        hasBody && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "panel__body", children: [
+          hasDescription && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "panel__description", children: description }),
+          hasChildren && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "panel__content", children })
+        ] })
       ]
     }
   );

package/components/panel/panel.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/panel/panel.tsx"],"names":["classnames","jsxs","jsx"],"mappings":";;;;;;AAaA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,QAA8B,CAAC;AAAA,EACnC,MAAA,GAAS,MAAA;AAAA,EACT,OAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,WAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,sBACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,MAAM,UAAA,GACJ,IAAI,YAAY,CAAA,CAAA;AAElB,EAAA,MAAM,UAAA,GACJ,WAAW,OAAO,CAAA;AAEpB,EAAA,MAAM,cAAA,GACJ,WAAW,WAAW,CAAA;AAExB,EAAA,MAAM,YACJ,UAAA,IACA,cAAA;AAEF,EAAA,uBACEC,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA,oBACCA,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,eAAA,EACZ,QAAA,EAAA;AAAA,UAAA,UAAA,oBACCC,cAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAWF,qBAAA;AAAA,gBACT,gBAAA;AAAA,gBACA,oBAAoB,YAAY,CAAA,CAAA;AAAA,gBAChC;AAAC,eACH;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAGD,cAAA,oBACCE,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,sBACV,QAAA,EAAA,WAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAGD,WAAW,QAAQ,CAAA,mCACjB,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"panel.cjs","sourcesContent":["import React from 'react';\n\nimport './panel.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLElement> {\n  layout?: 'card' | 'transparent';\n  heading?: React.ReactNode;\n  headingLevel?: 2 | 3;\n  description?: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Panel: React.FC<PanelProps> = ({\n  layout = 'card',\n  heading,\n  headingLevel = 2,\n  description,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'panel',\n    className,\n    {\n      'panel--transparent':\n        layout === 'transparent',\n    },\n  );\n\n  const HeadingTag =\n    `h${headingLevel}` as 'h2' | 'h3';\n\n  const hasHeading =\n    hasContent(heading);\n\n  const hasDescription =\n    hasContent(description);\n\n  const hasHeader =\n    hasHeading ||\n    hasDescription;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\n      {hasHeader && (\n        <div className=\"panel__header\">\n          {hasHeading && (\n            <HeadingTag\n              className={classnames(\n                'panel__heading',\n                `panel__heading--h${headingLevel}`,\n                {},\n              )}\n            >\n              {heading}\n            </HeadingTag>\n          )}\n\n          {hasDescription && (\n            <p className=\"panel__description\">\n              {description}\n            </p>\n          )}\n        </div>\n      )}\n\n      {hasContent(children) && (\n        <div className=\"panel__content\">\n          {children}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Panel;\n"]}
+{"version":3,"sources":["../../../src/components/panel/panel.tsx"],"names":["classnames","jsxs","jsx"],"mappings":";;;;;;AAcA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,QAA8B,CAAC;AAAA,EACnC,MAAA,GAAS,MAAA;AAAA,EACT,QAAA,GAAW,SAAA;AAAA,EACX,OAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,WAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAUA,qBAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,sBACE,MAAA,KAAW,aAAA;AAAA,MACb,2BACE,QAAA,KAAa;AAAA;AACjB,GACF;AAEA,EAAA,MAAM,UAAA,GACJ,IAAI,YAAY,CAAA,CAAA;AAElB,EAAA,MAAM,UAAA,GACJ,WAAW,OAAO,CAAA;AAEpB,EAAA,MAAM,cAAA,GACJ,WAAW,WAAW,CAAA;AAExB,EAAA,MAAM,WAAA,GACJ,WAAW,QAAQ,CAAA;AAErB,EAAA,MAAM,UACJ,cAAA,IACA,WAAA;AAEF,EAAA,uBACEC,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,oBACCC,cAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWF,qBAAA;AAAA,cACT,gBAAA;AAAA,cACA,oBAAoB,YAAY,CAAA,CAAA;AAAA,cAChC;AAAC,aACH;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAGD,OAAA,oBACCC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,UAAA,cAAA,oBACCC,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oBAAA,EACV,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAGD,WAAA,oBACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EACH;AAAA,SAAA,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"panel.cjs","sourcesContent":["import React from 'react';\n\nimport './panel.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLElement> {\n  layout?: 'card' | 'transparent';\n  overflow?: 'visible' | 'content';\n  heading?: React.ReactNode;\n  headingLevel?: 2 | 3;\n  description?: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Panel: React.FC<PanelProps> = ({\n  layout = 'card',\n  overflow = 'visible',\n  heading,\n  headingLevel = 2,\n  description,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'panel',\n    className,\n    {\n      'panel--transparent':\n        layout === 'transparent',\n      'panel--content-overflow':\n        overflow === 'content',\n    },\n  );\n\n  const HeadingTag =\n    `h${headingLevel}` as 'h2' | 'h3';\n\n  const hasHeading =\n    hasContent(heading);\n\n  const hasDescription =\n    hasContent(description);\n\n  const hasChildren =\n    hasContent(children);\n\n  const hasBody =\n    hasDescription ||\n    hasChildren;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\n      {hasHeading && (\n        <HeadingTag\n          className={classnames(\n            'panel__heading',\n            `panel__heading--h${headingLevel}`,\n            {},\n          )}\n        >\n          {heading}\n        </HeadingTag>\n      )}\n\n      {hasBody && (\n        <div className=\"panel__body\">\n          {hasDescription && (\n            <p className=\"panel__description\">\n              {description}\n            </p>\n          )}\n\n          {hasChildren && (\n            <div className=\"panel__content\">\n              {children}\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Panel;\n"]}

package/components/panel/panel.css

@@ -50,16 +50,13 @@
   /* motion */
 }
 
-.panel__header {
+.panel--content-overflow {
   /* color */
 
   /* typography */
 
   /* size */
-  display: flex;
-  flex-direction: column;
-  gap: var(--panel-title-gap);
-  width: 100%;
+  overflow: hidden;
 
   /* border */
 
@@ -75,6 +72,7 @@
   /* typography */
 
   /* size */
+  flex: 0 0 auto;
   margin: 0;
 
   /* border */
@@ -122,6 +120,24 @@
   /* motion */
 }
 
+.panel__body {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  gap: var(--panel-title-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .panel__description {
   /* color */
   color: inherit;
@@ -155,5 +171,23 @@
 
   /* depth */
 
+  /* motion */
+}
+
+.panel--content-overflow .panel__body {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  flex: 1;
+  min-height: 0;
+
+  overflow: auto;
+
+  /* border */
+
+  /* depth */
+
   /* motion */
 }

package/components/panel/panel.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import './panel.css';
 export interface PanelProps extends React.HTMLAttributes<HTMLElement> {
     layout?: 'card' | 'transparent';
+    overflow?: 'visible' | 'content';
     heading?: React.ReactNode;
     headingLevel?: 2 | 3;
     description?: React.ReactNode;

package/components/panel/panel.js

@@ -7,6 +7,7 @@ function hasContent(value) {
 }
 const Panel = ({
   layout = "card",
+  overflow = "visible",
   heading,
   headingLevel = 2,
   description,
@@ -18,34 +19,36 @@ const Panel = ({
     "panel",
     className,
     {
-      "panel--transparent": layout === "transparent"
+      "panel--transparent": layout === "transparent",
+      "panel--content-overflow": overflow === "content"
     }
   );
   const HeadingTag = `h${headingLevel}`;
   const hasHeading = hasContent(heading);
   const hasDescription = hasContent(description);
-  const hasHeader = hasHeading || hasDescription;
+  const hasChildren = hasContent(children);
+  const hasBody = hasDescription || hasChildren;
   return /* @__PURE__ */ jsxs(
     "section",
     {
       className: classes,
       ...props,
       children: [
-        hasHeader && /* @__PURE__ */ jsxs("div", { className: "panel__header", children: [
-          hasHeading && /* @__PURE__ */ jsx(
-            HeadingTag,
-            {
-              className: classnames(
-                "panel__heading",
-                `panel__heading--h${headingLevel}`,
-                {}
-              ),
-              children: heading
-            }
-          ),
-          hasDescription && /* @__PURE__ */ jsx("p", { className: "panel__description", children: description })
-        ] }),
-        hasContent(children) && /* @__PURE__ */ jsx("div", { className: "panel__content", children })
+        hasHeading && /* @__PURE__ */ jsx(
+          HeadingTag,
+          {
+            className: classnames(
+              "panel__heading",
+              `panel__heading--h${headingLevel}`,
+              {}
+            ),
+            children: heading
+          }
+        ),
+        hasBody && /* @__PURE__ */ jsxs("div", { className: "panel__body", children: [
+          hasDescription && /* @__PURE__ */ jsx("p", { className: "panel__description", children: description }),
+          hasChildren && /* @__PURE__ */ jsx("div", { className: "panel__content", children })
+        ] })
       ]
     }
   );

package/components/panel/panel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/panel/panel.tsx"],"names":[],"mappings":";;;;AAaA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,QAA8B,CAAC;AAAA,EACnC,MAAA,GAAS,MAAA;AAAA,EACT,OAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,WAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,sBACE,MAAA,KAAW;AAAA;AACf,GACF;AAEA,EAAA,MAAM,UAAA,GACJ,IAAI,YAAY,CAAA,CAAA;AAElB,EAAA,MAAM,UAAA,GACJ,WAAW,OAAO,CAAA;AAEpB,EAAA,MAAM,cAAA,GACJ,WAAW,WAAW,CAAA;AAExB,EAAA,MAAM,YACJ,UAAA,IACA,cAAA;AAEF,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,SAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,eAAA,EACZ,QAAA,EAAA;AAAA,UAAA,UAAA,oBACC,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,UAAA;AAAA,gBACT,gBAAA;AAAA,gBACA,oBAAoB,YAAY,CAAA,CAAA;AAAA,gBAChC;AAAC,eACH;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAGD,cAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,sBACV,QAAA,EAAA,WAAA,EACH;AAAA,SAAA,EAEJ,CAAA;AAAA,QAGD,WAAW,QAAQ,CAAA,wBACjB,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EACH;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"panel.js","sourcesContent":["import React from 'react';\n\nimport './panel.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLElement> {\n  layout?: 'card' | 'transparent';\n  heading?: React.ReactNode;\n  headingLevel?: 2 | 3;\n  description?: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Panel: React.FC<PanelProps> = ({\n  layout = 'card',\n  heading,\n  headingLevel = 2,\n  description,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'panel',\n    className,\n    {\n      'panel--transparent':\n        layout === 'transparent',\n    },\n  );\n\n  const HeadingTag =\n    `h${headingLevel}` as 'h2' | 'h3';\n\n  const hasHeading =\n    hasContent(heading);\n\n  const hasDescription =\n    hasContent(description);\n\n  const hasHeader =\n    hasHeading ||\n    hasDescription;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\n      {hasHeader && (\n        <div className=\"panel__header\">\n          {hasHeading && (\n            <HeadingTag\n              className={classnames(\n                'panel__heading',\n                `panel__heading--h${headingLevel}`,\n                {},\n              )}\n            >\n              {heading}\n            </HeadingTag>\n          )}\n\n          {hasDescription && (\n            <p className=\"panel__description\">\n              {description}\n            </p>\n          )}\n        </div>\n      )}\n\n      {hasContent(children) && (\n        <div className=\"panel__content\">\n          {children}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Panel;\n"]}
+{"version":3,"sources":["../../../src/components/panel/panel.tsx"],"names":[],"mappings":";;;;AAcA,SAAS,WACP,KAAA,EAIA;AACA,EAAA,OACE,KAAA,KAAU,QACV,KAAA,KAAU,MAAA;AAEd;AAEA,MAAM,QAA8B,CAAC;AAAA,EACnC,MAAA,GAAS,MAAA;AAAA,EACT,QAAA,GAAW,SAAA;AAAA,EACX,OAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,WAAA;AAAA,EACA,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,sBACE,MAAA,KAAW,aAAA;AAAA,MACb,2BACE,QAAA,KAAa;AAAA;AACjB,GACF;AAEA,EAAA,MAAM,UAAA,GACJ,IAAI,YAAY,CAAA,CAAA;AAElB,EAAA,MAAM,UAAA,GACJ,WAAW,OAAO,CAAA;AAEpB,EAAA,MAAM,cAAA,GACJ,WAAW,WAAW,CAAA;AAExB,EAAA,MAAM,WAAA,GACJ,WAAW,QAAQ,CAAA;AAErB,EAAA,MAAM,UACJ,cAAA,IACA,WAAA;AAEF,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,OAAA;AAAA,MACV,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,oBACC,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,UAAA;AAAA,cACT,gBAAA;AAAA,cACA,oBAAoB,YAAY,CAAA,CAAA;AAAA,cAChC;AAAC,aACH;AAAA,YAEC,QAAA,EAAA;AAAA;AAAA,SACH;AAAA,QAGD,OAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,aAAA,EACZ,QAAA,EAAA;AAAA,UAAA,cAAA,oBACC,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,oBAAA,EACV,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,UAGD,WAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kBACZ,QAAA,EACH;AAAA,SAAA,EAEJ;AAAA;AAAA;AAAA,GAEJ;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"panel.js","sourcesContent":["import React from 'react';\n\nimport './panel.css';\nimport { classnames } from '../helpers/classnames';\n\nexport interface PanelProps\n  extends React.HTMLAttributes<HTMLElement> {\n  layout?: 'card' | 'transparent';\n  overflow?: 'visible' | 'content';\n  heading?: React.ReactNode;\n  headingLevel?: 2 | 3;\n  description?: React.ReactNode;\n}\n\nfunction hasContent(\n  value: React.ReactNode,\n): value is Exclude<\n  React.ReactNode,\n  null | undefined\n> {\n  return (\n    value !== null &&\n    value !== undefined\n  );\n}\n\nconst Panel: React.FC<PanelProps> = ({\n  layout = 'card',\n  overflow = 'visible',\n  heading,\n  headingLevel = 2,\n  description,\n  className = '',\n  children,\n  ...props\n}) => {\n  const classes = classnames(\n    'panel',\n    className,\n    {\n      'panel--transparent':\n        layout === 'transparent',\n      'panel--content-overflow':\n        overflow === 'content',\n    },\n  );\n\n  const HeadingTag =\n    `h${headingLevel}` as 'h2' | 'h3';\n\n  const hasHeading =\n    hasContent(heading);\n\n  const hasDescription =\n    hasContent(description);\n\n  const hasChildren =\n    hasContent(children);\n\n  const hasBody =\n    hasDescription ||\n    hasChildren;\n\n  return (\n    <section\n      className={classes}\n      {...props}\n    >\n      {hasHeading && (\n        <HeadingTag\n          className={classnames(\n            'panel__heading',\n            `panel__heading--h${headingLevel}`,\n            {},\n          )}\n        >\n          {heading}\n        </HeadingTag>\n      )}\n\n      {hasBody && (\n        <div className=\"panel__body\">\n          {hasDescription && (\n            <p className=\"panel__description\">\n              {description}\n            </p>\n          )}\n\n          {hasChildren && (\n            <div className=\"panel__content\">\n              {children}\n            </div>\n          )}\n        </div>\n      )}\n    </section>\n  );\n};\n\nexport default Panel;\n"]}

package/components/panel/panel.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const panelMeta: ComponentMeta;

package/components/progressbar/progressbar.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const progressBarMeta: ComponentMeta;

package/components/radio/radio.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const radioMeta: ComponentMeta;

package/components/richedit/richedit.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const richEditMeta: ComponentMeta;

package/components/search/search.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const searchMeta: ComponentMeta;

package/components/select/select.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const selectMeta: ComponentMeta;

package/components/tabs/tabs.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const tabsMeta: ComponentMeta;

package/components/tag/tag.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const tagMeta: ComponentMeta;

package/components/textarea/textarea.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const textareaMeta: ComponentMeta;

package/components/video/video.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const videoMeta: ComponentMeta;

package/icons/icons.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../catalog/types';
+export declare const iconMeta: ComponentMeta;

package/index.d.ts

@@ -5,7 +5,7 @@
 export { default as Button, buttonLink, } from './components/button';
 export type { ButtonProps, } from './components/button';
 export { default as Input } from './components/input';
-export type { InputProps } from './components/input';
+export type { InputProps, InputWidth, } from './components/input';
 export { default as Textarea } from './components/textarea';
 export type { TextareaProps } from './components/textarea';
 export { default as Select } from './components/select';

package/package.json

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

package/patterns/form/form.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const formMeta: ComponentMeta;

package/patterns/header/header.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const headerMeta: ComponentMeta;

package/patterns/masthead/masthead.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const mastheadMeta: ComponentMeta;

package/patterns/modal/modal.cjs

@@ -79,6 +79,7 @@ const Modal = ({
           Panel__default.default,
           {
             layout: panelLayout,
+            overflow: "content",
             heading,
             description,
             children

package/patterns/modal/modal.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/patterns/modal/modal.tsx"],"names":["useRef","classnames","useEffect","jsx","jsxs","Panel","Button"],"mappings":";;;;;;;;;;;;;;AA0CA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA,GAAe,QAAA;AAAA,EACf,IAAA,GAAO,SAAA;AAAA,EACP,eAAA,GAAkB,IAAA;AAAA,EAClB,aAAA,GAAgB,IAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,SAAA,GACJA,aAA0B,IAAI,CAAA;AAEhC,EAAA,MAAM,OAAA,GAAUC,qBAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,eACE,IAAA,KAAS,MAAA;AAAA,MACX,qBACE,YAAA,KACA;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,WAAA,GACJ,YAAA,KAAiB,YAAA,GACb,aAAA,GACA,MAAA;AAEN,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,SACJ,SAAA,CAAU,OAAA;AAEZ,IAAA,IAAI,CAAC,MAAA,EAAQ;AACX,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,IAAI,CAAC,OAAO,IAAA,EAAM;AAChB,QAAA,MAAA,CAAO,SAAA,EAAU;AAAA,MACnB;AAEA,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,OAAO,IAAA,EAAM;AACf,MAAA,MAAA,CAAO,KAAA,EAAM;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,YAAA,GAAe,CACnB,KAAA,KAGG;AACH,IAAA,KAAA,CAAM,cAAA,EAAe;AAErB,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KAGG;AACH,IAAA,OAAA,GAAU,KAAK,CAAA;AAEf,IAAA,IACE,MAAM,gBAAA,IACN,CAAC,mBACD,KAAA,CAAM,MAAA,KACJ,MAAM,aAAA,EACR;AACA,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MAET,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,wBAAAD,cAAA;AAAA,UAACE,sBAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,WAAA;AAAA,YACR,OAAA;AAAA,YACA,WAAA;AAAA,YAIC;AAAA;AAAA,SACH;AAAA,wBAEAF,cAAA;AAAA,UAACG,uBAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,SAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,SAAA,EAAU,cAAA;AAAA,YACV,YAAA,EAAY,UAAA;AAAA,YACZ,OAAA,EAAS;AAAA;AAAA;AACX,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"modal.cjs","sourcesContent":["import React, {\n  useEffect,\n  useRef,\n} from 'react';\n\nimport './modal.css';\nimport Button from '../../components/button';\nimport { classnames } from '../../components/helpers/classnames';\nimport Panel from '../../components/panel';\n\ntype ModalNativeProps = Omit<\n  React.DialogHTMLAttributes<HTMLDialogElement>,\n  | 'children'\n  | 'onCancel'\n  | 'onClose'\n  | 'open'\n>;\n\nexport interface ModalProps\n  extends ModalNativeProps {\n  open: boolean;\n  onClose: () => void;\n\n  heading?: React.ReactNode;\n  description?: React.ReactNode;\n\n  closeLabel: string;\n\n  presentation?:\n    | 'dialog'\n    | 'fullscreen';\n\n  size?:\n    | 'default'\n    | 'wide';\n\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n\n  children?: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  open,\n  onClose,\n  heading,\n  description,\n  closeLabel,\n  presentation = 'dialog',\n  size = 'default',\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  className = '',\n  children,\n  onClick,\n  ...props\n}) => {\n  const dialogRef =\n    useRef<HTMLDialogElement>(null);\n\n  const classes = classnames(\n    'modal',\n    className,\n    {\n      'modal--wide':\n        size === 'wide',\n      'modal--fullscreen':\n        presentation ===\n        'fullscreen',\n    },\n  );\n\n  const panelLayout =\n    presentation === 'fullscreen'\n      ? 'transparent'\n      : 'card';\n\n  useEffect(() => {\n    const dialog =\n      dialogRef.current;\n\n    if (!dialog) {\n      return;\n    }\n\n    if (open) {\n      if (!dialog.open) {\n        dialog.showModal();\n      }\n\n      return;\n    }\n\n    if (dialog.open) {\n      dialog.close();\n    }\n  }, [open]);\n\n  const handleCancel = (\n    event: React.SyntheticEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    event.preventDefault();\n\n    if (!closeOnEscape) {\n      return;\n    }\n\n    onClose();\n  };\n\n  const handleClick = (\n    event: React.MouseEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    onClick?.(event);\n\n    if (\n      event.defaultPrevented ||\n      !closeOnBackdrop ||\n      event.target !==\n        event.currentTarget\n    ) {\n      return;\n    }\n\n    onClose();\n  };\n\n  return (\n    <dialog\n      {...props}\n      ref={dialogRef}\n      className={classes}\n      onCancel={handleCancel}\n      onClick={handleClick}\n    >\n      <div className=\"modal__surface\">\n        <Panel\n          layout={panelLayout}\n          heading={heading}\n          description={\n            description\n          }\n        >\n          {children}\n        </Panel>\n\n        <Button\n          type=\"button\"\n          mode=\"toolbar\"\n          icon=\"close\"\n          className=\"modal__close\"\n          aria-label={closeLabel}\n          onClick={onClose}\n        />\n      </div>\n    </dialog>\n  );\n};\n\nexport default Modal;\n"]}
+{"version":3,"sources":["../../../src/patterns/modal/modal.tsx"],"names":["useRef","classnames","useEffect","jsx","jsxs","Panel","Button"],"mappings":";;;;;;;;;;;;;;AA0CA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA,GAAe,QAAA;AAAA,EACf,IAAA,GAAO,SAAA;AAAA,EACP,eAAA,GAAkB,IAAA;AAAA,EAClB,aAAA,GAAgB,IAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,SAAA,GACJA,aAA0B,IAAI,CAAA;AAEhC,EAAA,MAAM,OAAA,GAAUC,qBAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,eACE,IAAA,KAAS,MAAA;AAAA,MACX,qBACE,YAAA,KACA;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,WAAA,GACJ,YAAA,KAAiB,YAAA,GACb,aAAA,GACA,MAAA;AAEN,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,SACJ,SAAA,CAAU,OAAA;AAEZ,IAAA,IAAI,CAAC,MAAA,EAAQ;AACX,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,IAAI,CAAC,OAAO,IAAA,EAAM;AAChB,QAAA,MAAA,CAAO,SAAA,EAAU;AAAA,MACnB;AAEA,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,OAAO,IAAA,EAAM;AACf,MAAA,MAAA,CAAO,KAAA,EAAM;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,YAAA,GAAe,CACnB,KAAA,KAGG;AACH,IAAA,KAAA,CAAM,cAAA,EAAe;AAErB,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KAGG;AACH,IAAA,OAAA,GAAU,KAAK,CAAA;AAEf,IAAA,IACE,MAAM,gBAAA,IACN,CAAC,mBACD,KAAA,CAAM,MAAA,KACJ,MAAM,aAAA,EACR;AACA,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,uBACEC,cAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MAET,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,wBAAAD,cAAA;AAAA,UAACE,sBAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,WAAA;AAAA,YACR,QAAA,EAAS,SAAA;AAAA,YACT,OAAA;AAAA,YACA,WAAA;AAAA,YAIC;AAAA;AAAA,SACH;AAAA,wBAEAF,cAAA;AAAA,UAACG,uBAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,SAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,SAAA,EAAU,cAAA;AAAA,YACV,YAAA,EAAY,UAAA;AAAA,YACZ,OAAA,EAAS;AAAA;AAAA;AACX,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"modal.cjs","sourcesContent":["import React, {\n  useEffect,\n  useRef,\n} from 'react';\n\nimport './modal.css';\nimport Button from '../../components/button';\nimport { classnames } from '../../components/helpers/classnames';\nimport Panel from '../../components/panel';\n\ntype ModalNativeProps = Omit<\n  React.DialogHTMLAttributes<HTMLDialogElement>,\n  | 'children'\n  | 'onCancel'\n  | 'onClose'\n  | 'open'\n>;\n\nexport interface ModalProps\n  extends ModalNativeProps {\n  open: boolean;\n  onClose: () => void;\n\n  heading?: React.ReactNode;\n  description?: React.ReactNode;\n\n  closeLabel: string;\n\n  presentation?:\n    | 'dialog'\n    | 'fullscreen';\n\n  size?:\n    | 'default'\n    | 'wide';\n\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n\n  children?: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  open,\n  onClose,\n  heading,\n  description,\n  closeLabel,\n  presentation = 'dialog',\n  size = 'default',\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  className = '',\n  children,\n  onClick,\n  ...props\n}) => {\n  const dialogRef =\n    useRef<HTMLDialogElement>(null);\n\n  const classes = classnames(\n    'modal',\n    className,\n    {\n      'modal--wide':\n        size === 'wide',\n      'modal--fullscreen':\n        presentation ===\n        'fullscreen',\n    },\n  );\n\n  const panelLayout =\n    presentation === 'fullscreen'\n      ? 'transparent'\n      : 'card';\n\n  useEffect(() => {\n    const dialog =\n      dialogRef.current;\n\n    if (!dialog) {\n      return;\n    }\n\n    if (open) {\n      if (!dialog.open) {\n        dialog.showModal();\n      }\n\n      return;\n    }\n\n    if (dialog.open) {\n      dialog.close();\n    }\n  }, [open]);\n\n  const handleCancel = (\n    event: React.SyntheticEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    event.preventDefault();\n\n    if (!closeOnEscape) {\n      return;\n    }\n\n    onClose();\n  };\n\n  const handleClick = (\n    event: React.MouseEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    onClick?.(event);\n\n    if (\n      event.defaultPrevented ||\n      !closeOnBackdrop ||\n      event.target !==\n        event.currentTarget\n    ) {\n      return;\n    }\n\n    onClose();\n  };\n\n  return (\n    <dialog\n      {...props}\n      ref={dialogRef}\n      className={classes}\n      onCancel={handleCancel}\n      onClick={handleClick}\n    >\n      <div className=\"modal__surface\">\n        <Panel\n          layout={panelLayout}\n          overflow=\"content\"\n          heading={heading}\n          description={\n            description\n          }\n        >\n          {children}\n        </Panel>\n\n        <Button\n          type=\"button\"\n          mode=\"toolbar\"\n          icon=\"close\"\n          className=\"modal__close\"\n          aria-label={closeLabel}\n          onClick={onClose}\n        />\n      </div>\n    </dialog>\n  );\n};\n\nexport default Modal;\n"]}

package/patterns/modal/modal.css

@@ -1,7 +1,8 @@
 .modal {
   /* color */
-  --modal-backdrop-bg: rgb(0 0 0 / 40%);
+  --modal-color: var(--color-text-container);
 
+  background: transparent;
   color: inherit;
 
   /* typography */
@@ -20,11 +21,39 @@
   margin: 0;
   padding: var(--modal-padding);
 
+  align-items: center;
+  justify-content: center;
+
+  /* border */
   border: 0;
 
+  /* depth */
+
+  /* motion */
+}
+
+.modal:not([open]) {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: none;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.modal[open] {
+  /* color */
+
+  /* typography */
+
+  /* size */
   display: flex;
-  align-items: center;
-  justify-content: center;
 
   /* border */
 
@@ -35,7 +64,7 @@
 
 .modal::backdrop {
   /* color */
-  background: var(--modal-backdrop-bg);
+  background: rgb(0 0 0 / 40%);
 
   /* typography */
 
@@ -56,10 +85,28 @@
   /* size */
   position: relative;
 
+  display: flex;
+  flex-direction: column;
+
   width: var(--modal-content-width);
   max-height: 100%;
 
-  overflow: auto;
+  overflow: hidden;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.modal__surface > .panel {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  min-height: 0;
 
   /* border */
 
@@ -70,6 +117,7 @@
 
 .modal__close {
   /* color */
+  color: var(--modal-color);
 
   /* typography */
 
@@ -102,6 +150,7 @@
 
 .modal--fullscreen {
   /* color */
+  --modal-color: var(--color-text);
 
   /* typography */
 
@@ -131,7 +180,7 @@
   height: 100%;
   max-height: none;
 
-  overflow: auto;
+  overflow: hidden;
 
   /* border */
 
@@ -147,7 +196,7 @@
 
   /* size */
   flex: 1;
-  min-height: 100%;
+  min-height: 0;
 
   /* border */
 

package/patterns/modal/modal.js

@@ -72,6 +72,7 @@ const Modal = ({
           Panel,
           {
             layout: panelLayout,
+            overflow: "content",
             heading,
             description,
             children

package/patterns/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/patterns/modal/modal.tsx"],"names":[],"mappings":";;;;;;;AA0CA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA,GAAe,QAAA;AAAA,EACf,IAAA,GAAO,SAAA;AAAA,EACP,eAAA,GAAkB,IAAA;AAAA,EAClB,aAAA,GAAgB,IAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,SAAA,GACJ,OAA0B,IAAI,CAAA;AAEhC,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,eACE,IAAA,KAAS,MAAA;AAAA,MACX,qBACE,YAAA,KACA;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,WAAA,GACJ,YAAA,KAAiB,YAAA,GACb,aAAA,GACA,MAAA;AAEN,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,SACJ,SAAA,CAAU,OAAA;AAEZ,IAAA,IAAI,CAAC,MAAA,EAAQ;AACX,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,IAAI,CAAC,OAAO,IAAA,EAAM;AAChB,QAAA,MAAA,CAAO,SAAA,EAAU;AAAA,MACnB;AAEA,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,OAAO,IAAA,EAAM;AACf,MAAA,MAAA,CAAO,KAAA,EAAM;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,YAAA,GAAe,CACnB,KAAA,KAGG;AACH,IAAA,KAAA,CAAM,cAAA,EAAe;AAErB,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KAGG;AACH,IAAA,OAAA,GAAU,KAAK,CAAA;AAEf,IAAA,IACE,MAAM,gBAAA,IACN,CAAC,mBACD,KAAA,CAAM,MAAA,KACJ,MAAM,aAAA,EACR;AACA,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MAET,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,WAAA;AAAA,YACR,OAAA;AAAA,YACA,WAAA;AAAA,YAIC;AAAA;AAAA,SACH;AAAA,wBAEA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,SAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,SAAA,EAAU,cAAA;AAAA,YACV,YAAA,EAAY,UAAA;AAAA,YACZ,OAAA,EAAS;AAAA;AAAA;AACX,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"modal.js","sourcesContent":["import React, {\n  useEffect,\n  useRef,\n} from 'react';\n\nimport './modal.css';\nimport Button from '../../components/button';\nimport { classnames } from '../../components/helpers/classnames';\nimport Panel from '../../components/panel';\n\ntype ModalNativeProps = Omit<\n  React.DialogHTMLAttributes<HTMLDialogElement>,\n  | 'children'\n  | 'onCancel'\n  | 'onClose'\n  | 'open'\n>;\n\nexport interface ModalProps\n  extends ModalNativeProps {\n  open: boolean;\n  onClose: () => void;\n\n  heading?: React.ReactNode;\n  description?: React.ReactNode;\n\n  closeLabel: string;\n\n  presentation?:\n    | 'dialog'\n    | 'fullscreen';\n\n  size?:\n    | 'default'\n    | 'wide';\n\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n\n  children?: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  open,\n  onClose,\n  heading,\n  description,\n  closeLabel,\n  presentation = 'dialog',\n  size = 'default',\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  className = '',\n  children,\n  onClick,\n  ...props\n}) => {\n  const dialogRef =\n    useRef<HTMLDialogElement>(null);\n\n  const classes = classnames(\n    'modal',\n    className,\n    {\n      'modal--wide':\n        size === 'wide',\n      'modal--fullscreen':\n        presentation ===\n        'fullscreen',\n    },\n  );\n\n  const panelLayout =\n    presentation === 'fullscreen'\n      ? 'transparent'\n      : 'card';\n\n  useEffect(() => {\n    const dialog =\n      dialogRef.current;\n\n    if (!dialog) {\n      return;\n    }\n\n    if (open) {\n      if (!dialog.open) {\n        dialog.showModal();\n      }\n\n      return;\n    }\n\n    if (dialog.open) {\n      dialog.close();\n    }\n  }, [open]);\n\n  const handleCancel = (\n    event: React.SyntheticEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    event.preventDefault();\n\n    if (!closeOnEscape) {\n      return;\n    }\n\n    onClose();\n  };\n\n  const handleClick = (\n    event: React.MouseEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    onClick?.(event);\n\n    if (\n      event.defaultPrevented ||\n      !closeOnBackdrop ||\n      event.target !==\n        event.currentTarget\n    ) {\n      return;\n    }\n\n    onClose();\n  };\n\n  return (\n    <dialog\n      {...props}\n      ref={dialogRef}\n      className={classes}\n      onCancel={handleCancel}\n      onClick={handleClick}\n    >\n      <div className=\"modal__surface\">\n        <Panel\n          layout={panelLayout}\n          heading={heading}\n          description={\n            description\n          }\n        >\n          {children}\n        </Panel>\n\n        <Button\n          type=\"button\"\n          mode=\"toolbar\"\n          icon=\"close\"\n          className=\"modal__close\"\n          aria-label={closeLabel}\n          onClick={onClose}\n        />\n      </div>\n    </dialog>\n  );\n};\n\nexport default Modal;\n"]}
+{"version":3,"sources":["../../../src/patterns/modal/modal.tsx"],"names":[],"mappings":";;;;;;;AA0CA,MAAM,QAA8B,CAAC;AAAA,EACnC,IAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA,GAAe,QAAA;AAAA,EACf,IAAA,GAAO,SAAA;AAAA,EACP,eAAA,GAAkB,IAAA;AAAA,EAClB,aAAA,GAAgB,IAAA;AAAA,EAChB,SAAA,GAAY,EAAA;AAAA,EACZ,QAAA;AAAA,EACA,OAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAM;AACJ,EAAA,MAAM,SAAA,GACJ,OAA0B,IAAI,CAAA;AAEhC,EAAA,MAAM,OAAA,GAAU,UAAA;AAAA,IACd,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,MACE,eACE,IAAA,KAAS,MAAA;AAAA,MACX,qBACE,YAAA,KACA;AAAA;AACJ,GACF;AAEA,EAAA,MAAM,WAAA,GACJ,YAAA,KAAiB,YAAA,GACb,aAAA,GACA,MAAA;AAEN,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,SACJ,SAAA,CAAU,OAAA;AAEZ,IAAA,IAAI,CAAC,MAAA,EAAQ;AACX,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,IAAI,CAAC,OAAO,IAAA,EAAM;AAChB,QAAA,MAAA,CAAO,SAAA,EAAU;AAAA,MACnB;AAEA,MAAA;AAAA,IACF;AAEA,IAAA,IAAI,OAAO,IAAA,EAAM;AACf,MAAA,MAAA,CAAO,KAAA,EAAM;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,YAAA,GAAe,CACnB,KAAA,KAGG;AACH,IAAA,KAAA,CAAM,cAAA,EAAe;AAErB,IAAA,IAAI,CAAC,aAAA,EAAe;AAClB,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,MAAM,WAAA,GAAc,CAClB,KAAA,KAGG;AACH,IAAA,OAAA,GAAU,KAAK,CAAA;AAEf,IAAA,IACE,MAAM,gBAAA,IACN,CAAC,mBACD,KAAA,CAAM,MAAA,KACJ,MAAM,aAAA,EACR;AACA,MAAA;AAAA,IACF;AAEA,IAAA,OAAA,EAAQ;AAAA,EACV,CAAA;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,OAAA;AAAA,MACX,QAAA,EAAU,YAAA;AAAA,MACV,OAAA,EAAS,WAAA;AAAA,MAET,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,gBAAA,EACb,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,MAAA,EAAQ,WAAA;AAAA,YACR,QAAA,EAAS,SAAA;AAAA,YACT,OAAA;AAAA,YACA,WAAA;AAAA,YAIC;AAAA;AAAA,SACH;AAAA,wBAEA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,IAAA,EAAK,SAAA;AAAA,YACL,IAAA,EAAK,OAAA;AAAA,YACL,SAAA,EAAU,cAAA;AAAA,YACV,YAAA,EAAY,UAAA;AAAA,YACZ,OAAA,EAAS;AAAA;AAAA;AACX,OAAA,EACF;AAAA;AAAA,GACF;AAEJ,CAAA;AAEA,IAAO,aAAA,GAAQ","file":"modal.js","sourcesContent":["import React, {\n  useEffect,\n  useRef,\n} from 'react';\n\nimport './modal.css';\nimport Button from '../../components/button';\nimport { classnames } from '../../components/helpers/classnames';\nimport Panel from '../../components/panel';\n\ntype ModalNativeProps = Omit<\n  React.DialogHTMLAttributes<HTMLDialogElement>,\n  | 'children'\n  | 'onCancel'\n  | 'onClose'\n  | 'open'\n>;\n\nexport interface ModalProps\n  extends ModalNativeProps {\n  open: boolean;\n  onClose: () => void;\n\n  heading?: React.ReactNode;\n  description?: React.ReactNode;\n\n  closeLabel: string;\n\n  presentation?:\n    | 'dialog'\n    | 'fullscreen';\n\n  size?:\n    | 'default'\n    | 'wide';\n\n  closeOnBackdrop?: boolean;\n  closeOnEscape?: boolean;\n\n  children?: React.ReactNode;\n}\n\nconst Modal: React.FC<ModalProps> = ({\n  open,\n  onClose,\n  heading,\n  description,\n  closeLabel,\n  presentation = 'dialog',\n  size = 'default',\n  closeOnBackdrop = true,\n  closeOnEscape = true,\n  className = '',\n  children,\n  onClick,\n  ...props\n}) => {\n  const dialogRef =\n    useRef<HTMLDialogElement>(null);\n\n  const classes = classnames(\n    'modal',\n    className,\n    {\n      'modal--wide':\n        size === 'wide',\n      'modal--fullscreen':\n        presentation ===\n        'fullscreen',\n    },\n  );\n\n  const panelLayout =\n    presentation === 'fullscreen'\n      ? 'transparent'\n      : 'card';\n\n  useEffect(() => {\n    const dialog =\n      dialogRef.current;\n\n    if (!dialog) {\n      return;\n    }\n\n    if (open) {\n      if (!dialog.open) {\n        dialog.showModal();\n      }\n\n      return;\n    }\n\n    if (dialog.open) {\n      dialog.close();\n    }\n  }, [open]);\n\n  const handleCancel = (\n    event: React.SyntheticEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    event.preventDefault();\n\n    if (!closeOnEscape) {\n      return;\n    }\n\n    onClose();\n  };\n\n  const handleClick = (\n    event: React.MouseEvent<\n      HTMLDialogElement\n    >,\n  ) => {\n    onClick?.(event);\n\n    if (\n      event.defaultPrevented ||\n      !closeOnBackdrop ||\n      event.target !==\n        event.currentTarget\n    ) {\n      return;\n    }\n\n    onClose();\n  };\n\n  return (\n    <dialog\n      {...props}\n      ref={dialogRef}\n      className={classes}\n      onCancel={handleCancel}\n      onClick={handleClick}\n    >\n      <div className=\"modal__surface\">\n        <Panel\n          layout={panelLayout}\n          overflow=\"content\"\n          heading={heading}\n          description={\n            description\n          }\n        >\n          {children}\n        </Panel>\n\n        <Button\n          type=\"button\"\n          mode=\"toolbar\"\n          icon=\"close\"\n          className=\"modal__close\"\n          aria-label={closeLabel}\n          onClick={onClose}\n        />\n      </div>\n    </dialog>\n  );\n};\n\nexport default Modal;\n"]}

package/patterns/modal/modal.meta.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentMeta } from '../../catalog/types';
+export declare const modalMeta: ComponentMeta;

package/styles.css

@@ -3133,6 +3133,7 @@
   --input-height: var(--size-control-height);
   --input-padding-x: var(--padding-control-horz);
 
+  box-sizing: border-box;
   height: var(--input-height);
   padding-inline: var(--input-padding-x);
 
@@ -3161,6 +3162,21 @@
     background-color var(--input-transition-duration) ease;
 }
 
+.input--width-short {
+  /* size */
+  width: auto;
+}
+
+.input--width-default {
+  /* size */
+  width: 400px;
+}
+
+.input--width-max {
+  /* size */
+  width: 100%;
+}
+
 .input::placeholder {
   color: var(--input-placeholder);
 }
@@ -3614,16 +3630,13 @@
   /* motion */
 }
 
-.panel__header {
+.panel--content-overflow {
   /* color */
 
   /* typography */
 
   /* size */
-  display: flex;
-  flex-direction: column;
-  gap: var(--panel-title-gap);
-  width: 100%;
+  overflow: hidden;
 
   /* border */
 
@@ -3639,6 +3652,7 @@
   /* typography */
 
   /* size */
+  flex: 0 0 auto;
   margin: 0;
 
   /* border */
@@ -3686,6 +3700,24 @@
   /* motion */
 }
 
+.panel__body {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: flex;
+  flex-direction: column;
+  gap: var(--panel-title-gap);
+  width: 100%;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 .panel__description {
   /* color */
   color: inherit;
@@ -3722,6 +3754,24 @@
   /* motion */
 }
 
+.panel--content-overflow .panel__body {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  flex: 1;
+  min-height: 0;
+
+  overflow: auto;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
 /* src/components/progressbar/progressbar.css */
 .progressbar {
   /* color */
@@ -5220,8 +5270,9 @@
 /* src/patterns/modal/modal.css */
 .modal {
   /* color */
-  --modal-backdrop-bg: rgb(0 0 0 / 40%);
+  --modal-color: var(--color-text-container);
 
+  background: transparent;
   color: inherit;
 
   /* typography */
@@ -5240,11 +5291,39 @@
   margin: 0;
   padding: var(--modal-padding);
 
+  align-items: center;
+  justify-content: center;
+
+  /* border */
   border: 0;
 
+  /* depth */
+
+  /* motion */
+}
+
+.modal:not([open]) {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  display: none;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.modal[open] {
+  /* color */
+
+  /* typography */
+
+  /* size */
   display: flex;
-  align-items: center;
-  justify-content: center;
 
   /* border */
 
@@ -5255,7 +5334,7 @@
 
 .modal::backdrop {
   /* color */
-  background: var(--modal-backdrop-bg);
+  background: rgb(0 0 0 / 40%);
 
   /* typography */
 
@@ -5276,10 +5355,28 @@
   /* size */
   position: relative;
 
+  display: flex;
+  flex-direction: column;
+
   width: var(--modal-content-width);
   max-height: 100%;
 
-  overflow: auto;
+  overflow: hidden;
+
+  /* border */
+
+  /* depth */
+
+  /* motion */
+}
+
+.modal__surface > .panel {
+  /* color */
+
+  /* typography */
+
+  /* size */
+  min-height: 0;
 
   /* border */
 
@@ -5290,6 +5387,7 @@
 
 .modal__close {
   /* color */
+  color: var(--modal-color);
 
   /* typography */
 
@@ -5322,6 +5420,7 @@
 
 .modal--fullscreen {
   /* color */
+  --modal-color: var(--color-text);
 
   /* typography */
 
@@ -5351,7 +5450,7 @@
   height: 100%;
   max-height: none;
 
-  overflow: auto;
+  overflow: hidden;
 
   /* border */
 
@@ -5367,7 +5466,7 @@
 
   /* size */
   flex: 1;
-  min-height: 100%;
+  min-height: 0;
 
   /* border */