@veracity/vui 0.4.0 → 0.5.0

package/popover/popoverTrigger.js

@@ -40,9 +40,14 @@ exports.PopoverTrigger = (0, core_1.vui)(function (props, ref) {
     var _b = (_a = (0, context_1.usePopoverContext)()) !== null && _a !== void 0 ? _a : {}, setReference = _b.setReference, popoverProps = __rest(_b, ["setReference"]);
     var styles = (0, core_1.useStyleConfig)('Popover', __assign(__assign({}, popoverProps), props));
     // @ts-ignore - TS incorrectly doesn't recognize 'as' prop
-    var As = props.as, rest = __rest(props, ["as"]);
+    var As = props.as, onClickProp = props.onClick, rest = __rest(props, ["as", "onClick"]);
     var Element = As || core_1.v.button;
-    return react_1.default.createElement(Element, __assign({ className: "vui-popoverTrigger", ref: (0, utils_1.mergeRefs)(setReference, ref) }, styles.trigger, rest));
+    var onClick = function (e) {
+        // Avoids triggering parent's onClick, like when inside a ListItem
+        e.stopPropagation();
+        onClickProp === null || onClickProp === void 0 ? void 0 : onClickProp(e);
+    };
+    return (react_1.default.createElement(Element, __assign({ className: "vui-popoverTrigger", onClick: onClick, ref: (0, utils_1.mergeRefs)(setReference, ref) }, styles.trigger, rest)));
 });
 exports.PopoverTrigger.displayName = 'PopoverTrigger';
 exports.default = exports.PopoverTrigger;

package/radio/radio.d.ts

@@ -1,5 +1,5 @@
 import { RadioProps, RadioStyleProps } from './radio.types';
-export declare const RadioBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("..").SpaceAroundProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & RadioStyleProps, never>;
+export declare const RadioBase: import("styled-components").StyledComponent<"label", import("styled-components").DefaultTheme, import("..").AnimationProps & import("..").BackgroundColorProps & import("..").BorderProps & import("..").BorderTopProps & import("..").BorderRightProps & import("..").BorderBottomProps & import("..").BorderLeftProps & import("..").BorderColorProps & import("..").BorderTopColorProps & import("..").BorderRightColorProps & import("..").BorderBottomColorProps & import("..").BorderLeftColorProps & import("..").BorderWidthProps & import("..").BorderTopWidthProps & import("..").BorderRightWidthProps & import("..").BorderBottomWidthProps & import("..").BorderLeftWidthProps & import("..").BorderStyleProps & import("..").BorderRadiusProps & import("..").OutlineProps & import("..").OutlineColorProps & import("..").OutlineWidthProps & import("..").OutlineStyleProps & import("..").DivideXProps & import("..").DivideYProps & import("..").DivideXReverseProps & import("..").DivideYReverseProps & import("..").DivideColorProps & import("..").DivideStyleProps & import("..").RingProps & import("..").RingColorProps & import("..").OpacityProps & import("..").BoxShadowProps & import("..").TextShadowProps & import("..").DisplayProps & import("..").AlignItemsProps & import("..").AlignContentProps & import("..").JustifyContentProps & import("..").JustifyItemsProps & import("..").FlexWrapProps & import("..").FlexGrowProps & import("..").FlexShrinkProps & import("..").FlexBasisProps & import("..").FlexDirectionProps & import("..").FlexProps & import("..").JustifySelfProps & import("..").AlignSelfProps & import("..").OrderProps & import("../system/flexboxGrids").RowProps & import("../system/flexboxGrids").ColProps & import("../system/grids").GapProps & import("../system/grids").ColumnGapProps & import("../system/grids").RowGapProps & import("../system/grids").GridColumnProps & import("../system/grids").GridRowProps & import("../system/grids").GridAutoFlowProps & import("../system/grids").GridAutoColumnsProps & import("../system/grids").GridAutoRowsProps & import("../system/grids").GridTemplateColumnsProps & import("../system/grids").GridTemplateRowsProps & import("../system/grids").GridTemplateAreasProps & import("../system/grids").GridAreaProps & import("..").AppearanceProps & import("..").CursorProps & import("..").PointerEventsProps & import("..").ResizeProps & import("..").UserSelectProps & import("..").IsTruncatedProps & import("..").FloatProps & import("..").BoxSizingProps & import("..").OverflowProps & import("..").OverflowXProps & import("..").OverflowYProps & import("..").PositionProps & import("..").ZIndexProps & import("..").TopProps & import("..").RightProps & import("..").BottomProps & import("..").LeftProps & import("..").VisibilityProps & import("..").OverscrollBehaviorProps & import("..").ObjectFitProps & import("..").MaxLinesProps & import("..").WidthProps & import("..").HeightProps & import("..").MaxWidthProps & import("..").MaxHeightProps & import("..").MinWidthProps & import("..").MinHeightProps & import("..").MarginProps & import("..").MarginTopProps & import("..").MarginRightProps & import("..").MarginBottomProps & import("..").MarginLeftProps & import("..").MarginXProps & import("..").MarginYProps & import("..").PaddingProps & import("..").PaddingTopProps & import("..").PaddingRightProps & import("..").PaddingBottomProps & import("..").PaddingLeftProps & import("..").PaddingXProps & import("..").PaddingYProps & import("..").SpaceXProps & import("..").SpaceYProps & import("..").SpaceXReverseProps & import("..").SpaceYReverseProps & import("../system/tables").BorderCollapseProps & import("../system/tables").TableLayoutProps & import("..").TransformProps & import("..").TransformOriginProps & import("..").TranslateXProps & import("..").TranslateYProps & import("..").RotateProps & import("..").SkewXProps & import("..").SkewYProps & import("..").ScaleProps & import("..").ScaleXProps & import("..").ScaleYProps & import("..").TransitionProps & import("..").TransitionPropertyProps & import("..").TransitionDurationProps & import("..").TransitionTimingFunctionProps & import("..").TransitionDelayProps & import("..").FontFamilyProps & import("..").FontSizeProps & import("..").FontStyleProps & import("..").FontWeightProps & import("..").LineHeightProps & import("..").ColorProps & import("..").TextTransformProps & import("..").TextDecorationProps & import("..").TextAlignProps & import("..").VerticalAlignProps & import("..").LetterSpacingProps & import("..").WhiteSpaceProps & import("..").TextOverflowProps & import("..").ListStyleTypeProps & import("..").ListStylePositionProps & import("..").WordBreakProps & RadioStyleProps, never>;
 /**
  * Allows selection of a single choice from a set of items. Handles controlled and uncontrolled modes.
  * Uses icons to display itself in different states.

package/radio/radioGroup.js

@@ -66,7 +66,7 @@ var react_1 = __importStar(require("react"));
 var core_1 = require("../core");
 var utils_1 = require("../utils");
 var context_1 = require("./context");
-exports.RadioGroupBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n"
+exports.RadioGroupBase = core_1.styled.divBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 1;\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 1;\n"
     /**
      * Organizes layout and display of multiple radio buttons as a row or column.
      * Exposes some props to the children via context.

package/system/custom.d.ts

@@ -8,10 +8,6 @@ export declare type MaxLinesProps = {
 };
 /** Provides styling to truncate multi-line text. */
 export declare const maxLines: import("@xstyled/styled-components").StyleGenerator;
-export declare type SpaceAroundProps = {
-    spaceAround?: number | string;
-};
-export declare const spaceAround: import("@xstyled/styled-components").StyleGenerator;
 export declare type WordBreakProps = {
     wordBreak?: 'normal' | 'break-all' | 'keep-all' | 'break-word';
 };

package/system/custom.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.wordBreak = exports.spaceAround = exports.maxLines = exports.isTruncated = void 0;
+exports.wordBreak = exports.maxLines = exports.isTruncated = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 /** Provides styling to truncate single-line text. */
 exports.isTruncated = (0, styled_components_1.style)({
@@ -27,20 +27,6 @@ exports.maxLines = (0, styled_components_1.style)({
     },
     states: {}
 });
-exports.spaceAround = (0, styled_components_1.style)({
-    prop: 'spaceAround',
-    themeGet: styled_components_1.getSpace,
-    cssProperty: function (value) {
-        return {
-            '&': {
-                margin: '-' + value
-            },
-            '& > *': {
-                margin: value
-            }
-        };
-    }
-});
 exports.wordBreak = (0, styled_components_1.style)({
     prop: 'wordBreak'
 });

package/system/effects.d.ts

@@ -1,19 +1,19 @@
-import { SystemProp } from '@xstyled/system';
+import { SystemProp, VariantsType } from '@xstyled/system';
 import * as CSS from 'csstype';
 import { VuiTheme } from '../theme';
 import { AnyString } from '../utils';
-export declare type ShadowGetter = keyof VuiTheme['shadows'] | AnyString;
+export declare type ShadowGetter = VariantsType<VuiTheme['shadows']>;
 declare type OpacityProp = SystemProp<CSS.Property.Opacity, VuiTheme>;
 export declare type OpacityProps = {
     opacity?: OpacityProp;
     hoverOpacity?: OpacityProp;
 };
-declare type BoxShadowProp = SystemProp<ShadowGetter, VuiTheme>;
+declare type BoxShadowProp = SystemProp<ShadowGetter | AnyString, VuiTheme>;
 export declare type BoxShadowProps = {
     boxShadow?: BoxShadowProp;
     hoverBoxShadow?: BoxShadowProp;
 };
-declare type TextShadowProp = SystemProp<ShadowGetter, VuiTheme>;
+declare type TextShadowProp = SystemProp<ShadowGetter | AnyString, VuiTheme>;
 export declare type TextShadowProps = {
     textShadow?: TextShadowProp;
 };

package/system/grids.d.ts

@@ -1,7 +1,9 @@
-import { SystemProp } from '@xstyled/system';
+import { SystemProp, VariantsType } from '@xstyled/system';
 import * as CSS from 'csstype';
 import { VuiTheme } from '../theme';
 import { SpaceGetter } from './space';
+export declare type GridTemplateColumnsGetter = VariantsType<VuiTheme['gridTemplateColumns']>;
+export declare type GridTemplateRowsGetter = VariantsType<VuiTheme['gridTemplateRows']>;
 declare type GapProp = SystemProp<SpaceGetter | CSS.Property.Gap, VuiTheme>;
 export declare type GapProps = {
     gap?: GapProp;
@@ -34,11 +36,11 @@ declare type GridAutoRowsProp = SystemProp<CSS.Property.GridAutoRows, VuiTheme>;
 export declare type GridAutoRowsProps = {
     gridAutoRows?: GridAutoRowsProp;
 };
-declare type GridTemplateColumnsProp = SystemProp<CSS.Property.GridTemplateColumns, VuiTheme>;
+declare type GridTemplateColumnsProp = SystemProp<GridTemplateColumnsGetter | CSS.Property.GridTemplateColumns, VuiTheme>;
 export declare type GridTemplateColumnsProps = {
     gridTemplateColumns?: GridTemplateColumnsProp;
 };
-declare type GridTemplateRowsProp = SystemProp<CSS.Property.GridTemplateRows, VuiTheme>;
+declare type GridTemplateRowsProp = SystemProp<GridTemplateRowsGetter | CSS.Property.GridTemplateRows, VuiTheme>;
 export declare type GridTemplateRowsProps = {
     gridTemplateRows?: GridTemplateRowsProp;
 };

package/system/system.d.ts

@@ -1,7 +1,7 @@
 import { AnimationsProps } from './animations';
 import { BackgroundColorProps } from './backgrounds';
 import { BordersProps } from './borders';
-import { IsTruncatedProps, MaxLinesProps, SpaceAroundProps, WordBreakProps } from './custom';
+import { IsTruncatedProps, MaxLinesProps, WordBreakProps } from './custom';
 import { EffectsProps } from './effects';
 import { FlexboxesProps } from './flexboxes';
 import { FlexboxGridsProps } from './flexboxGrids';
@@ -14,6 +14,6 @@ import { TablesProps } from './tables';
 import { TransformsProps } from './transforms';
 import { TransitionsProps } from './transitions';
 import { TypographyProps } from './typography';
-export declare type SystemProps = AnimationsProps & BackgroundColorProps & BordersProps & EffectsProps & FlexboxesProps & FlexboxGridsProps & GridsProps & InteractivityProps & IsTruncatedProps & LayoutProps & MaxLinesProps & SizingProps & SpaceProps & SpaceAroundProps & TablesProps & TransformsProps & TransitionsProps & TypographyProps & WordBreakProps;
+export declare type SystemProps = AnimationsProps & BackgroundColorProps & BordersProps & EffectsProps & FlexboxesProps & FlexboxGridsProps & GridsProps & InteractivityProps & IsTruncatedProps & LayoutProps & MaxLinesProps & SizingProps & SpaceProps & TablesProps & TransformsProps & TransitionsProps & TypographyProps & WordBreakProps;
 export declare const system: import("@xstyled/styled-components").StyleGenerator;
 export default system;

package/system/system.js

@@ -3,5 +3,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.system = void 0;
 var styled_components_1 = require("@xstyled/styled-components");
 var custom_1 = require("./custom");
-exports.system = (0, styled_components_1.compose)(styled_components_1.animation, styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.flexboxGrids, styled_components_1.grids, styled_components_1.interactivity, custom_1.isTruncated, styled_components_1.layout, custom_1.maxLines, styled_components_1.sizing, styled_components_1.space, custom_1.spaceAround, styled_components_1.tables, styled_components_1.transforms, styled_components_1.transitions, styled_components_1.typography, custom_1.wordBreak);
+exports.system = (0, styled_components_1.compose)(styled_components_1.animation, styled_components_1.backgroundColor, styled_components_1.borders, styled_components_1.color, styled_components_1.effects, styled_components_1.flexboxes, styled_components_1.flexboxGrids, styled_components_1.grids, styled_components_1.interactivity, custom_1.isTruncated, styled_components_1.layout, custom_1.maxLines, styled_components_1.sizing, styled_components_1.space, styled_components_1.tables, styled_components_1.transforms, styled_components_1.transitions, styled_components_1.typography, custom_1.wordBreak);
 exports.default = exports.system;

package/system/transitions.d.ts

@@ -1,9 +1,9 @@
 import { SystemProp, VariantsType } from '@xstyled/system';
 import { VuiTheme } from '../theme';
 export declare type DurationGetter = VariantsType<VuiTheme['durations']>;
+export declare type TimingFunctionGetter = VariantsType<VuiTheme['timingFunctions']>;
 export declare type TransitionGetter = VariantsType<VuiTheme['transitions']>;
 export declare type TransitionPropertyGetter = VariantsType<unknown>;
-export declare type TimingFunctionGetter = VariantsType<unknown>;
 declare type TransitionProp = SystemProp<TransitionGetter, VuiTheme>;
 export declare type TransitionProps = {
     transition?: TransitionProp;

package/tag/tag.js

@@ -80,7 +80,6 @@ exports.Tag = (0, core_1.vui)(function (props, ref) {
             cursor: 'pointer',
             hoverBg: hoverBg,
             activeBg: activeBg,
-            focusRing: 3,
             tabIndex: 0,
             userSelect: 'none'
         }
@@ -93,7 +92,7 @@ exports.Tag = (0, core_1.vui)(function (props, ref) {
         w: isFullWidth ? '100%' : undefined
     });
     return (react_1.default.createElement(context_1.TagProvider, { value: context },
-        react_1.default.createElement(exports.TagBase, __assign({ className: (0, utils_1.cs)('vui-tag', className), h: h, onClick: !disabled ? onClick : undefined, pl: pl, pr: pr, ref: ref }, tagStyles, interactiveProps, aliasedProps, rest),
+        react_1.default.createElement(exports.TagBase, __assign({ className: (0, utils_1.cs)('vui-tag', className), focusRing: 2, h: h, onClick: !disabled ? onClick : undefined, pl: pl, pr: pr, ref: ref }, tagStyles, interactiveProps, aliasedProps, rest),
             (0, utils_1.isString)(icon) ? react_1.default.createElement(tagIcon_1.default, { name: icon }) : icon,
             !icon && (react_1.default.createElement(react_1.default.Fragment, null,
                 itemLeft,

package/tag/theme.d.ts

@@ -5,6 +5,7 @@ declare function variantSolid(props: Dict): {
         activeBg: string;
         bg: string;
         color: string;
+        focusRing: number;
     };
     button: {
         hoverBg: string;

package/tag/theme.js

@@ -6,7 +6,8 @@ function variantSolid(props) {
         hoverBg: c + ".90",
         activeBg: c + ".100",
         bg: c + ".80",
-        color: 'white'
+        color: 'white',
+        focusRing: 3
     };
     var button = {
         hoverBg: c + ".70",

package/textarea/textarea.js

@@ -70,8 +70,8 @@ var core_1 = require("../core");
 var t_1 = __importDefault(require("../t"));
 var utils_1 = require("../utils");
 var helpers_1 = require("./helpers");
-var TextareaTextarea = core_1.styled.textareaBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-radius: md;\n\tborder-width: 1px;\n\theight: 100%;\n\toutline: none;\n\tpadding: 1;\n\tresize: none;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&::placeholder {\n\t\tcolor: grey.60;\n\t}\n\n\t&[aria-disabled='true'],\n\t&[aria-disabled='true']::placeholder {\n\t\tbackground-color: disabled.bg;\n\t\tborder-color: disabled.border;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\tborder-radius: md;\n\tborder-width: 1px;\n\theight: 100%;\n\toutline: none;\n\tpadding: 1;\n\tresize: none;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&::placeholder {\n\t\tcolor: grey.60;\n\t}\n\n\t&[aria-disabled='true'],\n\t&[aria-disabled='true']::placeholder {\n\t\tbackground-color: disabled.bg;\n\t\tborder-color: disabled.border;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"])));
-exports.TextareaBase = core_1.styled.divBox(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n"], ["\n\tdisplay: flex;\n\tflex-direction: column;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n"
+var TextareaTextarea = core_1.styled.textareaBox(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\tborder-radius: md;\n\tborder-width: 1px;\n\toutline: none;\n\tpadding: 1;\n\tresize: none;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&::placeholder {\n\t\tcolor: grey.60;\n\t}\n\n\t&[aria-disabled='true'],\n\t&[aria-disabled='true']::placeholder {\n\t\tbackground-color: disabled.bg;\n\t\tborder-color: disabled.border;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"], ["\n\tborder-radius: md;\n\tborder-width: 1px;\n\toutline: none;\n\tpadding: 1;\n\tresize: none;\n\ttransition-duration: fast;\n\twidth: 100%;\n\n\t&::placeholder {\n\t\tcolor: grey.60;\n\t}\n\n\t&[aria-disabled='true'],\n\t&[aria-disabled='true']::placeholder {\n\t\tbackground-color: disabled.bg;\n\t\tborder-color: disabled.border;\n\t\tcolor: disabled.color;\n\t\tcursor: not-allowed;\n\t}\n"])));
+exports.TextareaBase = core_1.styled.divBox(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\tdisplay: flex;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n"], ["\n\tdisplay: flex;\n\tmin-height: 80px;\n\tposition: relative;\n\twidth: 100%;\n"
     /**
      * Displays a textarea element wrapped in a div to allow extra content, like counter.
      * Forwards many relevant props to the inner textarea. Exposes some props to the children via context.

package/theme/components.d.ts

@@ -117,6 +117,7 @@ declare const _default: {
                 container: {
                     borderColor: string;
                     hoverBorderColor: string;
+                    focusRing: number;
                     hoverBg: string;
                     activeBg: string;
                     bg: string;
@@ -155,6 +156,7 @@ declare const _default: {
                     borderColor: string;
                     borderWidth: number;
                     color: string;
+                    focusRing: number;
                 };
             };
         };
@@ -211,6 +213,27 @@ declare const _default: {
             };
         };
     };
+    Dialog: {
+        baseStyle: {};
+        defaultProps: {
+            size: string;
+        };
+        parts: string[];
+        sizes: {
+            md: {
+                container: {
+                    maxW: number;
+                };
+            };
+            lg: {
+                container: {
+                    maxW: number;
+                };
+            };
+            fullWidth: {};
+        };
+        variants: {};
+    };
     Divider: {
         baseStyle: {};
         defaultProps: {};
@@ -224,6 +247,12 @@ declare const _default: {
         sizes: {};
         variants: {};
     };
+    Grid: {
+        baseStyle: {};
+        defaultProps: {};
+        sizes: {};
+        variants: {};
+    };
     Header: {
         baseStyle: {};
         defaultProps: {};
@@ -278,16 +307,16 @@ declare const _default: {
                         borderColor: string;
                     };
                 };
-                linksList: {
-                    color: {
-                        md: string;
-                    };
-                };
                 logo: {
                     svg: {
                         pathFill: string;
                     };
                 };
+                mainLinks: {
+                    color: {
+                        md: string;
+                    };
+                };
                 mobileContent: {
                     top: string;
                 };
@@ -295,7 +324,9 @@ declare const _default: {
                     variant: string;
                 };
                 notifications: {
-                    variant: string;
+                    container: {
+                        variant: string;
+                    };
                 };
                 services: {
                     button: {
@@ -552,8 +583,7 @@ declare const _default: {
                 };
                 item: {
                     display: string;
-                    h: undefined;
-                    lineHeight: number;
+                    h: string;
                 };
             };
             unordered: {
@@ -564,8 +594,7 @@ declare const _default: {
                 };
                 item: {
                     display: string;
-                    h: undefined;
-                    lineHeight: number;
+                    h: string;
                 };
             };
         };
@@ -590,6 +619,13 @@ declare const _default: {
         };
         variants: {};
     };
+    Modal: {
+        baseStyle: {};
+        defaultProps: {};
+        parts: string[];
+        sizes: {};
+        variants: {};
+    };
     Notification: {
         baseStyle: {};
         defaultProps: {
@@ -959,6 +995,7 @@ declare const _default: {
                     activeBg: string;
                     bg: string;
                     color: string;
+                    focusRing: number;
                 };
                 button: {
                     hoverBg: string;

package/theme/components.js

@@ -8,52 +8,58 @@ var theme_2 = __importDefault(require("../box/theme"));
 var theme_3 = __importDefault(require("../button/theme"));
 var theme_4 = __importDefault(require("../card/theme"));
 var theme_5 = __importDefault(require("../checkbox/theme"));
-var theme_6 = __importDefault(require("../divider/theme"));
-var theme_7 = __importDefault(require("../footer/theme"));
-var theme_8 = __importDefault(require("../header/theme"));
-var theme_9 = __importDefault(require("../heading/theme"));
-var theme_10 = __importDefault(require("../icon/theme"));
-var theme_11 = __importDefault(require("../image/theme"));
-var theme_12 = __importDefault(require("../input/theme"));
-var theme_13 = __importDefault(require("../link/theme"));
-var theme_14 = __importDefault(require("../list/theme"));
-var theme_15 = __importDefault(require("../menu/theme"));
-var theme_16 = __importDefault(require("../notification/theme"));
-var theme_17 = __importDefault(require("../p/theme"));
-var theme_18 = __importDefault(require("../panel/theme"));
-var theme_19 = __importDefault(require("../popover/theme"));
-var theme_20 = __importDefault(require("../radio/theme"));
-var theme_21 = __importDefault(require("../skeleton/theme"));
-var theme_22 = __importDefault(require("../spinner/theme"));
-var theme_23 = __importDefault(require("../switch/theme"));
-var theme_24 = __importDefault(require("../t/theme"));
-var theme_25 = __importDefault(require("../tag/theme"));
-var theme_26 = __importDefault(require("../textarea/theme"));
+var theme_6 = __importDefault(require("../dialog/theme"));
+var theme_7 = __importDefault(require("../divider/theme"));
+var theme_8 = __importDefault(require("../footer/theme"));
+var theme_9 = __importDefault(require("../grid/theme"));
+var theme_10 = __importDefault(require("../header/theme"));
+var theme_11 = __importDefault(require("../heading/theme"));
+var theme_12 = __importDefault(require("../icon/theme"));
+var theme_13 = __importDefault(require("../image/theme"));
+var theme_14 = __importDefault(require("../input/theme"));
+var theme_15 = __importDefault(require("../link/theme"));
+var theme_16 = __importDefault(require("../list/theme"));
+var theme_17 = __importDefault(require("../menu/theme"));
+var theme_18 = __importDefault(require("../modal/theme"));
+var theme_19 = __importDefault(require("../notification/theme"));
+var theme_20 = __importDefault(require("../p/theme"));
+var theme_21 = __importDefault(require("../panel/theme"));
+var theme_22 = __importDefault(require("../popover/theme"));
+var theme_23 = __importDefault(require("../radio/theme"));
+var theme_24 = __importDefault(require("../skeleton/theme"));
+var theme_25 = __importDefault(require("../spinner/theme"));
+var theme_26 = __importDefault(require("../switch/theme"));
+var theme_27 = __importDefault(require("../t/theme"));
+var theme_28 = __importDefault(require("../tag/theme"));
+var theme_29 = __importDefault(require("../textarea/theme"));
 exports.default = {
     Avatar: theme_1.default,
     Box: theme_2.default,
     Button: theme_3.default,
     Card: theme_4.default,
     Checkbox: theme_5.default,
-    Divider: theme_6.default,
-    Footer: theme_7.default,
-    Header: theme_8.default,
-    Heading: theme_9.default,
-    Icon: theme_10.default,
-    Image: theme_11.default,
-    Input: theme_12.default,
-    Link: theme_13.default,
-    List: theme_14.default,
-    Menu: theme_15.default,
-    Notification: theme_16.default,
-    P: theme_17.default,
-    Panel: theme_18.default,
-    Popover: theme_19.default,
-    Radio: theme_20.default,
-    Skeleton: theme_21.default,
-    Spinner: theme_22.default,
-    Switch: theme_23.default,
-    T: theme_24.default,
-    Tag: theme_25.default,
-    Textarea: theme_26.default
+    Dialog: theme_6.default,
+    Divider: theme_7.default,
+    Footer: theme_8.default,
+    Grid: theme_9.default,
+    Header: theme_10.default,
+    Heading: theme_11.default,
+    Icon: theme_12.default,
+    Image: theme_13.default,
+    Input: theme_14.default,
+    Link: theme_15.default,
+    List: theme_16.default,
+    Menu: theme_17.default,
+    Modal: theme_18.default,
+    Notification: theme_19.default,
+    P: theme_20.default,
+    Panel: theme_21.default,
+    Popover: theme_22.default,
+    Radio: theme_23.default,
+    Skeleton: theme_24.default,
+    Spinner: theme_25.default,
+    Switch: theme_26.default,
+    T: theme_27.default,
+    Tag: theme_28.default,
+    Textarea: theme_29.default
 };

package/theme/defaultTheme.d.ts

@@ -123,6 +123,28 @@ declare const defaultTheme: {
         demi: string;
         bold: string;
     };
+    gridTemplateColumns: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
+        8: string;
+        9: string;
+        10: string;
+        11: string;
+        12: string;
+    };
+    gridTemplateRows: {
+        1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+    };
     radii: {
         none: number;
         sm: number;
@@ -165,7 +187,13 @@ declare const defaultTheme: {
     };
     transforms: {};
     transitions: {};
-    zIndices: {};
+    timingFunctions: {};
+    zIndices: {
+        drawer: number;
+        modal: number;
+        toast: number;
+        tooltip: number;
+    };
     components: {
         Avatar: {
             baseStyle: {};
@@ -285,6 +313,7 @@ declare const defaultTheme: {
                     container: {
                         borderColor: string;
                         hoverBorderColor: string;
+                        focusRing: number;
                         hoverBg: string;
                         activeBg: string;
                         bg: string;
@@ -323,6 +352,7 @@ declare const defaultTheme: {
                         borderColor: string;
                         borderWidth: number;
                         color: string;
+                        focusRing: number;
                     };
                 };
             };
@@ -379,6 +409,27 @@ declare const defaultTheme: {
                 };
             };
         };
+        Dialog: {
+            baseStyle: {};
+            defaultProps: {
+                size: string;
+            };
+            parts: string[];
+            sizes: {
+                md: {
+                    container: {
+                        maxW: number;
+                    };
+                };
+                lg: {
+                    container: {
+                        maxW: number;
+                    };
+                };
+                fullWidth: {};
+            };
+            variants: {};
+        };
         Divider: {
             baseStyle: {};
             defaultProps: {};
@@ -392,6 +443,12 @@ declare const defaultTheme: {
             sizes: {};
             variants: {};
         };
+        Grid: {
+            baseStyle: {};
+            defaultProps: {};
+            sizes: {};
+            variants: {};
+        };
         Header: {
             baseStyle: {};
             defaultProps: {};
@@ -446,16 +503,16 @@ declare const defaultTheme: {
                             borderColor: string;
                         };
                     };
-                    linksList: {
-                        color: {
-                            md: string;
-                        };
-                    };
                     logo: {
                         svg: {
                             pathFill: string;
                         };
                     };
+                    mainLinks: {
+                        color: {
+                            md: string;
+                        };
+                    };
                     mobileContent: {
                         top: string;
                     };
@@ -463,7 +520,9 @@ declare const defaultTheme: {
                         variant: string;
                     };
                     notifications: {
-                        variant: string;
+                        container: {
+                            variant: string;
+                        };
                     };
                     services: {
                         button: {
@@ -720,8 +779,7 @@ declare const defaultTheme: {
                     };
                     item: {
                         display: string;
-                        h: undefined;
-                        lineHeight: number;
+                        h: string;
                     };
                 };
                 unordered: {
@@ -732,8 +790,7 @@ declare const defaultTheme: {
                     };
                     item: {
                         display: string;
-                        h: undefined;
-                        lineHeight: number;
+                        h: string;
                     };
                 };
             };
@@ -758,6 +815,13 @@ declare const defaultTheme: {
             };
             variants: {};
         };
+        Modal: {
+            baseStyle: {};
+            defaultProps: {};
+            parts: string[];
+            sizes: {};
+            variants: {};
+        };
         Notification: {
             baseStyle: {};
             defaultProps: {
@@ -1127,6 +1191,7 @@ declare const defaultTheme: {
                         activeBg: string;
                         bg: string;
                         color: string;
+                        focusRing: number;
                     };
                     button: {
                         hoverBg: string;