@abgov/react-components 4.0.0-alpha.1 → 4.0.0-alpha.12

package/index.d.ts

@@ -3,11 +3,15 @@
  */
 import '@abgov/web-components';
 import { GoAAppHeader } from './lib/app-header/app-header';
+import { GoAAppFooter } from './lib/app-footer/app-footer';
+import { GoAMetaLink } from './lib/app-footer/meta-link';
+import { GoANavigationLink } from './lib/app-footer/navigation-link';
 import { GoABadge, GoAInfoBadge, GoAEmergencyBadge, GoASuccessBadge, GoAWarningBadge } from './lib/badge/badge';
 import { GoAButton } from './lib/button/button';
 import { GoAButtonGroup } from './lib/button-group/button-group';
 import { GoACallout } from './lib/callout/callout';
 import { GoACheckbox } from './lib/checkbox/checkbox';
+import { GoAChip } from './lib/chip/chip';
 import { GoACircularProgress } from './lib/circular-progress/circular-progress';
 import { GoAContainer } from './lib/container/container';
 import { GoADropdown, GoADropdownOption } from './lib/dropdown/dropdown';
@@ -29,4 +33,4 @@ import type { GoAIconType } from './lib/icons';
 import type { GoABadgeType } from './lib/badge/badge';
 export type { GoAIconType };
 export type { GoABadgeType };
-export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge, };
+export { GoAAppHeader, GoAAppFooter, GoAMetaLink, GoANavigationLink, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge, };

package/lib/app-footer/app-footer.d.ts

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+interface WCProps {
+    id?: string;
+    appurl?: string;
+    title?: string;
+    copyrighturl?: string;
+    copyrighttext?: string;
+    multicolumnsectionnames?: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-app-footer': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface Props {
+    id?: string;
+    appUrl?: string;
+    title?: string;
+    copyrightUrl?: string;
+    copyrightText?: string;
+    multiColumnSectionNames?: string;
+}
+export declare const GoAAppFooter: FC<Props>;
+export default GoAAppFooter;

package/lib/app-footer/meta-link.d.ts

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+interface WCProps {
+    footerid?: string;
+    url: string;
+    title: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-meta-link': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    footerId?: string;
+    url: string;
+    title: string;
+}
+export declare const GoAMetaLink: FC<Props>;
+export default GoAMetaLink;

package/lib/app-footer/navigation-link.d.ts

@@ -0,0 +1,22 @@
+import React, { FC } from 'react';
+interface WCProps {
+    footerid?: string;
+    url: string;
+    title: string;
+    section?: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-navigation-link': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+interface Props {
+    footerId?: string;
+    url: string;
+    title: string;
+    section?: string;
+}
+export declare const GoANavigationLink: FC<Props>;
+export default GoANavigationLink;

package/lib/button/button.d.ts

@@ -1,6 +1,7 @@
 import React, { FC, ReactNode } from 'react';
 import './button.css';
-export declare type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'get-started';
+import { GoAIconType } from '../icons';
+export declare type ButtonType = 'primary' | 'secondary' | 'tertiary' | 'start';
 export declare type ButtonSize = 'compact' | 'normal';
 export declare type ButtonVariant = 'default' | 'danger';
 interface WCProps {
@@ -9,6 +10,8 @@ interface WCProps {
     variant?: ButtonVariant;
     disabled?: boolean;
     title?: string;
+    leadingicon?: string;
+    trailingicon?: string;
     ref: React.RefObject<HTMLElement>;
 }
 declare global {
@@ -24,6 +27,8 @@ declare type ButtonProps = {
     size?: ButtonSize;
     variant?: ButtonVariant;
     disabled?: boolean;
+    leadingIcon?: GoAIconType;
+    trailingIcon?: GoAIconType;
     onClick: (e: any) => void;
     children: ReactNode;
 };

package/lib/chip/chip.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+interface WCProps {
+    ref: React.RefObject<HTMLElement>;
+    leadingicon: string;
+    error: boolean;
+    deletable: boolean;
+    content: string;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-chip': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface Props {
+    onClick?: () => void;
+    deletable?: boolean;
+    leadingIcon?: string;
+    error?: boolean;
+    content: string;
+}
+export declare const GoAChip: ({ leadingIcon, deletable, error, content, onClick }: Props) => JSX.Element;
+export default GoAChip;

package/lib/flex/row.d.ts

@@ -1,7 +1,16 @@
-import { FC } from "react";
-interface Props {
-    gap?: 'small' | 'medium' | 'large';
-    minWidth?: number | string;
+import React, { FC } from "react";
+interface WCProps {
+    gap: 'small' | 'medium' | 'large';
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'goa-flex-row': WCProps & React.HTMLAttributes<HTMLElement>;
+        }
+    }
+}
+export interface Props {
+    gap: 'small' | 'medium' | 'large';
 }
 export declare const GoAFlexRow: FC<Props>;
 export default GoAFlexRow;

package/lib/input/input.d.ts

@@ -11,10 +11,13 @@ interface WCProps {
     trailingicon?: string;
     variant: string;
     disabled?: boolean;
-    error?: string;
+    error?: boolean;
     readonly?: boolean;
     focused?: boolean;
+    showcounter?: boolean;
+    maxcharcount?: number;
     handletrailingiconclick: boolean;
+    width?: string;
     testid?: string;
 }
 declare global {
@@ -37,7 +40,10 @@ export interface Props {
     variant?: 'goa' | 'bare';
     focused?: boolean;
     readonly?: boolean;
-    error?: string;
+    error?: boolean;
+    width?: string;
+    showCounter?: boolean;
+    maxCharCount?: number;
     testId?: string;
 }
 export declare const GoAInput: FC<Props & {

package/lib/modal/modal.d.ts

@@ -6,6 +6,7 @@ interface WCProps {
     width?: string;
     closable?: boolean;
     scrollable?: boolean;
+    transition?: "fast" | "slow" | "none";
 }
 declare global {
     namespace JSX {
@@ -19,6 +20,7 @@ interface Props {
     width?: string;
     actions?: React.ReactElement;
     onClose?: () => void;
+    transition?: "fast" | "slow" | "none";
     open?: boolean;
 }
 export declare const GoAModal: FC<Props>;

package/lib/textarea/textarea.d.ts

@@ -5,8 +5,10 @@ interface WCProps {
     value: string;
     placeholder?: string;
     rows?: number;
-    error: boolean;
-    disabled: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    showcounter?: boolean;
+    maxcharcount?: number;
 }
 declare global {
     namespace JSX {
@@ -21,9 +23,11 @@ interface Props {
     id?: string;
     placeholder?: string;
     rows?: number;
-    error: boolean;
-    disabled: boolean;
-    testId: string;
+    error?: boolean;
+    disabled?: boolean;
+    showCounter?: boolean;
+    maxCharCount?: number;
+    testId?: string;
     onChange: (name: string, value: string) => void;
 }
 export declare const GoATextArea: FC<Props>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/react-components",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.12",
   "description": "Government of Alberta - UI components for React",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"

package/react-components.esm.js

@@ -1,6 +1,6 @@
 import '@abgov/web-components';
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 
 const GoAAppHeader = ({
   title,
@@ -15,6 +15,59 @@ const GoAAppHeader = ({
   }), void 0);
 };
 
+const GoAAppFooter = ({
+  id,
+  appUrl,
+  title,
+  copyrightUrl,
+  copyrightText,
+  multiColumnSectionNames,
+  children
+}) => {
+  return jsx("goa-app-footer", Object.assign({
+    id: id,
+    appurl: appUrl,
+    title: title,
+    copyrighturl: copyrightUrl,
+    copyrighttext: copyrightText,
+    multicolumnsectionnames: multiColumnSectionNames
+  }, {
+    children: children
+  }), void 0);
+};
+
+const GoAMetaLink = ({
+  footerId,
+  url,
+  title,
+  children
+}) => {
+  return jsx("goa-meta-link", Object.assign({
+    footerid: footerId,
+    url: url,
+    title: title
+  }, {
+    children: children
+  }), void 0);
+};
+
+const GoANavigationLink = ({
+  footerId,
+  url,
+  title,
+  section,
+  children
+}) => {
+  return jsx("goa-navigation-link", Object.assign({
+    footerid: footerId,
+    url: url,
+    title: title,
+    section: section
+  }, {
+    children: children
+  }), void 0);
+};
+
 const GoABadge = ({
   type,
   content,
@@ -109,6 +162,8 @@ const GoAButton = ({
   type: _type = 'primary',
   size: _size = 'normal',
   variant: _variant = 'default',
+  leadingIcon,
+  trailingIcon,
   children,
   onClick
 }) => {
@@ -136,13 +191,15 @@ const GoAButton = ({
     size: _size,
     variant: _variant,
     disabled: _disabled,
-    title: title
+    title: title,
+    leadingicon: leadingIcon,
+    trailingicon: trailingIcon
   }, {
     children: children
   }), void 0);
 };
 
-var css_248z = "goa-button-group > goa-button ~ goa-button {\n  margin: 0;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 320px) {\n  goa-button-group > goa-button ~ goa-button {\n    margin: 0;\n    /* margin-left: 0.25rem; */\n  }\n}\n";
+var css_248z = "goa-button-group > goa-button ~ goa-button {\n  margin: 0;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 480px) {\n  goa-button-group > goa-button ~ goa-button {\n    margin: 0;\n  }\n}\n";
 styleInject(css_248z);
 
 const GoAButtonGroup = ({
@@ -213,6 +270,37 @@ const GoACheckbox = ({
   }), void 0);
 };
 
+const GoAChip = ({
+  leadingIcon: _leadingIcon = "",
+  deletable: _deletable = false,
+  error: _error = false,
+  content,
+  onClick
+}) => {
+  const el = useRef(null);
+  useEffect(() => {
+    if (!el.current) return;
+    if (!onClick) return;
+    const current = el.current;
+
+    const listener = e => {
+      onClick();
+    };
+
+    current.addEventListener('_click', listener);
+    return () => {
+      current.removeEventListener('_click', listener);
+    };
+  }, [el, onClick]);
+  return jsx("goa-chip", {
+    ref: el,
+    leadingicon: _leadingIcon,
+    error: _error,
+    deletable: _deletable,
+    content: content
+  }, void 0);
+};
+
 const GoACircularProgress = ({
   type,
   visible,
@@ -306,32 +394,12 @@ const GoADropdown = props => {
 
 const GoAFlexRow = ({
   gap,
-  minWidth,
   children
 }) => {
-  const style = {
-    gap: gap === 'small' ? '1rem' : gap === 'medium' ? '2rem' : gap === 'large' ? '3rem' : '0'
-  };
-
-  const getChildren = () => {
-    if (!children) {
-      return null;
-    }
-
-    return React.Children.map(children, child => {
-      return /*#__PURE__*/React.cloneElement(child, {
-        style: Object.assign({
-          flexBasis: minWidth
-        }, child.props.style)
-      });
-    });
-  };
-
-  return jsx("div", Object.assign({
-    className: "goa-flex-row",
-    style: style
+  return jsx("goa-flex-row", Object.assign({
+    gap: gap
   }, {
-    children: getChildren()
+    children: children
   }), void 0);
 };
 
@@ -465,6 +533,9 @@ const GoAInput = ({
   value,
   placeholder,
   error,
+  width,
+  showCounter,
+  maxCharCount,
   testId,
   onTrailingIconClick,
   onChange
@@ -511,6 +582,9 @@ const GoAInput = ({
     error: error,
     "data-testid": testId,
     value: value,
+    width: width,
+    showcounter: showCounter,
+    maxcharcount: maxCharCount,
     handletrailingiconclick: !!onTrailingIconClick
   }, void 0);
 };
@@ -607,6 +681,7 @@ const GoAModal = ({
   open,
   width,
   actions,
+  transition,
   onClose
 }) => {
   const el = useRef(null);
@@ -632,7 +707,8 @@ const GoAModal = ({
     open: open,
     closable: !!onClose,
     scrollable: true,
-    width: width
+    width: width,
+    transition: transition
   }, {
     children: [actions && jsx("div", Object.assign({
       slot: "actions"
@@ -760,6 +836,8 @@ const GoATextArea = ({
   placeholder,
   rows,
   disabled,
+  showCounter,
+  maxCharCount,
   testId,
   error,
   onChange
@@ -792,9 +870,11 @@ const GoATextArea = ({
     value: value,
     rows: rows,
     disabled: disabled,
+    showcounter: showCounter,
+    maxcharcount: maxCharCount,
     error: error,
     "data-testid": testId
   }, void 0);
 };
 
-export { GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMicrositeHeader, GoAModal, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge };
+export { GoAAppFooter, GoAAppHeader, GoABadge, GoAButton, GoAButtonGroup, GoACallout, GoACheckbox, GoAChip, GoACircularProgress, GoAContainer, GoADropdown, GoADropdownOption, GoAEmergencyBadge, GoAFlexRow, GoAFormItem, GoAHeroBanner, GoAHeroBannerActions, GoAIcon, GoAIconButton, GoAInfoBadge, GoAInput, GoAInputDate, GoAInputDateTime, GoAInputEmail, GoAInputFile, GoAInputMonth, GoAInputNumber, GoAInputPassword, GoAInputRange, GoAInputSearch, GoAInputTel, GoAInputText, GoAInputTime, GoAInputUrl, GoAMetaLink, GoAMicrositeHeader, GoAModal, GoANavigationLink, GoANotification, GoAPageBlock, GoARadioGroup, GoARadioItem, GoASkeleton, GoASpinner, GoASuccessBadge, GoATextArea, GoAWarningBadge };

package/react-components.umd.js

@@ -2,11 +2,7 @@
     typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@abgov/web-components'), require('react/jsx-runtime'), require('react')) :
     typeof define === 'function' && define.amd ? define(['exports', '@abgov/web-components', 'react/jsx-runtime', 'react'], factory) :
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactComponents = {}, null, global.jsxRuntime, global.React));
-})(this, (function (exports, webComponents, jsxRuntime, React) { 'use strict';
-
-    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+})(this, (function (exports, webComponents, jsxRuntime, react) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -58,6 +54,56 @@
       }), void 0);
     };
 
+    var GoAAppFooter = function GoAAppFooter(_a) {
+      var id = _a.id,
+          appUrl = _a.appUrl,
+          title = _a.title,
+          copyrightUrl = _a.copyrightUrl,
+          copyrightText = _a.copyrightText,
+          multiColumnSectionNames = _a.multiColumnSectionNames,
+          children = _a.children;
+      return jsxRuntime.jsx("goa-app-footer", __assign({
+        id: id,
+        appurl: appUrl,
+        title: title,
+        copyrighturl: copyrightUrl,
+        copyrighttext: copyrightText,
+        multicolumnsectionnames: multiColumnSectionNames
+      }, {
+        children: children
+      }), void 0);
+    };
+
+    var GoAMetaLink = function GoAMetaLink(_a) {
+      var footerId = _a.footerId,
+          url = _a.url,
+          title = _a.title,
+          children = _a.children;
+      return jsxRuntime.jsx("goa-meta-link", __assign({
+        footerid: footerId,
+        url: url,
+        title: title
+      }, {
+        children: children
+      }), void 0);
+    };
+
+    var GoANavigationLink = function GoANavigationLink(_a) {
+      var footerId = _a.footerId,
+          url = _a.url,
+          title = _a.title,
+          section = _a.section,
+          children = _a.children;
+      return jsxRuntime.jsx("goa-navigation-link", __assign({
+        footerid: footerId,
+        url: url,
+        title: title,
+        section: section
+      }, {
+        children: children
+      }), void 0);
+    };
+
     var GoABadge = function GoABadge(_a) {
       var type = _a.type,
           content = _a.content,
@@ -151,10 +197,12 @@
           size = _d === void 0 ? 'normal' : _d,
           _e = _a.variant,
           variant = _e === void 0 ? 'default' : _e,
+          leadingIcon = _a.leadingIcon,
+          trailingIcon = _a.trailingIcon,
           children = _a.children,
           onClick = _a.onClick;
-      var el = React.useRef(null);
-      React.useEffect(function () {
+      var el = react.useRef(null);
+      react.useEffect(function () {
         if (!el.current) {
           return;
         }
@@ -177,13 +225,15 @@
         size: size,
         variant: variant,
         disabled: disabled,
-        title: title
+        title: title,
+        leadingicon: leadingIcon,
+        trailingicon: trailingIcon
       }, {
         children: children
       }), void 0);
     };
 
-    var css_248z = "goa-button-group > goa-button ~ goa-button {\n  margin: 0;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 320px) {\n  goa-button-group > goa-button ~ goa-button {\n    margin: 0;\n    /* margin-left: 0.25rem; */\n  }\n}\n";
+    var css_248z = "goa-button-group > goa-button ~ goa-button {\n  margin: 0;\n  margin-top: 0.25rem;\n}\n\n@media (min-width: 480px) {\n  goa-button-group > goa-button ~ goa-button {\n    margin: 0;\n  }\n}\n";
     styleInject(css_248z);
 
     var GoAButtonGroup = function GoAButtonGroup(_a) {
@@ -220,8 +270,8 @@
           text = _a.text,
           children = _a.children,
           onChange = _a.onChange;
-      var el = React.useRef(null);
-      React.useEffect(function () {
+      var el = react.useRef(null);
+      react.useEffect(function () {
         if (!el.current) {
           return;
         }
@@ -252,6 +302,39 @@
       }), void 0);
     };
 
+    var GoAChip = function GoAChip(_a) {
+      var _b = _a.leadingIcon,
+          leadingIcon = _b === void 0 ? "" : _b,
+          _c = _a.deletable,
+          deletable = _c === void 0 ? false : _c,
+          _d = _a.error,
+          error = _d === void 0 ? false : _d,
+          content = _a.content,
+          onClick = _a.onClick;
+      var el = react.useRef(null);
+      react.useEffect(function () {
+        if (!el.current) return;
+        if (!onClick) return;
+        var current = el.current;
+
+        var listener = function listener(e) {
+          onClick();
+        };
+
+        current.addEventListener('_click', listener);
+        return function () {
+          current.removeEventListener('_click', listener);
+        };
+      }, [el, onClick]);
+      return jsxRuntime.jsx("goa-chip", {
+        ref: el,
+        leadingicon: leadingIcon,
+        error: error,
+        deletable: deletable,
+        content: content
+      }, void 0);
+    };
+
     var GoACircularProgress = function GoACircularProgress(_a) {
       var type = _a.type,
           visible = _a.visible,
@@ -304,8 +387,8 @@
     };
 
     var GoADropdown = function GoADropdown(props) {
-      var el = React.useRef(null);
-      React.useEffect(function () {
+      var el = react.useRef(null);
+      react.useEffect(function () {
         if (!el.current) {
           return;
         }
@@ -343,31 +426,11 @@
 
     var GoAFlexRow = function GoAFlexRow(_a) {
       var gap = _a.gap,
-          minWidth = _a.minWidth,
           children = _a.children;
-      var style = {
-        gap: gap === 'small' ? '1rem' : gap === 'medium' ? '2rem' : gap === 'large' ? '3rem' : '0'
-      };
-
-      var getChildren = function getChildren() {
-        if (!children) {
-          return null;
-        }
-
-        return React__default["default"].Children.map(children, function (child) {
-          return /*#__PURE__*/React__default["default"].cloneElement(child, {
-            style: __assign({
-              flexBasis: minWidth
-            }, child.props.style)
-          });
-        });
-      };
-
-      return jsxRuntime.jsx("div", __assign({
-        className: "goa-flex-row",
-        style: style
+      return jsxRuntime.jsx("goa-flex-row", __assign({
+        gap: gap
       }, {
-        children: getChildren()
+        children: children
       }), void 0);
     };
 
@@ -431,8 +494,8 @@
           size = _c === void 0 ? 'medium' : _c,
           title = _a.title,
           children = _a.children;
-      var ref = React.useRef(null);
-      React.useEffect(function () {
+      var ref = react.useRef(null);
+      react.useEffect(function () {
         if (!ref.current) {
           return;
         }
@@ -474,11 +537,14 @@
           value = _a.value,
           placeholder = _a.placeholder,
           error = _a.error,
+          width = _a.width,
+          showCounter = _a.showCounter,
+          maxCharCount = _a.maxCharCount,
           testId = _a.testId,
           onTrailingIconClick = _a.onTrailingIconClick,
           onChange = _a.onChange;
-      var ref = React.useRef(null);
-      React.useEffect(function () {
+      var ref = react.useRef(null);
+      react.useEffect(function () {
         if (!ref.current) {
           return;
         }
@@ -518,6 +584,9 @@
         error: error,
         "data-testid": testId,
         value: value,
+        width: width,
+        showcounter: showCounter,
+        maxcharcount: maxCharCount,
         handletrailingiconclick: !!onTrailingIconClick
       }, void 0);
     };
@@ -616,9 +685,10 @@
           open = _a.open,
           width = _a.width,
           actions = _a.actions,
+          transition = _a.transition,
           onClose = _a.onClose;
-      var el = React.useRef(null);
-      React.useEffect(function () {
+      var el = react.useRef(null);
+      react.useEffect(function () {
         if (!el.current) {
           return;
         }
@@ -640,7 +710,8 @@
         open: open,
         closable: !!onClose,
         scrollable: true,
-        width: width
+        width: width,
+        transition: transition
       }, {
         children: [actions && jsxRuntime.jsx("div", __assign({
           slot: "actions"
@@ -702,8 +773,8 @@
           error = _d === void 0 ? false : _d,
           testId = _a.testId,
           onChange = _a.onChange;
-      var el = React.useRef(null);
-      React.useEffect(function () {
+      var el = react.useRef(null);
+      react.useEffect(function () {
         if (!el.current) {
           return;
         }
@@ -767,11 +838,13 @@
           placeholder = _a.placeholder,
           rows = _a.rows,
           disabled = _a.disabled,
+          showCounter = _a.showCounter,
+          maxCharCount = _a.maxCharCount,
           testId = _a.testId,
           error = _a.error,
           onChange = _a.onChange;
-      var el = React.useRef(null);
-      React.useEffect(function () {
+      var el = react.useRef(null);
+      react.useEffect(function () {
         if (!el.current) {
           return;
         }
@@ -797,17 +870,21 @@
         value: value,
         rows: rows,
         disabled: disabled,
+        showcounter: showCounter,
+        maxcharcount: maxCharCount,
         error: error,
         "data-testid": testId
       }, void 0);
     };
 
+    exports.GoAAppFooter = GoAAppFooter;
     exports.GoAAppHeader = GoAAppHeader;
     exports.GoABadge = GoABadge;
     exports.GoAButton = GoAButton;
     exports.GoAButtonGroup = GoAButtonGroup;
     exports.GoACallout = GoACallout;
     exports.GoACheckbox = GoACheckbox;
+    exports.GoAChip = GoAChip;
     exports.GoACircularProgress = GoACircularProgress;
     exports.GoAContainer = GoAContainer;
     exports.GoADropdown = GoADropdown;
@@ -834,8 +911,10 @@
     exports.GoAInputText = GoAInputText;
     exports.GoAInputTime = GoAInputTime;
     exports.GoAInputUrl = GoAInputUrl;
+    exports.GoAMetaLink = GoAMetaLink;
     exports.GoAMicrositeHeader = GoAMicrositeHeader;
     exports.GoAModal = GoAModal;
+    exports.GoANavigationLink = GoANavigationLink;
     exports.GoANotification = GoANotification;
     exports.GoAPageBlock = GoAPageBlock;
     exports.GoARadioGroup = GoARadioGroup;