@bolio-ui/core 1.1.8 → 2.0.0-alpha.0

package/esm/Fieldset/FieldsetGroup.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "children", "value", "onChange"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useCallback, useMemo, useState } from 'react';
 import useTheme from '../use-theme';
 import useCurrentState from '../utils/use-current-state';
@@ -11,45 +11,35 @@ import { FieldsetContext } from './FieldsetContext';
 import useWarning from '../utils/use-warning';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
 function FieldsetGroupComponent(_ref) {
   var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      children = _ref.children,
-      value = _ref.value,
-      onChange = _ref.onChange,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var _useState = useState(value),
-      _useState2 = _slicedToArray(_useState, 2),
-      selfVal = _useState2[0],
-      setSelfVal = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    selfVal = _useState2[0],
+    setSelfVal = _useState2[1];
   var _useCurrentState = useCurrentState([]),
-      _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
-      items = _useCurrentState2[0],
-      setItems = _useCurrentState2[1],
-      ref = _useCurrentState2[2];
-
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    items = _useCurrentState2[0],
+    setItems = _useCurrentState2[1],
+    ref = _useCurrentState2[2];
   var classes = useClasses('group', className);
-
   var register = function register(newItem) {
     var hasItem = ref.current.find(function (item) {
       return item.value === newItem.value;
     });
-
     if (hasItem) {
       useWarning('The "value" of each "Fieldset" must be unique.', 'Fieldset');
     }
-
     setItems([].concat(_toConsumableArray(ref.current), [newItem]));
   };
-
   var providerValue = useMemo(function () {
     return {
       currentValue: selfVal,
@@ -82,7 +72,6 @@ function FieldsetGroupComponent(_ref) {
     dynamic: [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]
   }, ".group.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0, 0), " ").concat(SCALES.ml(0), ";}.group-tabs.__jsx-style-dynamic-selector{white-space:nowrap;overflow-y:hidden;overflow-x:auto;font-size:").concat(SCALES.font(1), ";margin-bottom:-1px;}.group-content.__jsx-style-dynamic-selector{border-top-left-radius:0;overflow:hidden;}.group-content.__jsx-style-dynamic-selector .fieldset{border-top-left-radius:0;}button.__jsx-style-dynamic-selector{height:2.7em;line-height:2.7em;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:").concat(theme.palette.accents_3, ";background-color:").concat(theme.palette.accents_1, ";font-size:0.875em;white-space:nowrap;text-transform:capitalize;-webkit-appearance:none;cursor:pointer;margin:0;padding:0 1.45em;overflow:hidden;-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;border-radius:0;border:1px solid ").concat(theme.palette.border, ";-webkit-text-decoration:none;text-decoration:none;outline:none;}button.active.__jsx-style-dynamic-selector{border-bottom-color:transparent;background-color:").concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";cursor:default;}button.__jsx-style-dynamic-selector:first-of-type{border-top-left-radius:").concat(theme.layout.radius, ";}button.__jsx-style-dynamic-selector:last-of-type{border-top-right-radius:").concat(theme.layout.radius, ";}button.__jsx-style-dynamic-selector+button.__jsx-style-dynamic-selector{border-left:0;}"))));
 }
-
 FieldsetGroupComponent.displayName = 'BolioUIFieldsetGroup';
 var FieldsetGroup = withScale(FieldsetGroupComponent);
 export default FieldsetGroup;

package/esm/Fieldset/FieldsetSubtitle.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 interface Props {
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
-export declare type FieldsetSubtitleProps = Props & NativeAttrs;
-declare function FieldsetSubtitle({ className, children, ...props }: React.PropsWithChildren<FieldsetSubtitleProps>): JSX.Element;
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
+export type FieldsetSubtitleProps = Props & NativeAttrs;
+declare function FieldsetSubtitle({ className, children, ...props }: React.PropsWithChildren<FieldsetSubtitleProps>): React.JSX.Element;
 declare namespace FieldsetSubtitle {
     var displayName: string;
 }

package/esm/Fieldset/FieldsetSubtitle.js

@@ -1,21 +1,18 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "children"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
-
 function FieldsetSubtitle(_ref) {
   var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, props, {
     className: "jsx-2265168013" + " " + (props && props.className != null && props.className || className || "")
   }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
     id: "2265168013"
   }, "div.jsx-2265168013{font-size:0.875em;line-height:1.6;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;margin:0.75em 0;}"));
 }
-
 FieldsetSubtitle.displayName = 'BolioUIFieldsetSubtitle';
 export default FieldsetSubtitle;

package/esm/Fieldset/FieldsetTitle.d.ts

@@ -2,9 +2,9 @@ import React from 'react';
 interface Props {
     className?: string;
 }
-declare type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
-export declare type FieldsetTitleProps = Props & NativeAttrs;
-declare function FieldsetTitle({ className, children, ...props }: React.PropsWithChildren<FieldsetTitleProps>): JSX.Element;
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
+export type FieldsetTitleProps = Props & NativeAttrs;
+declare function FieldsetTitle({ className, children, ...props }: React.PropsWithChildren<FieldsetTitleProps>): React.JSX.Element;
 declare namespace FieldsetTitle {
     var displayName: string;
 }

package/esm/Fieldset/FieldsetTitle.js

@@ -1,16 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "children"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import useClasses from '../use-classes';
-
 function FieldsetTitle(_ref) {
   var _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      children = _ref.children,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
   var classes = useClasses('title', className);
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, props, {
     className: "jsx-4105044205" + " " + (props && props.className != null && props.className || classes || "")
@@ -18,6 +16,5 @@ function FieldsetTitle(_ref) {
     id: "4105044205"
   }, ".title.jsx-4105044205{line-height:1.5;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;word-break:break-word;font-weight:600;-webkit-letter-spacing:-0.020625em;-moz-letter-spacing:-0.020625em;-ms-letter-spacing:-0.020625em;letter-spacing:-0.020625em;font-size:1.25em;width:auto;}"));
 }
-
 FieldsetTitle.displayName = 'BolioUIFieldsetTitle';
 export default FieldsetTitle;

package/esm/Fieldset/index.d.ts

@@ -1,10 +1,10 @@
-import Fieldset from "./Fieldset";
-import FieldsetTitle from "./FieldsetTitle";
-import FieldsetSubtitle from "./FieldsetSubtitle";
-import FieldsetFooter from "./FieldsetFooter";
-import FieldsetGroup from "./FieldsetGroup";
-import FieldsetContent from "./FieldsetContent";
-export declare type FieldsetComponentType = typeof Fieldset & {
+import Fieldset from './Fieldset';
+import FieldsetTitle from './FieldsetTitle';
+import FieldsetSubtitle from './FieldsetSubtitle';
+import FieldsetFooter from './FieldsetFooter';
+import FieldsetGroup from './FieldsetGroup';
+import FieldsetContent from './FieldsetContent';
+export type FieldsetComponentType = typeof Fieldset & {
     Title: typeof FieldsetTitle;
     Subtitle: typeof FieldsetSubtitle;
     Footer: typeof FieldsetFooter;
@@ -12,11 +12,11 @@ export declare type FieldsetComponentType = typeof Fieldset & {
     Content: typeof FieldsetContent;
     Body: typeof FieldsetContent;
 };
-export type { FieldsetProps } from "./Fieldset";
-export type { FieldsetTitleProps } from "./FieldsetTitle";
-export type { FieldsetSubtitleProps } from "./FieldsetSubtitle";
-export type { FieldsetGroupProps } from "./FieldsetGroup";
-export type { FieldsetFooterProps } from "./FieldsetFooter";
-export type { FieldsetContentProps } from "./FieldsetContent";
+export type { FieldsetProps } from './Fieldset';
+export type { FieldsetTitleProps } from './FieldsetTitle';
+export type { FieldsetSubtitleProps } from './FieldsetSubtitle';
+export type { FieldsetGroupProps } from './FieldsetGroup';
+export type { FieldsetFooterProps } from './FieldsetFooter';
+export type { FieldsetContentProps } from './FieldsetContent';
 declare const _default: FieldsetComponentType;
 export default _default;

package/esm/Fieldset/index.js

@@ -1,3 +1,4 @@
+'use client';
 import Fieldset from './Fieldset';
 import FieldsetTitle from './FieldsetTitle';
 import FieldsetSubtitle from './FieldsetSubtitle';

package/esm/Grid/BasicItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { GridJustify, GridDirection, GridAlignItems, GridAlignContent } from "./GridTypes";
-export declare type GridBreakpointsValue = number | boolean;
+import { GridJustify, GridDirection, GridAlignItems, GridAlignContent } from './GridTypes';
+export type GridBreakpointsValue = number | boolean;
 export interface GridBasicComponentProps {
     xs?: GridBreakpointsValue;
     sm?: GridBreakpointsValue;
@@ -13,26 +13,9 @@ export interface GridBasicComponentProps {
     alignContent?: GridAlignContent;
     className?: string;
 }
-declare const defaultProps: {
-    xs: GridBreakpointsValue;
-    sm: GridBreakpointsValue;
-    md: GridBreakpointsValue;
-    lg: GridBreakpointsValue;
-    xl: GridBreakpointsValue;
-    className: string;
-};
-declare type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof GridBasicComponentProps>;
-export declare type GridBasicItemProps = GridBasicComponentProps & NativeAttrs;
-declare function GridBasicItem({ xs, sm, md, lg, xl, justify, direction, alignItems, alignContent, children, className, ...props }: React.PropsWithChildren<GridBasicItemProps> & typeof defaultProps): JSX.Element;
-declare namespace GridBasicItem {
-    var defaultProps: {
-        xs: GridBreakpointsValue;
-        sm: GridBreakpointsValue;
-        md: GridBreakpointsValue;
-        lg: GridBreakpointsValue;
-        xl: GridBreakpointsValue;
-        className: string;
-    };
-    var displayName: string;
-}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof GridBasicComponentProps>;
+export type GridBasicItemProps = GridBasicComponentProps & NativeAttrs;
+declare const GridBasicItem: React.ForwardRefExoticComponent<GridBasicComponentProps & NativeAttrs & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default GridBasicItem;

package/esm/Grid/BasicItem.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["xs", "sm", "md", "lg", "xl", "justify", "direction", "alignItems", "alignContent", "children", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React, { useMemo } from 'react';
 import useTheme from '../use-theme';
 import useScale from '../use-scale';
@@ -14,10 +14,8 @@ var defaultProps = {
   xl: false,
   className: ''
 };
-
 var getItemLayout = function getItemLayout(val) {
   var display = val === 0 ? 'display: none;' : 'display: inherit;';
-
   if (typeof val === 'number') {
     var width = 100 / 12 * val;
     var ratio = width > 100 ? '100%' : width < 0 ? '0' : "".concat(width, "%");
@@ -28,7 +26,6 @@ var getItemLayout = function getItemLayout(val) {
       basis: ratio
     };
   }
-
   return {
     grow: 1,
     display: display,
@@ -36,26 +33,28 @@ var getItemLayout = function getItemLayout(val) {
     basis: '0'
   };
 };
-
-function GridBasicItem(_ref) {
-  var xs = _ref.xs,
-      sm = _ref.sm,
-      md = _ref.md,
-      lg = _ref.lg,
-      xl = _ref.xl,
-      justify = _ref.justify,
-      direction = _ref.direction,
-      alignItems = _ref.alignItems,
-      alignContent = _ref.alignContent,
-      children = _ref.children,
-      className = _ref.className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+var GridBasicItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$xs = _ref.xs,
+    xs = _ref$xs === void 0 ? defaultProps.xs : _ref$xs,
+    _ref$sm = _ref.sm,
+    sm = _ref$sm === void 0 ? defaultProps.sm : _ref$sm,
+    _ref$md = _ref.md,
+    md = _ref$md === void 0 ? defaultProps.md : _ref$md,
+    _ref$lg = _ref.lg,
+    lg = _ref$lg === void 0 ? defaultProps.lg : _ref$lg,
+    _ref$xl = _ref.xl,
+    xl = _ref$xl === void 0 ? defaultProps.xl : _ref$xl,
+    justify = _ref.justify,
+    direction = _ref.direction,
+    alignItems = _ref.alignItems,
+    alignContent = _ref.alignContent,
+    children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? defaultProps.className : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var theme = useTheme();
-
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var classes = useMemo(function () {
     var aligns = {
       justify: justify,
@@ -83,14 +82,14 @@ function GridBasicItem(_ref) {
       xl: getItemLayout(xl)
     };
   }, [xs, sm, md, lg, xl]);
-  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    className: _JSXStyle.dynamic([["568430467", [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]]]) + " " + (props && props.className != null && props.className || useClasses('item', classes, className) || "")
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: ref
+  }, props, {
+    className: _JSXStyle.dynamic([["2387327819", [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]]]) + " " + (props && props.className != null && props.className || useClasses('item', classes, className) || "")
   }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
-    id: "568430467",
+    id: "2387327819",
     dynamic: [SCALES.font(1, 'inherit'), SCALES.height(1, 'auto'), justify, direction, alignContent, alignItems, layout.xs.grow, layout.xs.width, layout.xs.basis, layout.xs.display, theme.breakpoints.sm.min, layout.sm.grow, layout.sm.width, layout.sm.basis, layout.sm.display, theme.breakpoints.md.min, layout.md.grow, layout.md.width, layout.md.basis, layout.md.display, theme.breakpoints.lg.min, layout.lg.grow, layout.lg.width, layout.lg.basis, layout.lg.display, theme.breakpoints.xl.min, layout.xl.grow, layout.xl.width, layout.xl.basis, layout.xl.display]
   }, ".item.__jsx-style-dynamic-selector{font-size:".concat(SCALES.font(1, 'inherit'), ";height:").concat(SCALES.height(1, 'auto'), ";}.justify.__jsx-style-dynamic-selector{-webkit-box-pack:").concat(justify, ";-webkit-justify-content:").concat(justify, ";-ms-flex-pack:").concat(justify, ";justify-content:").concat(justify, ";}.direction.__jsx-style-dynamic-selector{-webkit-flex-direction:").concat(direction, ";-ms-flex-direction:").concat(direction, ";flex-direction:").concat(direction, ";}.alignContent.__jsx-style-dynamic-selector{-webkit-align-content:").concat(alignContent, ";-ms-flex-line-pack:").concat(alignContent, ";align-content:").concat(alignContent, ";}.alignItems.__jsx-style-dynamic-selector{-webkit-align-items:").concat(alignItems, ";-webkit-box-align:").concat(alignItems, ";-ms-flex-align:").concat(alignItems, ";align-items:").concat(alignItems, ";}.xs.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xs.grow, ";-webkit-flex-grow:").concat(layout.xs.grow, ";-ms-flex-positive:").concat(layout.xs.grow, ";flex-grow:").concat(layout.xs.grow, ";max-width:").concat(layout.xs.width, ";-webkit-flex-basis:").concat(layout.xs.basis, ";-ms-flex-preferred-size:").concat(layout.xs.basis, ";flex-basis:").concat(layout.xs.basis, ";").concat(layout.xs.display, ";}@media only screen and (min-width:").concat(theme.breakpoints.sm.min, "){.sm.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.sm.grow, ";-webkit-flex-grow:").concat(layout.sm.grow, ";-ms-flex-positive:").concat(layout.sm.grow, ";flex-grow:").concat(layout.sm.grow, ";max-width:").concat(layout.sm.width, ";-webkit-flex-basis:").concat(layout.sm.basis, ";-ms-flex-preferred-size:").concat(layout.sm.basis, ";flex-basis:").concat(layout.sm.basis, ";").concat(layout.sm.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.md.min, "){.md.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.md.grow, ";-webkit-flex-grow:").concat(layout.md.grow, ";-ms-flex-positive:").concat(layout.md.grow, ";flex-grow:").concat(layout.md.grow, ";max-width:").concat(layout.md.width, ";-webkit-flex-basis:").concat(layout.md.basis, ";-ms-flex-preferred-size:").concat(layout.md.basis, ";flex-basis:").concat(layout.md.basis, ";").concat(layout.md.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.lg.min, "){.lg.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.lg.grow, ";-webkit-flex-grow:").concat(layout.lg.grow, ";-ms-flex-positive:").concat(layout.lg.grow, ";flex-grow:").concat(layout.lg.grow, ";max-width:").concat(layout.lg.width, ";-webkit-flex-basis:").concat(layout.lg.basis, ";-ms-flex-preferred-size:").concat(layout.lg.basis, ";flex-basis:").concat(layout.lg.basis, ";").concat(layout.lg.display, ";}}@media only screen and (min-width:").concat(theme.breakpoints.xl.min, "){.xl.__jsx-style-dynamic-selector{-webkit-box-flex:").concat(layout.xl.grow, ";-webkit-flex-grow:").concat(layout.xl.grow, ";-ms-flex-positive:").concat(layout.xl.grow, ";flex-grow:").concat(layout.xl.grow, ";max-width:").concat(layout.xl.width, ";-webkit-flex-basis:").concat(layout.xl.basis, ";-ms-flex-preferred-size:").concat(layout.xl.basis, ";flex-basis:").concat(layout.xl.basis, ";").concat(layout.xl.display, ";}}")));
-}
-
-GridBasicItem.defaultProps = defaultProps;
+});
 GridBasicItem.displayName = 'BolioUIGridBasicItem';
 export default GridBasicItem;

package/esm/Grid/Grid.d.ts

@@ -1,41 +1,47 @@
+/// <reference types="trusted-types" />
 import React from 'react';
-import { GridBasicItemProps } from "./BasicItem";
+import { GridBasicItemProps } from './BasicItem';
 interface Props {
     className?: string;
 }
-export declare type GridProps = Props & GridBasicItemProps;
-declare const Grid: React.ForwardRefExoticComponent<Props & import("./BasicItem").GridBasicComponentProps & {
+export type GridProps = Props & GridBasicItemProps;
+declare const Grid: import("../use-scale/with-scale").ScaleComponent<HTMLDivElement, Props & import("./BasicItem").GridBasicComponentProps & {
+    children?: React.ReactNode;
     slot?: string | undefined;
     style?: React.CSSProperties | undefined;
     title?: string | undefined;
-    children?: React.ReactNode;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
     suppressHydrationWarning?: boolean | undefined;
     accessKey?: string | undefined;
-    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
+    autoCapitalize?: "none" | "off" | "on" | "sentences" | "words" | "characters" | (string & {}) | undefined;
+    autoFocus?: boolean | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     hidden?: boolean | undefined;
     id?: string | undefined;
     lang?: string | undefined;
-    placeholder?: string | undefined;
+    nonce?: string | undefined;
     spellCheck?: (boolean | "true" | "false") | undefined;
     tabIndex?: number | undefined;
     translate?: "yes" | "no" | undefined;
     radioGroup?: string | undefined;
     role?: React.AriaRole | undefined;
     about?: string | undefined;
+    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
     property?: string | undefined;
+    rel?: string | undefined;
     resource?: string | undefined;
+    rev?: string | undefined;
     typeof?: string | undefined;
     vocab?: string | undefined;
-    autoCapitalize?: string | undefined;
     autoCorrect?: string | undefined;
     autoSave?: string | undefined;
     color?: string | undefined;
@@ -46,59 +52,72 @@ declare const Grid: React.ForwardRefExoticComponent<Props & import("./BasicItem"
     itemRef?: string | undefined;
     results?: number | undefined;
     security?: string | undefined;
-    unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    unselectable?: "off" | "on" | undefined;
+    inputMode?: "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
-    'aria-activedescendant'?: string | undefined;
-    'aria-atomic'?: boolean | "true" | "false" | undefined;
-    'aria-autocomplete'?: "none" | "list" | "inline" | "both" | undefined;
-    'aria-busy'?: boolean | "true" | "false" | undefined;
-    'aria-checked'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-colcount'?: number | undefined;
-    'aria-colindex'?: number | undefined;
-    'aria-colspan'?: number | undefined;
-    'aria-controls'?: string | undefined;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
-    'aria-describedby'?: string | undefined;
-    'aria-details'?: string | undefined;
-    'aria-disabled'?: boolean | "true" | "false" | undefined;
-    'aria-dropeffect'?: "link" | "none" | "copy" | "execute" | "move" | "popup" | undefined;
-    'aria-errormessage'?: string | undefined;
-    'aria-expanded'?: boolean | "true" | "false" | undefined;
-    'aria-flowto'?: string | undefined;
-    'aria-grabbed'?: boolean | "true" | "false" | undefined;
-    'aria-haspopup'?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
-    'aria-hidden'?: boolean | "true" | "false" | undefined;
-    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
-    'aria-keyshortcuts'?: string | undefined;
-    'aria-label'?: string | undefined;
-    'aria-labelledby'?: string | undefined;
-    'aria-level'?: number | undefined;
-    'aria-live'?: "off" | "assertive" | "polite" | undefined;
-    'aria-modal'?: boolean | "true" | "false" | undefined;
-    'aria-multiline'?: boolean | "true" | "false" | undefined;
-    'aria-multiselectable'?: boolean | "true" | "false" | undefined;
-    'aria-orientation'?: "horizontal" | "vertical" | undefined;
-    'aria-owns'?: string | undefined;
-    'aria-placeholder'?: string | undefined;
-    'aria-posinset'?: number | undefined;
-    'aria-pressed'?: boolean | "true" | "false" | "mixed" | undefined;
-    'aria-readonly'?: boolean | "true" | "false" | undefined;
-    'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
-    'aria-required'?: boolean | "true" | "false" | undefined;
-    'aria-roledescription'?: string | undefined;
-    'aria-rowcount'?: number | undefined;
-    'aria-rowindex'?: number | undefined;
-    'aria-rowspan'?: number | undefined;
-    'aria-selected'?: boolean | "true" | "false" | undefined;
-    'aria-setsize'?: number | undefined;
-    'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined;
-    'aria-valuemax'?: number | undefined;
-    'aria-valuemin'?: number | undefined;
-    'aria-valuenow'?: number | undefined;
-    'aria-valuetext'?: string | undefined;
+    exportparts?: string | undefined;
+    part?: string | undefined;
+    popover?: "" | "auto" | "manual" | "hint" | undefined;
+    popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+    popoverTarget?: string | undefined;
+    onToggle?: React.ToggleEventHandler<any> | undefined;
+    onBeforeToggle?: React.ToggleEventHandler<any> | undefined;
+    inert?: boolean | undefined;
+    "aria-activedescendant"?: string | undefined;
+    "aria-atomic"?: (boolean | "true" | "false") | undefined;
+    "aria-autocomplete"?: "none" | "list" | "inline" | "both" | undefined;
+    "aria-braillelabel"?: string | undefined;
+    "aria-brailleroledescription"?: string | undefined;
+    "aria-busy"?: (boolean | "true" | "false") | undefined;
+    "aria-checked"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-colcount"?: number | undefined;
+    "aria-colindex"?: number | undefined;
+    "aria-colindextext"?: string | undefined;
+    "aria-colspan"?: number | undefined;
+    "aria-controls"?: string | undefined;
+    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    "aria-describedby"?: string | undefined;
+    "aria-description"?: string | undefined;
+    "aria-details"?: string | undefined;
+    "aria-disabled"?: (boolean | "true" | "false") | undefined;
+    "aria-dropeffect"?: "none" | "link" | "copy" | "execute" | "move" | "popup" | undefined;
+    "aria-errormessage"?: string | undefined;
+    "aria-expanded"?: (boolean | "true" | "false") | undefined;
+    "aria-flowto"?: string | undefined;
+    "aria-grabbed"?: (boolean | "true" | "false") | undefined;
+    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-hidden"?: (boolean | "true" | "false") | undefined;
+    "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
+    "aria-keyshortcuts"?: string | undefined;
+    "aria-label"?: string | undefined;
+    "aria-labelledby"?: string | undefined;
+    "aria-level"?: number | undefined;
+    "aria-live"?: "off" | "assertive" | "polite" | undefined;
+    "aria-modal"?: (boolean | "true" | "false") | undefined;
+    "aria-multiline"?: (boolean | "true" | "false") | undefined;
+    "aria-multiselectable"?: (boolean | "true" | "false") | undefined;
+    "aria-orientation"?: "horizontal" | "vertical" | undefined;
+    "aria-owns"?: string | undefined;
+    "aria-placeholder"?: string | undefined;
+    "aria-posinset"?: number | undefined;
+    "aria-pressed"?: boolean | "true" | "false" | "mixed" | undefined;
+    "aria-readonly"?: (boolean | "true" | "false") | undefined;
+    "aria-relevant"?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | undefined;
+    "aria-required"?: (boolean | "true" | "false") | undefined;
+    "aria-roledescription"?: string | undefined;
+    "aria-rowcount"?: number | undefined;
+    "aria-rowindex"?: number | undefined;
+    "aria-rowindextext"?: string | undefined;
+    "aria-rowspan"?: number | undefined;
+    "aria-selected"?: (boolean | "true" | "false") | undefined;
+    "aria-setsize"?: number | undefined;
+    "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+    "aria-valuemax"?: number | undefined;
+    "aria-valuemin"?: number | undefined;
+    "aria-valuenow"?: number | undefined;
+    "aria-valuetext"?: string | undefined;
     dangerouslySetInnerHTML?: {
-        __html: string;
+        __html: string | TrustedHTML;
     } | undefined;
     onCopy?: React.ClipboardEventHandler<any> | undefined;
     onCopyCapture?: React.ClipboardEventHandler<any> | undefined;
@@ -118,7 +137,7 @@ declare const Grid: React.ForwardRefExoticComponent<Props & import("./BasicItem"
     onBlurCapture?: React.FocusEventHandler<any> | undefined;
     onChange?: React.FormEventHandler<any> | undefined;
     onChangeCapture?: React.FormEventHandler<any> | undefined;
-    onBeforeInput?: React.FormEventHandler<any> | undefined;
+    onBeforeInput?: React.InputEventHandler<any> | undefined;
     onBeforeInputCapture?: React.FormEventHandler<any> | undefined;
     onInput?: React.FormEventHandler<any> | undefined;
     onInputCapture?: React.FormEventHandler<any> | undefined;
@@ -237,9 +256,7 @@ declare const Grid: React.ForwardRefExoticComponent<Props & import("./BasicItem"
     onPointerCancel?: React.PointerEventHandler<any> | undefined;
     onPointerCancelCapture?: React.PointerEventHandler<any> | undefined;
     onPointerEnter?: React.PointerEventHandler<any> | undefined;
-    onPointerEnterCapture?: React.PointerEventHandler<any> | undefined;
     onPointerLeave?: React.PointerEventHandler<any> | undefined;
-    onPointerLeaveCapture?: React.PointerEventHandler<any> | undefined;
     onPointerOver?: React.PointerEventHandler<any> | undefined;
     onPointerOverCapture?: React.PointerEventHandler<any> | undefined;
     onPointerOut?: React.PointerEventHandler<any> | undefined;
@@ -260,5 +277,13 @@ declare const Grid: React.ForwardRefExoticComponent<Props & import("./BasicItem"
     onAnimationIterationCapture?: React.AnimationEventHandler<any> | undefined;
     onTransitionEnd?: React.TransitionEventHandler<any> | undefined;
     onTransitionEndCapture?: React.TransitionEventHandler<any> | undefined;
-} & import("../use-scale").ScaleProps & React.RefAttributes<unknown>>;
+    onTransitionCancel?: React.TransitionEventHandler<any> | undefined;
+    onTransitionCancelCapture?: React.TransitionEventHandler<any> | undefined;
+    onTransitionRun?: React.TransitionEventHandler<any> | undefined;
+    onTransitionRunCapture?: React.TransitionEventHandler<any> | undefined;
+    onTransitionStart?: React.TransitionEventHandler<any> | undefined;
+    onTransitionStartCapture?: React.TransitionEventHandler<any> | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
 export default Grid;

package/esm/Grid/Grid.js

@@ -1,37 +1,34 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["children", "className"];
-import _JSXStyle from "../styled-jsx.es.js";
+import _JSXStyle from "styled-jsx/style";
 import React from 'react';
 import GridBasicItem from './BasicItem';
 import useScale, { withScale } from '../use-scale';
 import useClasses from '../use-classes';
-
-function GridComponent(_ref) {
+var GridComponent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var children = _ref.children,
-      _ref$className = _ref.className,
-      className = _ref$className === void 0 ? '' : _ref$className,
-      props = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    props = _objectWithoutProperties(_ref, _excluded);
   var _useScale = useScale(),
-      SCALES = _useScale.SCALES;
-
+    SCALES = _useScale.SCALES;
   var gridGapUnit = 'var(--grid-gap-unit)';
   var _styles$className = {
-    styles: /*#__PURE__*/React.createElement(_JSXStyle, {
-      id: "2935018504",
-      dynamic: [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, gridGapUnit), SCALES.pr(0, gridGapUnit), SCALES.pb(0, gridGapUnit), SCALES.pl(0, gridGapUnit)]
-    }, "div.__jsx-style-dynamic-selector{margin:".concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";box-sizing:border-box;padding:").concat(SCALES.pt(0, gridGapUnit), " ").concat(SCALES.pr(0, gridGapUnit), " ").concat(SCALES.pb(0, gridGapUnit), " ").concat(SCALES.pl(0, gridGapUnit), ";}")),
-    className: _JSXStyle.dynamic([["2935018504", [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, gridGapUnit), SCALES.pr(0, gridGapUnit), SCALES.pb(0, gridGapUnit), SCALES.pl(0, gridGapUnit)]]])
-  },
-      resolveClassName = _styles$className.className,
-      styles = _styles$className.styles;
+      styles: /*#__PURE__*/React.createElement(_JSXStyle, {
+        id: "2935018504",
+        dynamic: [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, gridGapUnit), SCALES.pr(0, gridGapUnit), SCALES.pb(0, gridGapUnit), SCALES.pl(0, gridGapUnit)]
+      }, "div.__jsx-style-dynamic-selector{margin:".concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";box-sizing:border-box;padding:").concat(SCALES.pt(0, gridGapUnit), " ").concat(SCALES.pr(0, gridGapUnit), " ").concat(SCALES.pb(0, gridGapUnit), " ").concat(SCALES.pl(0, gridGapUnit), ";}")),
+      className: _JSXStyle.dynamic([["2935018504", [SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0), SCALES.pt(0, gridGapUnit), SCALES.pr(0, gridGapUnit), SCALES.pb(0, gridGapUnit), SCALES.pl(0, gridGapUnit)]]])
+    },
+    resolveClassName = _styles$className.className,
+    styles = _styles$className.styles;
   var classes = useClasses(resolveClassName, className);
   return /*#__PURE__*/React.createElement(GridBasicItem, _extends({
+    ref: ref,
     className: classes
   }, props), children, styles);
-}
-
+});
 GridComponent.displayName = 'BolioUIGrid';
 var Grid = withScale(GridComponent);
 export default Grid;