@bundle-stats/ui 4.2.3-beta.0 → 4.2.3-beta.1

package/lib/query-state.js

@@ -15,42 +15,48 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useComponentQueryState = exports.QueryStateProvider = void 0;
 const react_1 = __importStar(require("react"));
+const isEqual_1 = __importDefault(require("lodash/isEqual"));
 const use_query_params_1 = require("use-query-params");
 const react_router_5_1 = require("use-query-params/adapters/react-router-5");
-const query_string_1 = require("query-string");
-const isEqual_1 = __importDefault(require("lodash/isEqual"));
-const merge_1 = __importDefault(require("lodash/merge"));
-const QueryStateProvider = (props) => (react_1.default.createElement(use_query_params_1.QueryParamProvider, { adapter: react_router_5_1.ReactRouter5Adapter, options: {
-        searchStringToObject: query_string_1.parse,
-        objectToSearchString: query_string_1.stringify,
-    }, ...props }));
+const utils_1 = require("@bundle-stats/utils");
+const QueryStateProvider = (props) => (react_1.default.createElement(use_query_params_1.QueryParamProvider, { adapter: react_router_5_1.ReactRouter5Adapter, ...props }));
 exports.QueryStateProvider = QueryStateProvider;
 const useComponentQueryState = (componentName) => {
-    const [search, setSearch] = (0, use_query_params_1.useQueryParams)({
-        [componentName]: use_query_params_1.JsonParam,
+    const [queryState, setQueryState] = (0, use_query_params_1.useQueryParams)({
+        [componentName]: utils_1.COMPONENT_STATE_META[componentName],
     });
-    const state = search[componentName];
-    const setState = (0, react_1.useCallback)((newState) => {
-        const newComponentState = (0, merge_1.default)({}, state, newState);
-        if ((0, isEqual_1.default)(newComponentState, state)) {
+    const componentState = queryState[componentName];
+    const setState = (0, react_1.useCallback)((updates) => {
+        const newState = { ...componentState, ...updates };
+        if ((0, isEqual_1.default)(componentState, newState)) {
             return;
         }
-        setSearch({ [componentName]: newComponentState });
-    }, [state]);
-    return [state, setState];
+        setQueryState({ [componentName]: newState });
+    }, [componentState, setQueryState]);
+    return [componentState, setState];
 };
 exports.useComponentQueryState = useComponentQueryState;
 //# sourceMappingURL=query-state.js.map

package/lib/query-state.js.map

@@ -1 +1 @@
-{"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAC3C,uDAAiF;AACjF,6EAA8E;AAC9E,+CAA+C;AAC/C,6DAAqC;AACrC,yDAAiC;AAE1B,MAAM,kBAAkB,GAAG,CAAC,KAAK,EAAE,EAAE,CAAC,CAC3C,8BAAC,qCAAkB,IACjB,OAAO,EAAE,oCAAmB,EAC5B,OAAO,EAAE;QACP,oBAAoB,EAAE,oBAAK;QAC3B,oBAAoB,EAAE,wBAAS;KAChC,KACG,KAAK,GACT,CACH,CAAC;AATW,QAAA,kBAAkB,sBAS7B;AAEK,MAAM,sBAAsB,GAAG,CAAC,aAAa,EAAE,EAAE;IACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,IAAA,iCAAc,EAAC;QACzC,CAAC,aAAa,CAAC,EAAE,4BAAS;KAC3B,CAAC,CAAC;IAEH,MAAM,KAAK,GAAG,MAAM,CAAC,aAAa,CAAC,CAAC;IAEpC,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAC1B,CAAC,QAAQ,EAAE,EAAE;QACX,MAAM,iBAAiB,GAAG,IAAA,eAAK,EAAC,EAAE,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QAGrD,IAAI,IAAA,iBAAO,EAAC,iBAAiB,EAAE,KAAK,CAAC,EAAE;YACrC,OAAO;SACR;QAED,SAAS,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,iBAAiB,EAAE,CAAC,CAAC;IACpD,CAAC,EACD,CAAC,KAAK,CAAC,CACR,CAAC;IAEF,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;AAC3B,CAAC,CAAC;AAtBW,QAAA,sBAAsB,0BAsBjC"}
+{"version":3,"file":"query-state.js","sourceRoot":"","sources":["../src/query-state.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA2C;AAC3C,6DAAqC;AACrC,uDAAsE;AACtE,6EAA+E;AAC/E,+CAA2D;AAMpD,MAAM,kBAAkB,GAAG,CAAC,KAA8B,EAAE,EAAE,CAAC,CACpE,8BAAC,qCAAkB,IAAC,OAAO,EAAE,oCAAmB,KAAM,KAAK,GAAI,CAChE,CAAC;AAFW,QAAA,kBAAkB,sBAE7B;AAEK,MAAM,sBAAsB,GAAG,CAAC,aAAqB,EAAE,EAAE;IAC9D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,IAAA,iCAAc,EAAC;QACjD,CAAC,aAAa,CAAC,EAAE,4BAAoB,CAAC,aAAa,CAAC;KACrD,CAAC,CAAC;IAEH,MAAM,cAAc,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IAEjD,MAAM,QAAQ,GAAG,IAAA,mBAAW,EAC1B,CAAC,OAAgC,EAAE,EAAE;QACnC,MAAM,QAAQ,GAAG,EAAE,GAAG,cAAc,EAAE,GAAG,OAAO,EAAE,CAAC;QAGnD,IAAI,IAAA,iBAAO,EAAC,cAAc,EAAE,QAAQ,CAAC,EAAE,CAAC;YACtC,OAAO;QACT,CAAC;QAED,aAAa,CAAC,EAAE,CAAC,aAAa,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,cAAc,EAAE,aAAa,CAAC,CAChC,CAAC;IAEF,OAAO,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AACpC,CAAC,CAAC;AAtBW,QAAA,sBAAsB,0BAsBjC"}

package/lib/stories/wrapper.js

@@ -6,7 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getWrapperDecorator = void 0;
 const react_1 = __importDefault(require("react"));
 const react_router_dom_1 = require("react-router-dom");
-const getWrapperDecorator = (customWrapperStyles = {}) => (storyFn) => {
+const query_state_1 = require("../query-state");
+const getWrapperDecorator = (customWrapperStyles = {}) => (Story) => {
     const wrapperStyles = {
         width: '100%',
         height: '100%',
@@ -14,7 +15,9 @@ const getWrapperDecorator = (customWrapperStyles = {}) => (storyFn) => {
         ...customWrapperStyles,
     };
     return (react_1.default.createElement(react_router_dom_1.MemoryRouter, { initialEntries: [{ pathname: '/', key: 'home' }] },
-        react_1.default.createElement("div", { style: wrapperStyles }, storyFn())));
+        react_1.default.createElement(query_state_1.QueryStateProvider, null,
+            react_1.default.createElement("div", { style: wrapperStyles },
+                react_1.default.createElement(Story, null)))));
 };
 exports.getWrapperDecorator = getWrapperDecorator;
 //# sourceMappingURL=wrapper.js.map

package/lib/stories/wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"wrapper.js","sourceRoot":"","sources":["../../src/stories/wrapper.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAAgD;AAEzC,MAAM,mBAAmB,GAAG,CAAC,mBAAmB,GAAG,EAAE,EAAE,EAAE,CAAC,CAAC,OAAO,EAAE,EAAE;IAC3E,MAAM,aAAa,GAAG;QACpB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,MAAM;QACf,GAAG,mBAAmB;KACvB,CAAC;IAEF,OAAO,CACL,8BAAC,+BAAY,IAAC,cAAc,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;QAC5D,uCAAK,KAAK,EAAE,aAAa,IACtB,OAAO,EAAE,CACN,CACO,CAChB,CAAC;AACJ,CAAC,CAAC;AAfW,QAAA,mBAAmB,uBAe9B"}
+{"version":3,"file":"wrapper.js","sourceRoot":"","sources":["../../src/stories/wrapper.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uDAAgD;AAEhD,gDAAoD;AAE7C,MAAM,mBAAmB,GAC9B,CAAC,mBAAmB,GAAG,EAAE,EAAE,EAAE,CAC7B,CAAC,KAAK,EAAE,EAAE;IACR,MAAM,aAAa,GAAG;QACpB,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,MAAM;QACf,GAAG,mBAAmB;KACvB,CAAC;IAEF,OAAO,CACL,8BAAC,+BAAY,IAAC,cAAc,EAAE,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC;QAC5D,8BAAC,gCAAkB;YACjB,uCAAK,KAAK,EAAE,aAAa;gBACvB,8BAAC,KAAK,OAAG,CACL,CACa,CACR,CAChB,CAAC;AACJ,CAAC,CAAC;AAnBS,QAAA,mBAAmB,uBAmB5B"}

package/lib/tokens.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SIZE = exports.KIND = exports.SPACES = exports.SPACE_XXXLARGE = exports.SPACE_XXLARGE = exports.SPACE_XLARGE = exports.SPACE_LARGE = exports.SPACE_MEDIUM = exports.SPACE_SMALL = exports.SPACE_XSMALL = exports.SPACE_XXSMALL = exports.SPACE_XXXSMALL = exports.NO_SPACE = void 0;
+exports.NO_SPACE = 'no-space';
+exports.SPACE_XXXSMALL = 'xxxsmall';
+exports.SPACE_XXSMALL = 'xxsmall';
+exports.SPACE_XSMALL = 'xsmall';
+exports.SPACE_SMALL = 'small';
+exports.SPACE_MEDIUM = 'medium';
+exports.SPACE_LARGE = 'large';
+exports.SPACE_XLARGE = 'xlarge';
+exports.SPACE_XXLARGE = 'xxlarge';
+exports.SPACE_XXXLARGE = 'xxxlarge';
+exports.SPACES = [
+    exports.NO_SPACE,
+    exports.SPACE_XXXSMALL,
+    exports.SPACE_XXSMALL,
+    exports.SPACE_XSMALL,
+    exports.SPACE_SMALL,
+    exports.SPACE_MEDIUM,
+    exports.SPACE_LARGE,
+    exports.SPACE_XLARGE,
+    exports.SPACE_XXLARGE,
+    exports.SPACE_XXXLARGE,
+];
+exports.KIND = {
+    DEFAULT: 'default',
+    SUCCESS: 'success',
+    INFO: 'info',
+    WARNING: 'warning',
+    DANGER: 'danger',
+};
+exports.SIZE = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+};
+//# sourceMappingURL=tokens.js.map

package/lib/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sourceRoot":"","sources":["../src/tokens.ts"],"names":[],"mappings":";;;AAAa,QAAA,QAAQ,GAAG,UAAU,CAAC;AACtB,QAAA,cAAc,GAAG,UAAU,CAAC;AAC5B,QAAA,aAAa,GAAG,SAAS,CAAC;AAC1B,QAAA,YAAY,GAAG,QAAQ,CAAC;AACxB,QAAA,WAAW,GAAG,OAAO,CAAC;AACtB,QAAA,YAAY,GAAG,QAAQ,CAAC;AACxB,QAAA,WAAW,GAAG,OAAO,CAAC;AACtB,QAAA,YAAY,GAAG,QAAQ,CAAC;AACxB,QAAA,aAAa,GAAG,SAAS,CAAC;AAC1B,QAAA,cAAc,GAAG,UAAU,CAAC;AAE5B,QAAA,MAAM,GAAG;IACpB,gBAAQ;IACR,sBAAc;IACd,qBAAa;IACb,oBAAY;IACZ,mBAAW;IACX,oBAAY;IACZ,mBAAW;IACX,oBAAY;IACZ,qBAAa;IACb,sBAAc;CACN,CAAC;AAEE,QAAA,IAAI,GAAG;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAEE,QAAA,IAAI,GAAG;IAClB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC"}

package/lib/ui/alert/alert.js

@@ -6,21 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Alert = void 0;
 const react_1 = __importDefault(require("react"));
 const classnames_1 = __importDefault(require("classnames"));
-const prop_types_1 = __importDefault(require("prop-types"));
 const box_1 = require("../../layout/box");
 const alert_module_css_1 = __importDefault(require("./alert.module.css"));
 const Alert = (props) => {
-    const { className, kind, children } = props;
-    return (react_1.default.createElement(box_1.Box, { padding: ['xsmall', 'small'], outline: true, className: (0, classnames_1.default)(alert_module_css_1.default.root, className, alert_module_css_1.default[kind]) }, children));
+    const { className = '', kind = 'default', ...restProps } = props;
+    return (react_1.default.createElement(box_1.Box, { padding: ['xsmall', 'small'], outline: true, className: (0, classnames_1.default)(alert_module_css_1.default.root, className, alert_module_css_1.default[kind]), ...restProps }));
 };
 exports.Alert = Alert;
-exports.Alert.propTypes = {
-    className: prop_types_1.default.string,
-    kind: prop_types_1.default.string,
-    children: prop_types_1.default.node.isRequired,
-};
-exports.Alert.defaultProps = {
-    className: '',
-    kind: 'default',
-};
 //# sourceMappingURL=alert.js.map

package/lib/ui/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/ui/alert/alert.jsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,4DAAmC;AAEnC,0CAAuC;AACvC,0EAAqC;AAE9B,MAAM,KAAK,GAAG,CAAC,KAAK,EAAE,EAAE;IAC7B,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE5C,OAAO,CACL,8BAAC,SAAG,IAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE,OAAO,QAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,0BAAG,CAAC,IAAI,EAAE,SAAS,EAAE,0BAAG,CAAC,IAAI,CAAC,CAAC,IACrF,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AARW,QAAA,KAAK,SAQhB;AAEF,aAAK,CAAC,SAAS,GAAG;IAChB,SAAS,EAAE,oBAAS,CAAC,MAAM;IAC3B,IAAI,EAAE,oBAAS,CAAC,MAAM;IACtB,QAAQ,EAAE,oBAAS,CAAC,IAAI,CAAC,UAAU;CACpC,CAAC;AAEF,aAAK,CAAC,YAAY,GAAG;IACnB,SAAS,EAAE,EAAE;IACb,IAAI,EAAE,SAAS;CAChB,CAAC"}
+{"version":3,"file":"alert.js","sourceRoot":"","sources":["../../../src/ui/alert/alert.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAG5B,0CAAuC;AACvC,0EAAqC;AAM9B,MAAM,KAAK,GAAG,CAAC,KAAoD,EAAE,EAAE;IAC5E,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,IAAI,GAAG,SAAS,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAEjE,OAAO,CACL,8BAAC,SAAG,IACF,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,EAC5B,OAAO,QACP,SAAS,EAAE,IAAA,oBAAE,EAAC,0BAAG,CAAC,IAAI,EAAE,SAAS,EAAE,0BAAG,CAAC,IAAI,CAAC,CAAC,KACzC,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC;AAXW,QAAA,KAAK,SAWhB"}

package/lib/ui/alert/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/alert/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/alert/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB"}

package/lib/ui/button/button.js

@@ -0,0 +1,38 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Button = exports.BUTTON_GLYPHS = exports.BUTTON_KIND = exports.BUTTON_SIZE = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const button_1 = require("ariakit/button");
+const icon_1 = require("../icon");
+const button_module_css_1 = __importDefault(require("./button.module.css"));
+exports.BUTTON_SIZE = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+};
+exports.BUTTON_KIND = {
+    PRIMARY: 'primary',
+    SECONDARY: 'secondary',
+    DANGE: 'danger',
+    WARNING: 'warning',
+    INFO: 'info',
+    SUCCES: 'success',
+};
+exports.BUTTON_GLYPHS = icon_1.Icon.ICONS;
+const ButtonComponent = (props) => {
+    const { className = '', outline = false, solid = false, active = false, kind = 'default', size = 'medium', radius = '', padding = '', as: Component = button_1.Button, children = null, Icon = icon_1.Icon, glyph, rightGlyph, ...restProps } = props;
+    const resolvedPadding = padding || ((outline || solid) && size);
+    const resolvedRadius = radius || ((outline || solid) && size);
+    const resolvedSize = Object.values(exports.BUTTON_SIZE).includes(size) ? size : exports.BUTTON_SIZE.MEDIUM;
+    const rootClassName = (0, classnames_1.default)(button_module_css_1.default.root, kind && button_module_css_1.default[kind], button_module_css_1.default[resolvedSize], outline && button_module_css_1.default.outline, outline && button_module_css_1.default[`outline--${kind}`], solid && button_module_css_1.default.solid, solid && button_module_css_1.default[`solid--${kind}`], resolvedPadding && button_module_css_1.default.padding, resolvedRadius && button_module_css_1.default[`radius--${resolvedRadius}`], active && button_module_css_1.default.active, active && outline && button_module_css_1.default[`active-outline-${kind}`], className);
+    return (react_1.default.createElement(Component, { ...restProps, className: rootClassName },
+        glyph && react_1.default.createElement(Icon, { glyph: glyph, className: button_module_css_1.default.glyph }),
+        children && react_1.default.createElement("span", { className: button_module_css_1.default.content }, children),
+        rightGlyph && react_1.default.createElement(Icon, { glyph: rightGlyph, className: button_module_css_1.default.glyph })));
+};
+exports.Button = react_1.default.forwardRef(ButtonComponent);
+//# sourceMappingURL=button.js.map

package/lib/ui/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/ui/button/button.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,2CAA+D;AAE/D,kCAA2C;AAC3C,4EAAsC;AAEzB,QAAA,WAAW,GAAG;IACzB,KAAK,EAAE,OAAO;IACd,MAAM,EAAE,QAAQ;IAChB,KAAK,EAAE,OAAO;CACN,CAAC;AAEE,QAAA,WAAW,GAAG;IACzB,OAAO,EAAE,SAAS;IAClB,SAAS,EAAE,WAAW;IACtB,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,SAAS;CACT,CAAC;AAEE,QAAA,aAAa,GAAG,WAAQ,CAAC,KAAK,CAAC;AAmB5C,MAAM,eAAe,GAAG,CACtB,KAAqF,EACrF,EAAE;IACF,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,OAAO,GAAG,KAAK,EACf,KAAK,GAAG,KAAK,EACb,MAAM,GAAG,KAAK,EACd,IAAI,GAAG,SAAS,EAChB,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,EAAE,EACX,OAAO,GAAG,EAAE,EACZ,EAAE,EAAE,SAAS,GAAG,eAAmB,EACnC,QAAQ,GAAG,IAAI,EACf,IAAI,GAAG,WAAQ,EACf,KAAK,EACL,UAAU,EACV,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAGV,MAAM,eAAe,GAAG,OAAO,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAChE,MAAM,cAAc,GAAG,MAAM,IAAI,CAAC,CAAC,OAAO,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,CAAC;IAE9D,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAC,mBAAW,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,mBAAW,CAAC,MAAM,CAAC;IAE3F,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,2BAAG,CAAC,IAAI,EACR,IAAI,IAAI,2BAAG,CAAC,IAAI,CAAC,EACjB,2BAAG,CAAC,YAAY,CAAC,EAEjB,OAAO,IAAI,2BAAG,CAAC,OAAO,EACtB,OAAO,IAAI,2BAAG,CAAC,YAAY,IAAI,EAAE,CAAC,EAElC,KAAK,IAAI,2BAAG,CAAC,KAAK,EAClB,KAAK,IAAI,2BAAG,CAAC,UAAU,IAAI,EAAE,CAAC,EAE9B,eAAe,IAAI,2BAAG,CAAC,OAAO,EAC9B,cAAc,IAAI,2BAAG,CAAC,WAAW,cAAc,EAAE,CAAC,EAElD,MAAM,IAAI,2BAAG,CAAC,MAAM,EACpB,MAAM,IAAI,OAAO,IAAI,2BAAG,CAAC,kBAAkB,IAAI,EAAE,CAAC,EAElD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa;QAC/C,KAAK,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI;QACrD,QAAQ,IAAI,wCAAM,SAAS,EAAE,2BAAG,CAAC,OAAO,IAAG,QAAQ,CAAQ;QAC3D,UAAU,IAAI,8BAAC,IAAI,IAAC,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,2BAAG,CAAC,KAAK,GAAI,CACtD,CACb,CAAC;AACJ,CAAC,CAAC;AAEW,QAAA,MAAM,GAAG,eAAK,CAAC,UAAU,CAAC,eAAe,CAAC,CAAC"}

package/lib/ui/button/button.module.css

@@ -0,0 +1,366 @@
+.root {
+  /* use for vertical padding and to compute gap and horizontal spacing */
+  --button-space: 0px;
+  /* button border width */
+  --border-width: 0px;
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(max(var(--button-space), var(--space-xxsmall)) * 0.66);
+  appearance: none;
+  padding: 0;
+  border: var(--border-width) solid transparent;
+  background: none;
+  transition: var(--transition-out);
+  color: var(--color-text-ultra-light);
+  font-family: var(--font-family);
+  white-space: nowrap;
+}
+
+a.root {
+  text-decoration: none;
+}
+
+.root:hover,
+.root:active,
+.root:focus {
+  outline: none;
+  color: var(--color-text-light);
+  transition: var(--transition-in);
+}
+
+.glyph {
+  flex: 0 0 auto;
+}
+
+.text {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+/**
+ * Kind variation
+ */
+.primary {
+  color: var(--color-primary);
+}
+
+.primary:hover,
+.primary:active,
+.primary:focus {
+  color: var(--color-primary-dark);
+}
+
+.secondary {
+  color: var(--color-secondary);
+}
+
+.secondary:hover,
+.secondary:active,
+.secondary:focus {
+  color: var(--color-secondary-dark);
+}
+
+.danger {
+  color: var(--color-danger);
+}
+
+.danger:hover,
+.danger:active,
+.danger:focus {
+  color: var(--color-danger-dark);
+}
+
+.warning {
+  color: var(--color-warning);
+}
+
+.warning:hover,
+.warning:active,
+.warning:focus {
+  color: var(--color-warning-dark);
+}
+
+.info {
+  color: var(--color-info);
+}
+
+.info:hover,
+.info:active,
+.info:focus {
+  color: var(--color-info-dark);
+}
+
+.success {
+  color: var(--color-success);
+}
+
+.success:hover,
+.success:active,
+.success:focus {
+  color: var(--color-success-dark);
+}
+
+/**
+ * Solid Kind variation
+ */
+.solid {
+  background: var(--color-text-ultra-light);
+  color: var(--color-background);
+}
+
+.solid:hover,
+.solid:active,
+.solid:focus {
+  background: var(--color-text-light);
+  color: var(--color-background);
+}
+
+.solid--primary {
+  background: var(--color-primary);
+}
+
+.solid--primary:hover,
+.solid--primary:active,
+.solid--primary:focus {
+  background: var(--color-primary-dark);
+}
+
+.solid--secondary {
+  background: var(--color-secondary);
+}
+
+.solid--secondary:hover,
+.solid--secondary:active,
+.solid--secondary:focus {
+  background: var(--color-secondary-dark);
+}
+
+.solid--danger {
+  background: var(--color-danger);
+}
+
+.solid--danger:hover,
+.solid--danger:active,
+.solid--danger:focus {
+  background: var(--color-danger-dark);
+}
+
+.solid--warning {
+  background: var(--color-warning);
+}
+
+.solid--warning:hover,
+.solid--warning:active,
+.solid--warning:focus {
+  background: var(--color-warning-dark);
+}
+
+.solid--info {
+  background: var(--color-info);
+}
+
+.solid--info:hover,
+.solid--info:active,
+.solid--info:focus {
+  background: var(--color-info-dark);
+}
+
+.solid--success {
+  background: var(--color-success);
+}
+
+.solid--success:hover,
+.solid--success:active,
+.solid--success:focus {
+  background: var(--color-success-dark);
+}
+
+/**
+ * Size variation
+ */
+.small {
+  --button-space: var(--space-xxsmall);
+
+  font-size: var(--size-small);
+  line-height: var(--space-small);
+}
+
+.small .glyph {
+  width: var(--space-small);
+  height: var(--space-small);
+}
+
+.medium {
+  --button-space: var(--space-xsmall);
+
+  font-size: var(--size-medium);
+  line-height: calc(var(--space-small) + var(--space-xxxsmall));
+}
+
+.medium .glyph {
+  width: calc(var(--space-small) + var(--space-xxxsmall));
+  height: calc(var(--space-small) + var(--space-xxxsmall));
+}
+
+.large {
+  --button-space: var(--space-small);
+
+  font-size: var(--size-large);
+  line-height: var(--space-medium);
+}
+
+.large .glyph {
+  width: var(--space-medium);
+  height: var(--space-medium);
+}
+
+/**
+ * Outline variation
+ */
+.outline {
+  --border-width: 1px;
+  border-color: var(--color-outline);
+}
+
+.outline:hover,
+.outline:active,
+.outline:focus {
+  border-color: var(--color-outline-dark);
+}
+
+.outline--primary {
+  border-color: var(--color-outline-primary);
+}
+
+.outline--primary:hover,
+.outline--primary:active,
+.outline--primary:focus {
+  border-color: var(--color-outline-primary-dark);
+}
+
+.outline--secondary {
+  border-color: var(--color-outline-secondary);
+}
+
+.outline--secondary:hover,
+.outline--secondary:active,
+.outline--secondary:focus {
+  border-color: var(--color-outline-secondary-dark);
+}
+
+.outline--danger {
+  border-color: var(--color-outline-danger);
+}
+
+.outline--danger:hover,
+.outline--danger:active,
+.outline--danger:focus {
+  border-color: var(--color-outline-danger-dark);
+}
+
+.outline--warning {
+  border-color: var(--color-outline-warning);
+}
+
+.outline--warning:hover,
+.outline--warning:active,
+.outline--warning:focus {
+  border-color: var(--color-outline-warning-dark);
+}
+
+.outline--info {
+  border-color: var(--color-outline-info);
+}
+
+.outline--info:hover,
+.outline--info:active,
+.outline--info:focus {
+  border-color: var(--color-outline-info-dark);
+}
+
+.outline--success {
+  border-color: var(--color-outline-success);
+}
+
+.outline--success:hover,
+.outline--success:active,
+.outline--success:focus {
+  border-color: var(--color-outline-success-dark);
+}
+
+
+/**
+ * Padding variation
+ */
+.padding {
+  padding: calc(var(--button-space) - var(--border-width));
+}
+
+/**
+ * Radius variation
+ */
+.radius--small {
+  border-radius: var(--radius-small);
+}
+
+.radius--medium {
+  border-radius: var(--radius-medium);
+}
+
+.radius--large {
+  border-radius: var(--radius-large);
+}
+
+.radius--circle {
+  border-radius: 50%;
+}
+
+/**
+ * Active variation
+ */
+.active {
+  text-decoration: underline;
+}
+
+.active-outline-default {
+  background: var(--color-highlight);
+  text-decoration: none;
+}
+
+.active-outline-primary {
+  background: var(--color-highlight-primary);
+  text-decoration: none;
+}
+.active-outline-secondary {
+  background: var(--color-highlight-secondary);
+  text-decoration: none;
+}
+
+.active-outline-info {
+  background: var(--color-highlight-info);
+  text-decoration: none;
+}
+
+.active-outline-success {
+  background: var(--color-highlight-success);
+  text-decoration: none;
+}
+
+.active-outline-warning {
+  background: var(--color-highlight-warning);
+  text-decoration: none;
+}
+
+.active-outline-danger {
+  background: var(--color-highlight-danger);
+  text-decoration: none;
+}
+
+/**
+ * Disabled state
+ */
+.root[disabled] {
+  filter: grayscale(1);
+}

package/lib/ui/button/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./button"), exports);
+//# sourceMappingURL=index.js.map

package/lib/ui/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/button/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,2CAAyB"}

package/lib/ui/container/container.js.map

@@ -1 +1 @@
-{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/ui/container/container.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAG5B,kFAAyC;AAMlC,MAAM,SAAS,GAAG,CAAC,EACxB,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,SAAS,EACG,EAAE,EAAE,CAAC,CACpB,8BAAC,SAAS,IAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,8BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAC3C,uCAAK,SAAS,EAAE,8BAAG,CAAC,KAAK,KAAM,SAAS,GAAI,CAClC,CACb,CAAC;AARW,QAAA,SAAS,aAQpB"}
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../src/ui/container/container.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAE5B,kFAAyC;AAMlC,MAAM,SAAS,GAAG,CAAC,EACxB,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,SAAS,EACG,EAAE,EAAE,CAAC,CACpB,8BAAC,SAAS,IAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,8BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IAC3C,uCAAK,SAAS,EAAE,8BAAG,CAAC,KAAK,KAAM,SAAS,GAAI,CAClC,CACb,CAAC;AARW,QAAA,SAAS,aAQpB"}

package/lib/ui/control-group/control-group.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ControlGroup = void 0;
+const react_1 = __importDefault(require("react"));
+const classnames_1 = __importDefault(require("classnames"));
+const flex_stack_1 = require("../../layout/flex-stack");
+const control_group_module_css_1 = __importDefault(require("./control-group.module.css"));
+const ControlGroup = (props) => {
+    const { className = '', ...restProps } = props;
+    return (react_1.default.createElement(flex_stack_1.FlexStack, { className: (0, classnames_1.default)(control_group_module_css_1.default.root, className), space: "no-space", alignItems: "center", ...restProps }));
+};
+exports.ControlGroup = ControlGroup;
+//# sourceMappingURL=control-group.js.map

package/lib/ui/control-group/control-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-group.js","sourceRoot":"","sources":["../../../src/ui/control-group/control-group.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAE5B,wDAAoD;AACpD,0FAA6C;AAEtC,MAAM,YAAY,GAAG,CAAC,KAA6C,EAAE,EAAE;IAC5E,MAAM,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC/C,OAAO,CACL,8BAAC,sBAAS,IACR,SAAS,EAAE,IAAA,oBAAE,EAAC,kCAAG,CAAC,IAAI,EAAE,SAAS,CAAC,EAClC,KAAK,EAAC,UAAU,EAChB,UAAU,EAAC,QAAQ,KACf,SAAS,GACb,CACH,CAAC;AACJ,CAAC,CAAC;AAVW,QAAA,YAAY,gBAUvB"}

package/lib/ui/control-group/control-group.module.css

@@ -0,0 +1,23 @@
+.root > *:not(:first-child) {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+
+  margin-left: -1px;
+}
+
+.root > *:not(:last-child) {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.root > * {
+  position: relative;
+  z-index: 0;
+}
+
+.root > *:hover,
+.root > *:active,
+.root > *:focus {
+  z-index: 1;
+  box-shadow: none;
+}