@dscout/particle 1.0.0-alpha.24 → 1.0.0-alpha.26

package/lib/cjs/components/button_plain.d.ts

@@ -1,17 +1,23 @@
 import React from 'react';
-import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
+import type { Colors, CommonComponentProps, Dimensions, MarginModifierProp, ModifierClassProp, PaddingModifierProp } from '../types';
 import type { GetRef } from '../utils/refs';
-interface ButtonPlainProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
+interface ButtonPlainProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp, PaddingModifierProp {
     'aria-controls'?: string;
     'aria-expanded'?: React.AriaAttributes['aria-expanded'];
     children?: React.ReactNode;
+    color?: Colors;
     disabled?: boolean;
+    display?: 'block' | 'inline-block';
     getRef?: GetRef<HTMLButtonElement>;
+    hoverColor?: Colors;
     id?: string;
     name?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     title?: string;
+    truncate?: boolean;
     type?: 'button' | 'submit';
+    underlined?: boolean;
+    width?: Dimensions;
 }
-export declare function ButtonPlain({ _modifierClass, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, disabled, getRef, id, margin, name, onClick, title, type, ...rest }: ButtonPlainProps): React.JSX.Element;
+export declare function ButtonPlain({ _modifierClass, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, color, disabled, display, getRef, hoverColor, id, margin, name, onClick, padding, title, truncate, type, underlined, width, ...rest }: ButtonPlainProps): React.JSX.Element;
 export {};

package/lib/cjs/components/button_plain.js

@@ -10,6 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+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 __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : 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 __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -26,13 +49,34 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ButtonPlain = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var class_names_1 = __importDefault(require("../utils/class_names"));
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
 var modifier_classes_1 = require("../utils/modifier_classes");
 function ButtonPlain(_a) {
-    var _modifierClass = _a._modifierClass, ariaControls = _a["aria-controls"], ariaExpanded = _a["aria-expanded"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, margin = _a.margin, name = _a.name, onClick = _a.onClick, title = _a.title, _b = _a.type, type = _b === void 0 ? 'button' : _b, rest = __rest(_a, ["_modifierClass", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "disabled", "getRef", "id", "margin", "name", "onClick", "title", "type"]);
-    return (react_1.default.createElement("button", __assign({}, (0, data_attributes_1.default)(rest), { "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: (0, class_names_1.default)('Button--plain', (0, modifier_classes_1.getMarginClass)(margin), _modifierClass), disabled: disabled, id: id, ref: getRef, name: name, onClick: onClick, title: title, 
+    var _modifierClass = _a._modifierClass, ariaControls = _a["aria-controls"], ariaExpanded = _a["aria-expanded"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, color = _a.color, disabled = _a.disabled, _b = _a.display, display = _b === void 0 ? 'inline-block' : _b, getRef = _a.getRef, hoverColor = _a.hoverColor, id = _a.id, margin = _a.margin, name = _a.name, onClick = _a.onClick, padding = _a.padding, title = _a.title, _c = _a.truncate, truncate = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, underlined = _a.underlined, width = _a.width, rest = __rest(_a, ["_modifierClass", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "color", "disabled", "display", "getRef", "hoverColor", "id", "margin", "name", "onClick", "padding", "title", "truncate", "type", "underlined", "width"]);
+    var _e = (0, react_1.useState)(false), hovered = _e[0], setHovered = _e[1];
+    var colorClass = (0, react_1.useMemo)(function () {
+        var colorEnum = color;
+        if (hovered && hoverColor && !disabled) {
+            colorEnum = hoverColor;
+        }
+        return colorEnum && "color--".concat(colorEnum);
+    }, [hovered, color, hoverColor]);
+    var classes = (0, class_names_1.default)('Button--plain', _modifierClass, colorClass, (0, modifier_classes_1.getDimensionClass)('width', width), (0, modifier_classes_1.getSpacingClass)('margin', margin), (0, modifier_classes_1.getSpacingClass)('padding', padding), {
+        'text-decoration--underline': underlined,
+        'display--b': display === 'block',
+        truncate: truncate
+    });
+    return (react_1.default.createElement("button", __assign({}, (0, data_attributes_1.default)(rest), { "aria-controls": ariaControls, "aria-describedby": ariaDescribedby, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: classes, disabled: disabled, id: id, name: name, onBlur: function () {
+            setHovered(false);
+        }, onClick: onClick, onFocus: function () {
+            setHovered(true);
+        }, onMouseEnter: function () {
+            setHovered(true);
+        }, onMouseLeave: function () {
+            setHovered(false);
+        }, ref: getRef, title: title, 
         // eslint-disable-next-line react/button-has-type
         type: type }), children));
 }

package/lib/cjs/components/button_plain.js.map

@@ -1 +1 @@
-{"version":3,"file":"button_plain.js","sourceRoot":"","sources":["../../../src/components/button_plain.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAkB3D,SAAgB,WAAW,CAAC,EAiBT;IAhBjB,IAAA,cAAc,oBAAA,EACG,YAAY,sBAAA,EACZ,YAAY,sBAAA,EACf,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,KAAK,WAAA,EACL,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACZ,IAAI,cAhBmB,+LAiB3B,CADQ;IAEP,OAAO,CACL,qDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,qBACZ,YAAY,mBACZ,YAAY,gBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,IAAA,qBAAU,EACnB,eAAe,EACf,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB,cAAc,CACf,EACD,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK;QACZ,iDAAiD;QACjD,IAAI,EAAE,IAAI,KAET,QAAQ,CACF,CACV,CAAC;AACJ,CAAC;AA3CD,kCA2CC"}
+{"version":3,"file":"button_plain.js","sourceRoot":"","sources":["../../../src/components/button_plain.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAiD;AAYjD,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA+E;AAyB/E,SAAgB,WAAW,CAAC,EAwBT;IAvBjB,IAAA,cAAc,oBAAA,EACG,YAAY,sBAAA,EACZ,YAAY,sBAAA,EACf,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,eAAwB,EAAxB,OAAO,mBAAG,cAAc,KAAA,EACxB,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,EAAE,QAAA,EACF,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,OAAO,aAAA,EACP,KAAK,WAAA,EACL,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,UAAU,gBAAA,EACV,KAAK,WAAA,EACF,IAAI,cAvBmB,+QAwB3B,CADQ;IAED,IAAA,KAAwB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAE9C,IAAM,UAAU,GAAG,IAAA,eAAO,EAAC;QACzB,IAAI,SAAS,GAAG,KAAK,CAAC;QAEtB,IAAI,OAAO,IAAI,UAAU,IAAI,CAAC,QAAQ,EAAE;YACtC,SAAS,GAAG,UAAU,CAAC;SACxB;QAED,OAAO,SAAS,IAAI,iBAAU,SAAS,CAAE,CAAC;IAC5C,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjC,IAAM,OAAO,GAAG,IAAA,qBAAU,EACxB,eAAe,EACf,cAAc,EACd,UAAU,EACV,IAAA,oCAAiB,EAAC,OAAO,EAAE,KAAK,CAAC,EACjC,IAAA,kCAAe,EAAC,QAAQ,EAAE,MAAM,CAAC,EACjC,IAAA,kCAAe,EAAC,SAAS,EAAE,OAAO,CAAC,EACnC;QACE,4BAA4B,EAAE,UAAU;QACxC,YAAY,EAAE,OAAO,KAAK,OAAO;QACjC,QAAQ,UAAA;KACT,CACF,CAAC;IAEF,OAAO,CACL,qDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,qBACZ,YAAY,sBACT,eAAe,mBAClB,YAAY,gBACf,SAAS,qBACJ,cAAc,EAC/B,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE;YACN,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EACD,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE;YACP,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,EACD,YAAY,EAAE;YACZ,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,EACD,YAAY,EAAE;YACZ,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EACD,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,KAAK;QACZ,iDAAiD;QACjD,IAAI,EAAE,IAAI,KAET,QAAQ,CACF,CACV,CAAC;AACJ,CAAC;AApFD,kCAoFC"}

package/lib/cjs/components/common_input.d.ts

@@ -9,6 +9,7 @@ interface CommonInputProps extends CommonComponentProps, MarginModifierProp, Mod
     defaultValue?: number | string;
     disabled?: boolean;
     getRef?: GetRef<HTMLInputElement>;
+    icon?: React.JSX.Element;
     id?: string;
     invalid?: boolean;
     max?: number | string;
@@ -31,5 +32,5 @@ interface CommonInputProps extends CommonComponentProps, MarginModifierProp, Mod
     type?: string;
     value?: number | string;
 }
-export declare function CommonInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-required': ariaRequired, autoComplete, autoFocus, defaultValue, disabled, getRef, id, invalid, margin, max, maxLength, min, mini, name, onBlur, onChange, onFocus, onKeyDown, onPaste, placeholder, prefix, readOnly, required, suffix, step, tabIndex, type, value, ...rest }: CommonInputProps): React.JSX.Element;
+export declare function CommonInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-required': ariaRequired, autoComplete, autoFocus, defaultValue, disabled, getRef, icon, id, invalid, margin, max, maxLength, min, mini, name, onBlur, onChange, onFocus, onKeyDown, onPaste, placeholder, prefix, readOnly, required, suffix, step, tabIndex, type, value, ...rest }: CommonInputProps): React.JSX.Element;
 export {};

package/lib/cjs/components/common_input.js

@@ -34,19 +34,20 @@ var modifier_classes_1 = require("../utils/modifier_classes");
 var with_addons_1 = require("./with_addons");
 function CommonInput(_a) {
     var _b;
-    var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaRequired = _a["aria-required"], autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, defaultValue = _a.defaultValue, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, invalid = _a.invalid, margin = _a.margin, max = _a.max, maxLength = _a.maxLength, min = _a.min, mini = _a.mini, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onPaste = _a.onPaste, placeholder = _a.placeholder, prefix = _a.prefix, readOnly = _a.readOnly, required = _a.required, suffix = _a.suffix, step = _a.step, tabIndex = _a.tabIndex, type = _a.type, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', 'aria-required', "autoComplete", "autoFocus", "defaultValue", "disabled", "getRef", "id", "invalid", "margin", "max", "maxLength", "min", "mini", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onPaste", "placeholder", "prefix", "readOnly", "required", "suffix", "step", "tabIndex", "type", "value"]);
-    var affixed = !!prefix || !!suffix;
+    var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaRequired = _a["aria-required"], autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, defaultValue = _a.defaultValue, disabled = _a.disabled, getRef = _a.getRef, icon = _a.icon, id = _a.id, invalid = _a.invalid, margin = _a.margin, max = _a.max, maxLength = _a.maxLength, min = _a.min, mini = _a.mini, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onPaste = _a.onPaste, placeholder = _a.placeholder, prefix = _a.prefix, readOnly = _a.readOnly, required = _a.required, suffix = _a.suffix, step = _a.step, tabIndex = _a.tabIndex, type = _a.type, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', 'aria-required', "autoComplete", "autoFocus", "defaultValue", "disabled", "getRef", "icon", "id", "invalid", "margin", "max", "maxLength", "min", "mini", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onPaste", "placeholder", "prefix", "readOnly", "required", "suffix", "step", "tabIndex", "type", "value"]);
+    var affixed = !!prefix || !!suffix || !!icon;
     var inputClass = (0, class_names_1.default)('Input', (_b = {},
         _b[(0, modifier_classes_1.getMarginClass)(margin)] = !affixed,
         _b[_modifierClass] = _modifierClass && !affixed,
         _b['Input--invalid'] = invalid,
         _b['Input--mini'] = mini,
+        _b['Input--with-icon'] = !!icon,
         _b));
     var input = (react_1.default.createElement("input", __assign({}, (0, data_attributes_1.default)(rest), { "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": ariaRequired, autoComplete: autoComplete, 
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus: autoFocus, className: inputClass, defaultValue: defaultValue, disabled: disabled, id: id, max: max, maxLength: maxLength, min: min, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onPaste: onPaste, placeholder: placeholder, readOnly: readOnly, required: required, ref: getRef, step: step, tabIndex: tabIndex, type: type, value: (0, forms_1.inputValue)(value, onChange) })));
     if (affixed) {
-        return (react_1.default.createElement(with_addons_1.WithAddons, { _modifierClass: _modifierClass, disabled: disabled, margin: margin, mini: mini, prefix: prefix, suffix: suffix }, input));
+        return (react_1.default.createElement(with_addons_1.WithAddons, { _modifierClass: _modifierClass, disabled: disabled, icon: icon, margin: margin, mini: mini, prefix: prefix, suffix: suffix }, input));
     }
     return input;
 }

package/lib/cjs/components/common_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"common_input.js","sourceRoot":"","sources":["../../../src/components/common_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,wCAA4C;AAC5C,6EAAyD;AACzD,8DAA2D;AAE3D,6CAA2C;AAoC3C,SAAgB,WAAW,CAAC,EAmCT;;IAlCjB,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EAChB,YAAY,sBAAA,EAC7B,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,OAAO,aAAA,EACP,MAAM,YAAA,EACN,GAAG,SAAA,EACH,SAAS,eAAA,EACT,GAAG,SAAA,EACH,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA,EACT,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,KAAK,WAAA,EACF,IAAI,cAlCmB,0YAmC3B,CADQ;IAEP,IAAM,OAAO,GAAG,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC;IAErC,IAAM,UAAU,GAAG,IAAA,qBAAU,EAAC,OAAO;QACnC,GAAC,IAAA,iCAAc,EAAC,MAAM,CAAC,IAAG,CAAC,OAAO;QAClC,GAAC,cAAc,IAAG,cAAc,IAAI,CAAC,OAAO;QAC5C,oBAAgB,GAAE,OAAO;QACzB,iBAAa,GAAE,IAAI;YACnB,CAAC;IAEH,IAAM,KAAK,GAAG,CACZ,oDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,wBACT,eAAe,kBACnB,WAAW,gBACb,SAAS,qBACJ,cAAc,mBAChB,YAAY,EAC3B,YAAY,EAAE,YAAY;QAC1B,iDAAiD;QACjD,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,UAAU,EACrB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAA,kBAAU,EAAC,KAAK,EAAE,QAAQ,CAAC,IAClC,CACH,CAAC;IAEF,IAAI,OAAO,EAAE;QACX,OAAO,CACL,8BAAC,wBAAU,IACT,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,IAEb,KAAK,CACK,CACd,CAAC;KACH;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAhGD,kCAgGC"}
+{"version":3,"file":"common_input.js","sourceRoot":"","sources":["../../../src/components/common_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,wCAA4C;AAC5C,6EAAyD;AACzD,8DAA2D;AAE3D,6CAA2C;AAqC3C,SAAgB,WAAW,CAAC,EAoCT;;IAnCjB,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EAChB,YAAY,sBAAA,EAC7B,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,EAAE,QAAA,EACF,OAAO,aAAA,EACP,MAAM,YAAA,EACN,GAAG,SAAA,EACH,SAAS,eAAA,EACT,GAAG,SAAA,EACH,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA,EACT,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,KAAK,WAAA,EACF,IAAI,cAnCmB,kZAoC3B,CADQ;IAEP,IAAM,OAAO,GAAG,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,MAAM,IAAI,CAAC,CAAC,IAAI,CAAC;IAE/C,IAAM,UAAU,GAAG,IAAA,qBAAU,EAAC,OAAO;QACnC,GAAC,IAAA,iCAAc,EAAC,MAAM,CAAC,IAAG,CAAC,OAAO;QAClC,GAAC,cAAc,IAAG,cAAc,IAAI,CAAC,OAAO;QAC5C,oBAAgB,GAAE,OAAO;QACzB,iBAAa,GAAE,IAAI;QACnB,sBAAkB,GAAE,CAAC,CAAC,IAAI;YAC1B,CAAC;IAEH,IAAM,KAAK,GAAG,CACZ,oDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,wBACT,eAAe,kBACnB,WAAW,gBACb,SAAS,qBACJ,cAAc,mBAChB,YAAY,EAC3B,YAAY,EAAE,YAAY;QAC1B,iDAAiD;QACjD,SAAS,EAAE,SAAS,EACpB,SAAS,EAAE,UAAU,EACrB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,IAAA,kBAAU,EAAC,KAAK,EAAE,QAAQ,CAAC,IAClC,CACH,CAAC;IAEF,IAAI,OAAO,EAAE;QACX,OAAO,CACL,8BAAC,wBAAU,IACT,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,IAEb,KAAK,CACK,CACd,CAAC;KACH;IAED,OAAO,KAAK,CAAC;AACf,CAAC;AAnGD,kCAmGC"}

package/lib/cjs/components/input_group_item.d.ts

@@ -2,9 +2,11 @@ import React from 'react';
 import type { CommonComponentProps } from '../types';
 interface InputGroupItemProps extends CommonComponentProps {
     children?: React.ReactNode;
+    icon?: React.JSX.Element;
     id?: string;
     grow?: '0' | '1' | '2' | '3';
     shrink?: '0' | '1' | '2' | '3';
+    standalone?: boolean;
 }
-export declare function InputGroupItem({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, id, grow, shrink, ...rest }: InputGroupItemProps): React.JSX.Element;
+export declare function InputGroupItem({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, icon, id, grow, shrink, standalone, ...rest }: InputGroupItemProps): React.JSX.Element;
 export {};

package/lib/cjs/components/input_group_item.js

@@ -29,14 +29,20 @@ exports.InputGroupItem = void 0;
 var react_1 = __importDefault(require("react"));
 var class_names_1 = __importDefault(require("../utils/class_names"));
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var types_1 = require("../utils/types");
 function InputGroupItem(_a) {
     var _b;
-    var ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, id = _a.id, grow = _a.grow, shrink = _a.shrink, rest = __rest(_a, ['aria-label', 'aria-labelledby', 'aria-describedby', "children", "id", "grow", "shrink"]);
+    var ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, icon = _a.icon, id = _a.id, grow = _a.grow, shrink = _a.shrink, standalone = _a.standalone, rest = __rest(_a, ['aria-label', 'aria-labelledby', 'aria-describedby', "children", "icon", "id", "grow", "shrink", "standalone"]);
+    var hasIcon = (0, types_1.isPresent)(icon);
     var className = (0, class_names_1.default)('Input-Group__Item', (_b = {},
         _b["flex-grow--".concat(grow)] = grow !== undefined,
         _b["flex-shrink--".concat(shrink)] = shrink !== undefined,
+        _b['position--r'] = !!icon,
+        _b['Input-Group__Item--standalone'] = standalone,
         _b));
-    return (react_1.default.createElement("div", __assign({}, (0, data_attributes_1.default)(rest), { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: className, id: id }), children));
+    return (react_1.default.createElement("div", __assign({}, (0, data_attributes_1.default)(rest), { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: className, id: id }),
+        children,
+        hasIcon && (react_1.default.createElement("span", { className: "Input-Group__Icon", "aria-hidden": "true" }, icon))));
 }
 exports.InputGroupItem = InputGroupItem;
 //# sourceMappingURL=input_group_item.js.map

package/lib/cjs/components/input_group_item.js.map

@@ -1 +1 @@
-{"version":3,"file":"input_group_item.js","sourceRoot":"","sources":["../../../src/components/input_group_item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAI1B,qEAA8C;AAC9C,6EAAyD;AASzD,SAAgB,cAAc,CAAC,EAST;;IARpB,IAAc,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,MAAM,YAAA,EACH,IAAI,cARsB,yFAS9B,CADQ;IAEP,IAAM,SAAS,GAAG,IAAA,qBAAU,EAAC,mBAAmB;QAC9C,GAAC,qBAAc,IAAI,CAAE,IAAG,IAAI,KAAK,SAAS;QAC1C,GAAC,uBAAgB,MAAM,CAAE,IAAG,MAAM,KAAK,SAAS;YAChD,CAAC;IAEH,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,KAEL,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AA3BD,wCA2BC"}
+{"version":3,"file":"input_group_item.js","sourceRoot":"","sources":["../../../src/components/input_group_item.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAI1B,qEAA8C;AAC9C,6EAAyD;AACzD,wCAA2C;AAW3C,SAAgB,cAAc,CAAC,EAWT;;IAVpB,IAAc,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,UAAU,gBAAA,EACP,IAAI,cAVsB,+GAW9B,CADQ;IAEP,IAAM,OAAO,GAAG,IAAA,iBAAS,EAAC,IAAI,CAAC,CAAC;IAEhC,IAAM,SAAS,GAAG,IAAA,qBAAU,EAAC,mBAAmB;QAC9C,GAAC,qBAAc,IAAI,CAAE,IAAG,IAAI,KAAK,SAAS;QAC1C,GAAC,uBAAgB,MAAM,CAAE,IAAG,MAAM,KAAK,SAAS;QAChD,iBAAa,GAAE,CAAC,CAAC,IAAI;QACrB,mCAA+B,GAAE,UAAU;YAC3C,CAAC;IAEH,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE;QAEL,QAAQ;QACR,OAAO,IAAI,CACV,wCAAM,SAAS,EAAC,mBAAmB,iBAAa,MAAM,IACnD,IAAI,CACA,CACR,CACG,CACP,CAAC;AACJ,CAAC;AAtCD,wCAsCC"}

package/lib/cjs/components/search_input.d.ts

@@ -9,6 +9,7 @@ interface SearchInputProps extends CommonComponentProps, MarginModifierProp, Mod
     defaultValue?: number | string;
     disabled?: boolean;
     getRef?: GetRef<HTMLInputElement>;
+    icon?: React.JSX.Element;
     id?: string;
     invalid?: boolean;
     mini?: boolean;
@@ -19,10 +20,12 @@ interface SearchInputProps extends CommonComponentProps, MarginModifierProp, Mod
     onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
     onPaste?: React.ClipboardEventHandler<HTMLInputElement>;
     placeholder?: string;
+    prefix?: React.ReactNode;
     readOnly?: boolean;
     required?: boolean;
+    suffix?: React.ReactNode;
     tabIndex?: number;
     value?: string;
 }
-export declare function SearchInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-required': ariaRequired, autoComplete, autoFocus, defaultValue, disabled, getRef, id, invalid, margin, mini, name, onBlur, onChange, onFocus, onKeyDown, onPaste, placeholder, readOnly, required, tabIndex, value, ...rest }: SearchInputProps): React.JSX.Element;
+export declare function SearchInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-required': ariaRequired, autoComplete, autoFocus, defaultValue, disabled, getRef, icon, id, invalid, margin, mini, name, onBlur, onChange, onFocus, onKeyDown, onPaste, placeholder, prefix, readOnly, required, suffix, tabIndex, value, ...rest }: SearchInputProps): React.JSX.Element;
 export {};

package/lib/cjs/components/search_input.js

@@ -30,8 +30,8 @@ var react_1 = __importDefault(require("react"));
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
 var common_input_1 = require("./common_input");
 function SearchInput(_a) {
-    var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaRequired = _a["aria-required"], autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, defaultValue = _a.defaultValue, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, invalid = _a.invalid, margin = _a.margin, mini = _a.mini, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onPaste = _a.onPaste, _b = _a.placeholder, placeholder = _b === void 0 ? 'Search' : _b, readOnly = _a.readOnly, required = _a.required, tabIndex = _a.tabIndex, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', 'aria-required', "autoComplete", "autoFocus", "defaultValue", "disabled", "getRef", "id", "invalid", "margin", "mini", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onPaste", "placeholder", "readOnly", "required", "tabIndex", "value"]);
-    return (react_1.default.createElement(common_input_1.CommonInput, __assign({}, (0, data_attributes_1.default)(rest), { _modifierClass: _modifierClass, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": ariaRequired, autoComplete: autoComplete, autoFocus: autoFocus, defaultValue: defaultValue, disabled: disabled, getRef: getRef, id: id, invalid: invalid, margin: margin, mini: mini, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onPaste: onPaste, placeholder: placeholder, readOnly: readOnly, required: required, tabIndex: tabIndex, type: "search", value: value })));
+    var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaRequired = _a["aria-required"], autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, defaultValue = _a.defaultValue, disabled = _a.disabled, getRef = _a.getRef, icon = _a.icon, id = _a.id, invalid = _a.invalid, margin = _a.margin, mini = _a.mini, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onPaste = _a.onPaste, _b = _a.placeholder, placeholder = _b === void 0 ? 'Search' : _b, prefix = _a.prefix, readOnly = _a.readOnly, required = _a.required, suffix = _a.suffix, tabIndex = _a.tabIndex, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', 'aria-required', "autoComplete", "autoFocus", "defaultValue", "disabled", "getRef", "icon", "id", "invalid", "margin", "mini", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onPaste", "placeholder", "prefix", "readOnly", "required", "suffix", "tabIndex", "value"]);
+    return (react_1.default.createElement(common_input_1.CommonInput, __assign({}, (0, data_attributes_1.default)(rest), { _modifierClass: _modifierClass, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": ariaRequired, autoComplete: autoComplete, autoFocus: autoFocus, defaultValue: defaultValue, disabled: disabled, getRef: getRef, icon: icon, id: id, invalid: invalid, margin: margin, mini: mini, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onPaste: onPaste, placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, suffix: suffix, tabIndex: tabIndex, type: "search", value: value })));
 }
 exports.SearchInput = SearchInput;
 //# sourceMappingURL=search_input.js.map

package/lib/cjs/components/search_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"search_input.js","sourceRoot":"","sources":["../../../src/components/search_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,6EAAyD;AAEzD,+CAA6C;AA6B7C,SAAgB,WAAW,CAAC,EA4BT;IA3BjB,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EAChB,YAAY,sBAAA,EAC7B,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,OAAO,aAAA,EACP,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA,EACT,OAAO,aAAA,EACP,mBAAsB,EAAtB,WAAW,mBAAG,QAAQ,KAAA,EACtB,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,cA3BmB,2UA4B3B,CADQ;IAEP,OAAO,CACL,8BAAC,0BAAW,eACN,IAAA,yBAAiB,EAAC,IAAI,CAAC,IAC3B,cAAc,EAAE,cAAc,sBACZ,eAAe,kBACnB,WAAW,gBACb,SAAS,qBACJ,cAAc,mBAChB,YAAY,EAC3B,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC;AA7DD,kCA6DC"}
+{"version":3,"file":"search_input.js","sourceRoot":"","sources":["../../../src/components/search_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,6EAAyD;AAEzD,+CAA6C;AAgC7C,SAAgB,WAAW,CAAC,EA+BT;IA9BjB,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EAChB,YAAY,sBAAA,EAC7B,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,EAAE,QAAA,EACF,OAAO,aAAA,EACP,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA,EACT,OAAO,aAAA,EACP,mBAAsB,EAAtB,WAAW,mBAAG,QAAQ,KAAA,EACtB,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,cA9BmB,uWA+B3B,CADQ;IAEP,OAAO,CACL,8BAAC,0BAAW,eACN,IAAA,yBAAiB,EAAC,IAAI,CAAC,IAC3B,cAAc,EAAE,cAAc,sBACZ,eAAe,kBACnB,WAAW,gBACb,SAAS,qBACJ,cAAc,mBAChB,YAAY,EAC3B,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC;AAnED,kCAmEC"}

package/lib/cjs/components/text_input.d.ts

@@ -9,6 +9,7 @@ interface TextInputProps extends CommonComponentProps, MarginModifierProp, Modif
     defaultValue?: number | string;
     disabled?: boolean;
     getRef?: GetRef<HTMLInputElement>;
+    icon?: React.JSX.Element;
     id?: string;
     invalid?: boolean;
     maxLength?: number;
@@ -27,5 +28,5 @@ interface TextInputProps extends CommonComponentProps, MarginModifierProp, Modif
     tabIndex?: number;
     value?: number | string;
 }
-export declare function TextInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-required': ariaRequired, autoComplete, autoFocus, defaultValue, disabled, getRef, id, invalid, margin, maxLength, mini, name, onBlur, onChange, onFocus, onKeyDown, onPaste, placeholder, prefix, readOnly, required, suffix, tabIndex, value, ...rest }: TextInputProps): React.JSX.Element;
+export declare function TextInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-required': ariaRequired, autoComplete, autoFocus, defaultValue, disabled, getRef, icon, id, invalid, margin, maxLength, mini, name, onBlur, onChange, onFocus, onKeyDown, onPaste, placeholder, prefix, readOnly, required, suffix, tabIndex, value, ...rest }: TextInputProps): React.JSX.Element;
 export {};

package/lib/cjs/components/text_input.js

@@ -30,8 +30,8 @@ var react_1 = __importDefault(require("react"));
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
 var common_input_1 = require("./common_input");
 function TextInput(_a) {
-    var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaRequired = _a["aria-required"], autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, defaultValue = _a.defaultValue, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, invalid = _a.invalid, margin = _a.margin, maxLength = _a.maxLength, mini = _a.mini, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onPaste = _a.onPaste, placeholder = _a.placeholder, prefix = _a.prefix, readOnly = _a.readOnly, required = _a.required, suffix = _a.suffix, tabIndex = _a.tabIndex, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', 'aria-required', "autoComplete", "autoFocus", "defaultValue", "disabled", "getRef", "id", "invalid", "margin", "maxLength", "mini", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onPaste", "placeholder", "prefix", "readOnly", "required", "suffix", "tabIndex", "value"]);
-    return (react_1.default.createElement(common_input_1.CommonInput, __assign({}, (0, data_attributes_1.default)(rest), { _modifierClass: _modifierClass, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": ariaRequired, autoComplete: autoComplete, autoFocus: autoFocus, defaultValue: defaultValue, disabled: disabled, getRef: getRef, id: id, invalid: invalid, margin: margin, maxLength: maxLength, mini: mini, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onPaste: onPaste, placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, suffix: suffix, tabIndex: tabIndex, type: "text", value: value })));
+    var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaRequired = _a["aria-required"], autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, defaultValue = _a.defaultValue, disabled = _a.disabled, getRef = _a.getRef, icon = _a.icon, id = _a.id, invalid = _a.invalid, margin = _a.margin, maxLength = _a.maxLength, mini = _a.mini, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onPaste = _a.onPaste, placeholder = _a.placeholder, prefix = _a.prefix, readOnly = _a.readOnly, required = _a.required, suffix = _a.suffix, tabIndex = _a.tabIndex, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', 'aria-required', "autoComplete", "autoFocus", "defaultValue", "disabled", "getRef", "icon", "id", "invalid", "margin", "maxLength", "mini", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onPaste", "placeholder", "prefix", "readOnly", "required", "suffix", "tabIndex", "value"]);
+    return (react_1.default.createElement(common_input_1.CommonInput, __assign({}, (0, data_attributes_1.default)(rest), { _modifierClass: _modifierClass, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": ariaRequired, autoComplete: autoComplete, autoFocus: autoFocus, defaultValue: defaultValue, disabled: disabled, getRef: getRef, icon: icon, id: id, invalid: invalid, margin: margin, maxLength: maxLength, mini: mini, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onPaste: onPaste, placeholder: placeholder, prefix: prefix, readOnly: readOnly, required: required, suffix: suffix, tabIndex: tabIndex, type: "text", value: value })));
 }
 exports.TextInput = TextInput;
 //# sourceMappingURL=text_input.js.map

package/lib/cjs/components/text_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"text_input.js","sourceRoot":"","sources":["../../../src/components/text_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,6EAAyD;AAEzD,+CAA6C;AAgC7C,SAAgB,SAAS,CAAC,EA+BT;IA9Bf,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EAChB,YAAY,sBAAA,EAC7B,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,OAAO,aAAA,EACP,MAAM,YAAA,EACN,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA,EACT,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,cA9BiB,4WA+BzB,CADQ;IAEP,OAAO,CACL,8BAAC,0BAAW,eACN,IAAA,yBAAiB,EAAC,IAAI,CAAC,IAC3B,cAAc,EAAE,cAAc,sBACZ,eAAe,kBACnB,WAAW,gBACb,SAAS,qBACJ,cAAc,mBAChB,YAAY,EAC3B,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC;AAnED,8BAmEC"}
+{"version":3,"file":"text_input.js","sourceRoot":"","sources":["../../../src/components/text_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,6EAAyD;AAEzD,+CAA6C;AAiC7C,SAAgB,SAAS,CAAC,EAgCT;IA/Bf,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EAChB,YAAY,sBAAA,EAC7B,YAAY,kBAAA,EACZ,SAAS,eAAA,EACT,YAAY,kBAAA,EACZ,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,EAAE,QAAA,EACF,OAAO,aAAA,EACP,MAAM,YAAA,EACN,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,OAAO,aAAA,EACP,SAAS,eAAA,EACT,OAAO,aAAA,EACP,WAAW,iBAAA,EACX,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,cA/BiB,oXAgCzB,CADQ;IAEP,OAAO,CACL,8BAAC,0BAAW,eACN,IAAA,yBAAiB,EAAC,IAAI,CAAC,IAC3B,cAAc,EAAE,cAAc,sBACZ,eAAe,kBACnB,WAAW,gBACb,SAAS,qBACJ,cAAc,mBAChB,YAAY,EAC3B,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,MAAM,EACX,KAAK,EAAE,KAAK,IACZ,CACH,CAAC;AACJ,CAAC;AArED,8BAqEC"}

package/lib/cjs/components/with_addons.d.ts

@@ -3,9 +3,10 @@ import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from
 interface WithAddonsProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     children?: React.ReactNode;
     disabled?: boolean;
+    icon?: React.JSX.Element;
     mini?: boolean;
     prefix?: React.ReactNode;
     suffix?: React.ReactNode;
 }
-export declare function WithAddons({ _modifierClass, children, disabled, margin, mini, prefix, suffix }: WithAddonsProps): React.JSX.Element;
+export declare function WithAddons({ _modifierClass, children, disabled, icon, margin, mini, prefix, suffix }: WithAddonsProps): React.JSX.Element;
 export {};

package/lib/cjs/components/with_addons.js

@@ -10,7 +10,7 @@ var input_addon_1 = require("./input_addon");
 var input_group_1 = require("./input_group");
 var input_group_item_1 = require("./input_group_item");
 function WithAddons(_a) {
-    var _modifierClass = _a._modifierClass, children = _a.children, disabled = _a.disabled, margin = _a.margin, mini = _a.mini, prefix = _a.prefix, suffix = _a.suffix;
+    var _modifierClass = _a._modifierClass, children = _a.children, disabled = _a.disabled, icon = _a.icon, margin = _a.margin, mini = _a.mini, prefix = _a.prefix, suffix = _a.suffix;
     var hasPrefix = (0, types_1.isPresent)(prefix);
     var hasSuffix = (0, types_1.isPresent)(suffix);
     function renderAddon(type) {
@@ -21,7 +21,7 @@ function WithAddons(_a) {
     }
     return (react_1.default.createElement(input_group_1.InputGroup, { margin: margin, _modifierClass: _modifierClass },
         hasPrefix && renderAddon('prefix'),
-        react_1.default.createElement(input_group_item_1.InputGroupItem, { grow: "1" }, children),
+        react_1.default.createElement(input_group_item_1.InputGroupItem, { standalone: !hasPrefix && !hasSuffix, icon: icon, grow: "1" }, children),
         hasSuffix && renderAddon('suffix')));
 }
 exports.WithAddons = WithAddons;

package/lib/cjs/components/with_addons.js.map

@@ -1 +1 @@
-{"version":3,"file":"with_addons.js","sourceRoot":"","sources":["../../../src/components/with_addons.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAQ1B,wCAA2C;AAE3C,6CAA2C;AAC3C,6CAA2C;AAC3C,uDAAoD;AAapD,SAAgB,UAAU,CAAC,EAQT;QAPhB,cAAc,oBAAA,EACd,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,MAAM,YAAA;IAEN,IAAM,SAAS,GAAG,IAAA,iBAAS,EAAC,MAAM,CAAC,CAAC;IACpC,IAAM,SAAS,GAAG,IAAA,iBAAS,EAAC,MAAM,CAAC,CAAC;IAEpC,SAAS,WAAW,CAAC,IAAyB;QAC5C,IAAM,YAAY,GAAG,EAAE,MAAM,QAAA,EAAE,MAAM,QAAA,EAAE,CAAC;QACxC,IAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;QAEvC,OAAO,CACL,8BAAC,iCAAc;YACb,8BAAC,wBAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,IACvC,WAAW,CACD,CACE,CAClB,CAAC;IACJ,CAAC;IAED,OAAO,CACL,8BAAC,wBAAU,IAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc;QACvD,SAAS,IAAI,WAAW,CAAC,QAAQ,CAAC;QACnC,8BAAC,iCAAc,IAAC,IAAI,EAAC,GAAG,IAAE,QAAQ,CAAkB;QACnD,SAAS,IAAI,WAAW,CAAC,QAAQ,CAAC,CACxB,CACd,CAAC;AACJ,CAAC;AAhCD,gCAgCC"}
+{"version":3,"file":"with_addons.js","sourceRoot":"","sources":["../../../src/components/with_addons.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAQ1B,wCAA2C;AAE3C,6CAA2C;AAC3C,6CAA2C;AAC3C,uDAAoD;AAcpD,SAAgB,UAAU,CAAC,EAST;QARhB,cAAc,oBAAA,EACd,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,MAAM,YAAA,EACN,MAAM,YAAA;IAEN,IAAM,SAAS,GAAG,IAAA,iBAAS,EAAC,MAAM,CAAC,CAAC;IACpC,IAAM,SAAS,GAAG,IAAA,iBAAS,EAAC,MAAM,CAAC,CAAC;IAEpC,SAAS,WAAW,CAAC,IAAyB;QAC5C,IAAM,YAAY,GAAG,EAAE,MAAM,QAAA,EAAE,MAAM,QAAA,EAAE,CAAC;QACxC,IAAM,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;QAEvC,OAAO,CACL,8BAAC,iCAAc;YACb,8BAAC,wBAAU,IAAC,QAAQ,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,IACvC,WAAW,CACD,CACE,CAClB,CAAC;IACJ,CAAC;IAED,OAAO,CACL,8BAAC,wBAAU,IAAC,MAAM,EAAE,MAAM,EAAE,cAAc,EAAE,cAAc;QACvD,SAAS,IAAI,WAAW,CAAC,QAAQ,CAAC;QACnC,8BAAC,iCAAc,IACb,UAAU,EAAE,CAAC,SAAS,IAAI,CAAC,SAAS,EACpC,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,GAAG,IAEP,QAAQ,CACM;QAChB,SAAS,IAAI,WAAW,CAAC,QAAQ,CAAC,CACxB,CACd,CAAC;AACJ,CAAC;AAvCD,gCAuCC"}

package/lib/cjs/types.d.ts

@@ -16,6 +16,18 @@ export type MarginModifierProp = {
         left?: Margin;
     };
 };
+export type Padding = Spacing | 'auto';
+export type PaddingModifierProp = {
+    padding?: Padding | {
+        all?: Padding;
+        horizontal?: Padding;
+        vertical?: Padding;
+        top?: Padding;
+        right?: Padding;
+        bottom?: Padding;
+        left?: Padding;
+    };
+};
 export interface ModifierClassProp {
     _modifierClass?: string;
 }

package/lib/cjs/utils/dom.d.ts

@@ -6,7 +6,7 @@ type StyleProperty = keyof RemoveIndexSignature<Omit<CSSStyleDeclaration, 'paren
 export declare function formatPx(value: number): string;
 export declare function getClientRect(element: Element): DOMRect;
 export declare function getElementPropertyValue(element: Element, property: StyleProperty): string | number;
-export declare function getElementPropertyValues(element: Element, ...properties: StyleProperty[]): Record<"marker" | "margin" | "padding" | "all" | "top" | "right" | "bottom" | "left" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignmentBaseline" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "clip" | "clipPath" | "clipRule" | "color" | "colorInterpolation" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "columns" | "contain" | "container" | "containerName" | "containerType" | "content" | "counterIncrement" | "counterReset" | "counterSet" | "cssFloat" | "cssText" | "cursor" | "direction" | "display" | "dominantBaseline" | "emptyCells" | "fill" | "fillOpacity" | "fillRule" | "filter" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "font" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "gap" | "grid" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "markerEnd" | "markerMid" | "markerStart" | "mask" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offset" | "offsetDistance" | "offsetPath" | "offsetRotate" | "opacity" | "order" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowClipMargin" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollbarGutter" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textCombineUpright" | "textDecoration" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transition" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "webkitAlignContent" | "webkitAlignItems" | "webkitAlignSelf" | "webkitAnimation" | "webkitAnimationDelay" | "webkitAnimationDirection" | "webkitAnimationDuration" | "webkitAnimationFillMode" | "webkitAnimationIterationCount" | "webkitAnimationName" | "webkitAnimationPlayState" | "webkitAnimationTimingFunction" | "webkitAppearance" | "webkitBackfaceVisibility" | "webkitBackgroundClip" | "webkitBackgroundOrigin" | "webkitBackgroundSize" | "webkitBorderBottomLeftRadius" | "webkitBorderBottomRightRadius" | "webkitBorderRadius" | "webkitBorderTopLeftRadius" | "webkitBorderTopRightRadius" | "webkitBoxAlign" | "webkitBoxFlex" | "webkitBoxOrdinalGroup" | "webkitBoxOrient" | "webkitBoxPack" | "webkitBoxShadow" | "webkitBoxSizing" | "webkitFilter" | "webkitFlex" | "webkitFlexBasis" | "webkitFlexDirection" | "webkitFlexFlow" | "webkitFlexGrow" | "webkitFlexShrink" | "webkitFlexWrap" | "webkitJustifyContent" | "webkitLineClamp" | "webkitMask" | "webkitMaskBoxImage" | "webkitMaskBoxImageOutset" | "webkitMaskBoxImageRepeat" | "webkitMaskBoxImageSlice" | "webkitMaskBoxImageSource" | "webkitMaskBoxImageWidth" | "webkitMaskClip" | "webkitMaskComposite" | "webkitMaskImage" | "webkitMaskOrigin" | "webkitMaskPosition" | "webkitMaskRepeat" | "webkitMaskSize" | "webkitOrder" | "webkitPerspective" | "webkitPerspectiveOrigin" | "webkitTextFillColor" | "webkitTextSizeAdjust" | "webkitTextStroke" | "webkitTextStrokeColor" | "webkitTextStrokeWidth" | "webkitTransform" | "webkitTransformOrigin" | "webkitTransformStyle" | "webkitTransition" | "webkitTransitionDelay" | "webkitTransitionDuration" | "webkitTransitionProperty" | "webkitTransitionTimingFunction" | "webkitUserSelect" | "whiteSpace" | "widows" | "width" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex", string | number>;
+export declare function getElementPropertyValues(element: Element, ...properties: StyleProperty[]): Record<"marker" | "margin" | "padding" | "all" | "top" | "right" | "bottom" | "left" | "color" | "display" | "width" | "accentColor" | "alignContent" | "alignItems" | "alignSelf" | "alignmentBaseline" | "animation" | "animationDelay" | "animationDirection" | "animationDuration" | "animationFillMode" | "animationIterationCount" | "animationName" | "animationPlayState" | "animationTimingFunction" | "appearance" | "aspectRatio" | "backdropFilter" | "backfaceVisibility" | "background" | "backgroundAttachment" | "backgroundBlendMode" | "backgroundClip" | "backgroundColor" | "backgroundImage" | "backgroundOrigin" | "backgroundPosition" | "backgroundPositionX" | "backgroundPositionY" | "backgroundRepeat" | "backgroundSize" | "baselineShift" | "blockSize" | "border" | "borderBlock" | "borderBlockColor" | "borderBlockEnd" | "borderBlockEndColor" | "borderBlockEndStyle" | "borderBlockEndWidth" | "borderBlockStart" | "borderBlockStartColor" | "borderBlockStartStyle" | "borderBlockStartWidth" | "borderBlockStyle" | "borderBlockWidth" | "borderBottom" | "borderBottomColor" | "borderBottomLeftRadius" | "borderBottomRightRadius" | "borderBottomStyle" | "borderBottomWidth" | "borderCollapse" | "borderColor" | "borderEndEndRadius" | "borderEndStartRadius" | "borderImage" | "borderImageOutset" | "borderImageRepeat" | "borderImageSlice" | "borderImageSource" | "borderImageWidth" | "borderInline" | "borderInlineColor" | "borderInlineEnd" | "borderInlineEndColor" | "borderInlineEndStyle" | "borderInlineEndWidth" | "borderInlineStart" | "borderInlineStartColor" | "borderInlineStartStyle" | "borderInlineStartWidth" | "borderInlineStyle" | "borderInlineWidth" | "borderLeft" | "borderLeftColor" | "borderLeftStyle" | "borderLeftWidth" | "borderRadius" | "borderRight" | "borderRightColor" | "borderRightStyle" | "borderRightWidth" | "borderSpacing" | "borderStartEndRadius" | "borderStartStartRadius" | "borderStyle" | "borderTop" | "borderTopColor" | "borderTopLeftRadius" | "borderTopRightRadius" | "borderTopStyle" | "borderTopWidth" | "borderWidth" | "boxShadow" | "boxSizing" | "breakAfter" | "breakBefore" | "breakInside" | "captionSide" | "caretColor" | "clear" | "clip" | "clipPath" | "clipRule" | "colorInterpolation" | "colorInterpolationFilters" | "colorScheme" | "columnCount" | "columnFill" | "columnGap" | "columnRule" | "columnRuleColor" | "columnRuleStyle" | "columnRuleWidth" | "columnSpan" | "columnWidth" | "columns" | "contain" | "container" | "containerName" | "containerType" | "content" | "counterIncrement" | "counterReset" | "counterSet" | "cssFloat" | "cssText" | "cursor" | "direction" | "dominantBaseline" | "emptyCells" | "fill" | "fillOpacity" | "fillRule" | "filter" | "flex" | "flexBasis" | "flexDirection" | "flexFlow" | "flexGrow" | "flexShrink" | "flexWrap" | "float" | "floodColor" | "floodOpacity" | "font" | "fontFamily" | "fontFeatureSettings" | "fontKerning" | "fontOpticalSizing" | "fontPalette" | "fontSize" | "fontSizeAdjust" | "fontStretch" | "fontStyle" | "fontSynthesis" | "fontVariant" | "fontVariantAlternates" | "fontVariantCaps" | "fontVariantEastAsian" | "fontVariantLigatures" | "fontVariantNumeric" | "fontVariantPosition" | "fontVariationSettings" | "fontWeight" | "gap" | "grid" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridColumnEnd" | "gridColumnGap" | "gridColumnStart" | "gridGap" | "gridRow" | "gridRowEnd" | "gridRowGap" | "gridRowStart" | "gridTemplate" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "hyphenateCharacter" | "hyphens" | "imageOrientation" | "imageRendering" | "inlineSize" | "inset" | "insetBlock" | "insetBlockEnd" | "insetBlockStart" | "insetInline" | "insetInlineEnd" | "insetInlineStart" | "isolation" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lightingColor" | "lineBreak" | "lineHeight" | "listStyle" | "listStyleImage" | "listStylePosition" | "listStyleType" | "marginBlock" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInline" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "markerEnd" | "markerMid" | "markerStart" | "mask" | "maskClip" | "maskComposite" | "maskImage" | "maskMode" | "maskOrigin" | "maskPosition" | "maskRepeat" | "maskSize" | "maskType" | "maxBlockSize" | "maxHeight" | "maxInlineSize" | "maxWidth" | "minBlockSize" | "minHeight" | "minInlineSize" | "minWidth" | "mixBlendMode" | "objectFit" | "objectPosition" | "offset" | "offsetDistance" | "offsetPath" | "offsetRotate" | "opacity" | "order" | "orphans" | "outline" | "outlineColor" | "outlineOffset" | "outlineStyle" | "outlineWidth" | "overflow" | "overflowAnchor" | "overflowClipMargin" | "overflowWrap" | "overflowX" | "overflowY" | "overscrollBehavior" | "overscrollBehaviorBlock" | "overscrollBehaviorInline" | "overscrollBehaviorX" | "overscrollBehaviorY" | "paddingBlock" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInline" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "pageBreakAfter" | "pageBreakBefore" | "pageBreakInside" | "paintOrder" | "perspective" | "perspectiveOrigin" | "placeContent" | "placeItems" | "placeSelf" | "pointerEvents" | "position" | "printColorAdjust" | "quotes" | "resize" | "rotate" | "rowGap" | "rubyPosition" | "scale" | "scrollBehavior" | "scrollMargin" | "scrollMarginBlock" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginBottom" | "scrollMarginInline" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingBlockEnd" | "scrollPaddingBlockStart" | "scrollPaddingBottom" | "scrollPaddingInline" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollSnapAlign" | "scrollSnapStop" | "scrollSnapType" | "scrollbarGutter" | "shapeImageThreshold" | "shapeMargin" | "shapeOutside" | "shapeRendering" | "stopColor" | "stopOpacity" | "stroke" | "strokeDasharray" | "strokeDashoffset" | "strokeLinecap" | "strokeLinejoin" | "strokeMiterlimit" | "strokeOpacity" | "strokeWidth" | "tabSize" | "tableLayout" | "textAlign" | "textAlignLast" | "textAnchor" | "textCombineUpright" | "textDecoration" | "textDecorationColor" | "textDecorationLine" | "textDecorationSkipInk" | "textDecorationStyle" | "textDecorationThickness" | "textEmphasis" | "textEmphasisColor" | "textEmphasisPosition" | "textEmphasisStyle" | "textIndent" | "textOrientation" | "textOverflow" | "textRendering" | "textShadow" | "textTransform" | "textUnderlineOffset" | "textUnderlinePosition" | "touchAction" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "transition" | "transitionDelay" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "translate" | "unicodeBidi" | "userSelect" | "verticalAlign" | "visibility" | "webkitAlignContent" | "webkitAlignItems" | "webkitAlignSelf" | "webkitAnimation" | "webkitAnimationDelay" | "webkitAnimationDirection" | "webkitAnimationDuration" | "webkitAnimationFillMode" | "webkitAnimationIterationCount" | "webkitAnimationName" | "webkitAnimationPlayState" | "webkitAnimationTimingFunction" | "webkitAppearance" | "webkitBackfaceVisibility" | "webkitBackgroundClip" | "webkitBackgroundOrigin" | "webkitBackgroundSize" | "webkitBorderBottomLeftRadius" | "webkitBorderBottomRightRadius" | "webkitBorderRadius" | "webkitBorderTopLeftRadius" | "webkitBorderTopRightRadius" | "webkitBoxAlign" | "webkitBoxFlex" | "webkitBoxOrdinalGroup" | "webkitBoxOrient" | "webkitBoxPack" | "webkitBoxShadow" | "webkitBoxSizing" | "webkitFilter" | "webkitFlex" | "webkitFlexBasis" | "webkitFlexDirection" | "webkitFlexFlow" | "webkitFlexGrow" | "webkitFlexShrink" | "webkitFlexWrap" | "webkitJustifyContent" | "webkitLineClamp" | "webkitMask" | "webkitMaskBoxImage" | "webkitMaskBoxImageOutset" | "webkitMaskBoxImageRepeat" | "webkitMaskBoxImageSlice" | "webkitMaskBoxImageSource" | "webkitMaskBoxImageWidth" | "webkitMaskClip" | "webkitMaskComposite" | "webkitMaskImage" | "webkitMaskOrigin" | "webkitMaskPosition" | "webkitMaskRepeat" | "webkitMaskSize" | "webkitOrder" | "webkitPerspective" | "webkitPerspectiveOrigin" | "webkitTextFillColor" | "webkitTextSizeAdjust" | "webkitTextStroke" | "webkitTextStrokeColor" | "webkitTextStrokeWidth" | "webkitTransform" | "webkitTransformOrigin" | "webkitTransformStyle" | "webkitTransition" | "webkitTransitionDelay" | "webkitTransitionDuration" | "webkitTransitionProperty" | "webkitTransitionTimingFunction" | "webkitUserSelect" | "whiteSpace" | "widows" | "willChange" | "wordBreak" | "wordSpacing" | "wordWrap" | "writingMode" | "zIndex", string | number>;
 export declare function getActiveElement(): Element;
 export declare function getTabbableElements(rootElement: Element): Element[];
 export declare function calculateVerticalMargin(element: Element): number;

package/lib/esm/components/button_plain.d.ts

@@ -1,17 +1,23 @@
 import React from 'react';
-import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
+import type { Colors, CommonComponentProps, Dimensions, MarginModifierProp, ModifierClassProp, PaddingModifierProp } from '../types';
 import type { GetRef } from '../utils/refs';
-interface ButtonPlainProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
+interface ButtonPlainProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp, PaddingModifierProp {
     'aria-controls'?: string;
     'aria-expanded'?: React.AriaAttributes['aria-expanded'];
     children?: React.ReactNode;
+    color?: Colors;
     disabled?: boolean;
+    display?: 'block' | 'inline-block';
     getRef?: GetRef<HTMLButtonElement>;
+    hoverColor?: Colors;
     id?: string;
     name?: string;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     title?: string;
+    truncate?: boolean;
     type?: 'button' | 'submit';
+    underlined?: boolean;
+    width?: Dimensions;
 }
-export declare function ButtonPlain({ _modifierClass, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, disabled, getRef, id, margin, name, onClick, title, type, ...rest }: ButtonPlainProps): React.JSX.Element;
+export declare function ButtonPlain({ _modifierClass, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, color, disabled, display, getRef, hoverColor, id, margin, name, onClick, padding, title, truncate, type, underlined, width, ...rest }: ButtonPlainProps): React.JSX.Element;
 export {};

package/lib/esm/components/button_plain.js

@@ -20,13 +20,34 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import classNames from '../utils/class_names';
 import getDataAttributes from '../utils/data_attributes';
-import { getMarginClass } from '../utils/modifier_classes';
+import { getDimensionClass, getSpacingClass } from '../utils/modifier_classes';
 export function ButtonPlain(_a) {
-    var _modifierClass = _a._modifierClass, ariaControls = _a["aria-controls"], ariaExpanded = _a["aria-expanded"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, margin = _a.margin, name = _a.name, onClick = _a.onClick, title = _a.title, _b = _a.type, type = _b === void 0 ? 'button' : _b, rest = __rest(_a, ["_modifierClass", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "disabled", "getRef", "id", "margin", "name", "onClick", "title", "type"]);
-    return (React.createElement("button", __assign({}, getDataAttributes(rest), { "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: classNames('Button--plain', getMarginClass(margin), _modifierClass), disabled: disabled, id: id, ref: getRef, name: name, onClick: onClick, title: title, 
+    var _modifierClass = _a._modifierClass, ariaControls = _a["aria-controls"], ariaExpanded = _a["aria-expanded"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, color = _a.color, disabled = _a.disabled, _b = _a.display, display = _b === void 0 ? 'inline-block' : _b, getRef = _a.getRef, hoverColor = _a.hoverColor, id = _a.id, margin = _a.margin, name = _a.name, onClick = _a.onClick, padding = _a.padding, title = _a.title, _c = _a.truncate, truncate = _c === void 0 ? false : _c, _d = _a.type, type = _d === void 0 ? 'button' : _d, underlined = _a.underlined, width = _a.width, rest = __rest(_a, ["_modifierClass", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "color", "disabled", "display", "getRef", "hoverColor", "id", "margin", "name", "onClick", "padding", "title", "truncate", "type", "underlined", "width"]);
+    var _e = useState(false), hovered = _e[0], setHovered = _e[1];
+    var colorClass = useMemo(function () {
+        var colorEnum = color;
+        if (hovered && hoverColor && !disabled) {
+            colorEnum = hoverColor;
+        }
+        return colorEnum && "color--".concat(colorEnum);
+    }, [hovered, color, hoverColor]);
+    var classes = classNames('Button--plain', _modifierClass, colorClass, getDimensionClass('width', width), getSpacingClass('margin', margin), getSpacingClass('padding', padding), {
+        'text-decoration--underline': underlined,
+        'display--b': display === 'block',
+        truncate: truncate
+    });
+    return (React.createElement("button", __assign({}, getDataAttributes(rest), { "aria-controls": ariaControls, "aria-describedby": ariaDescribedby, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className: classes, disabled: disabled, id: id, name: name, onBlur: function () {
+            setHovered(false);
+        }, onClick: onClick, onFocus: function () {
+            setHovered(true);
+        }, onMouseEnter: function () {
+            setHovered(true);
+        }, onMouseLeave: function () {
+            setHovered(false);
+        }, ref: getRef, title: title, 
         // eslint-disable-next-line react/button-has-type
         type: type }), children));
 }

package/lib/esm/components/button_plain.js.map

@@ -1 +1 @@
-{"version":3,"file":"button_plain.js","sourceRoot":"","sources":["../../../src/components/button_plain.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAkB3D,MAAM,UAAU,WAAW,CAAC,EAiBT;IAhBjB,IAAA,cAAc,oBAAA,EACG,YAAY,sBAAA,EACZ,YAAY,sBAAA,EACf,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,KAAK,WAAA,EACL,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACZ,IAAI,cAhBmB,+LAiB3B,CADQ;IAEP,OAAO,CACL,2CACM,iBAAiB,CAAC,IAAI,CAAC,qBACZ,YAAY,mBACZ,YAAY,gBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,UAAU,CACnB,eAAe,EACf,cAAc,CAAC,MAAM,CAAC,EACtB,cAAc,CACf,EACD,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK;QACZ,iDAAiD;QACjD,IAAI,EAAE,IAAI,KAET,QAAQ,CACF,CACV,CAAC;AACJ,CAAC"}
+{"version":3,"file":"button_plain.js","sourceRoot":"","sources":["../../../src/components/button_plain.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAYjD,OAAO,UAAU,MAAM,sBAAsB,CAAC;AAC9C,OAAO,iBAAiB,MAAM,0BAA0B,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAyB/E,MAAM,UAAU,WAAW,CAAC,EAwBT;IAvBjB,IAAA,cAAc,oBAAA,EACG,YAAY,sBAAA,EACZ,YAAY,sBAAA,EACf,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,eAAwB,EAAxB,OAAO,mBAAG,cAAc,KAAA,EACxB,MAAM,YAAA,EACN,UAAU,gBAAA,EACV,EAAE,QAAA,EACF,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,OAAO,aAAA,EACP,KAAK,WAAA,EACL,gBAAgB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAChB,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACf,UAAU,gBAAA,EACV,KAAK,WAAA,EACF,IAAI,cAvBmB,+QAwB3B,CADQ;IAED,IAAA,KAAwB,QAAQ,CAAC,KAAK,CAAC,EAAtC,OAAO,QAAA,EAAE,UAAU,QAAmB,CAAC;IAE9C,IAAM,UAAU,GAAG,OAAO,CAAC;QACzB,IAAI,SAAS,GAAG,KAAK,CAAC;QAEtB,IAAI,OAAO,IAAI,UAAU,IAAI,CAAC,QAAQ,EAAE;YACtC,SAAS,GAAG,UAAU,CAAC;SACxB;QAED,OAAO,SAAS,IAAI,iBAAU,SAAS,CAAE,CAAC;IAC5C,CAAC,EAAE,CAAC,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC;IAEjC,IAAM,OAAO,GAAG,UAAU,CACxB,eAAe,EACf,cAAc,EACd,UAAU,EACV,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,EACjC,eAAe,CAAC,QAAQ,EAAE,MAAM,CAAC,EACjC,eAAe,CAAC,SAAS,EAAE,OAAO,CAAC,EACnC;QACE,4BAA4B,EAAE,UAAU;QACxC,YAAY,EAAE,OAAO,KAAK,OAAO;QACjC,QAAQ,UAAA;KACT,CACF,CAAC;IAEF,OAAO,CACL,2CACM,iBAAiB,CAAC,IAAI,CAAC,qBACZ,YAAY,sBACT,eAAe,mBAClB,YAAY,gBACf,SAAS,qBACJ,cAAc,EAC/B,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,MAAM,EAAE;YACN,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EACD,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE;YACP,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,EACD,YAAY,EAAE;YACZ,UAAU,CAAC,IAAI,CAAC,CAAC;QACnB,CAAC,EACD,YAAY,EAAE;YACZ,UAAU,CAAC,KAAK,CAAC,CAAC;QACpB,CAAC,EACD,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,KAAK;QACZ,iDAAiD;QACjD,IAAI,EAAE,IAAI,KAET,QAAQ,CACF,CACV,CAAC;AACJ,CAAC"}

package/lib/esm/components/common_input.d.ts

@@ -9,6 +9,7 @@ interface CommonInputProps extends CommonComponentProps, MarginModifierProp, Mod
     defaultValue?: number | string;
     disabled?: boolean;
     getRef?: GetRef<HTMLInputElement>;
+    icon?: React.JSX.Element;
     id?: string;
     invalid?: boolean;
     max?: number | string;
@@ -31,5 +32,5 @@ interface CommonInputProps extends CommonComponentProps, MarginModifierProp, Mod
     type?: string;
     value?: number | string;
 }
-export declare function CommonInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-required': ariaRequired, autoComplete, autoFocus, defaultValue, disabled, getRef, id, invalid, margin, max, maxLength, min, mini, name, onBlur, onChange, onFocus, onKeyDown, onPaste, placeholder, prefix, readOnly, required, suffix, step, tabIndex, type, value, ...rest }: CommonInputProps): React.JSX.Element;
+export declare function CommonInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-required': ariaRequired, autoComplete, autoFocus, defaultValue, disabled, getRef, icon, id, invalid, margin, max, maxLength, min, mini, name, onBlur, onChange, onFocus, onKeyDown, onPaste, placeholder, prefix, readOnly, required, suffix, step, tabIndex, type, value, ...rest }: CommonInputProps): React.JSX.Element;
 export {};

package/lib/esm/components/common_input.js

@@ -28,19 +28,20 @@ import { getMarginClass } from '../utils/modifier_classes';
 import { WithAddons } from './with_addons';
 export function CommonInput(_a) {
     var _b;
-    var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaRequired = _a["aria-required"], autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, defaultValue = _a.defaultValue, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, invalid = _a.invalid, margin = _a.margin, max = _a.max, maxLength = _a.maxLength, min = _a.min, mini = _a.mini, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onPaste = _a.onPaste, placeholder = _a.placeholder, prefix = _a.prefix, readOnly = _a.readOnly, required = _a.required, suffix = _a.suffix, step = _a.step, tabIndex = _a.tabIndex, type = _a.type, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', 'aria-required', "autoComplete", "autoFocus", "defaultValue", "disabled", "getRef", "id", "invalid", "margin", "max", "maxLength", "min", "mini", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onPaste", "placeholder", "prefix", "readOnly", "required", "suffix", "step", "tabIndex", "type", "value"]);
-    var affixed = !!prefix || !!suffix;
+    var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaRequired = _a["aria-required"], autoComplete = _a.autoComplete, autoFocus = _a.autoFocus, defaultValue = _a.defaultValue, disabled = _a.disabled, getRef = _a.getRef, icon = _a.icon, id = _a.id, invalid = _a.invalid, margin = _a.margin, max = _a.max, maxLength = _a.maxLength, min = _a.min, mini = _a.mini, name = _a.name, onBlur = _a.onBlur, onChange = _a.onChange, onFocus = _a.onFocus, onKeyDown = _a.onKeyDown, onPaste = _a.onPaste, placeholder = _a.placeholder, prefix = _a.prefix, readOnly = _a.readOnly, required = _a.required, suffix = _a.suffix, step = _a.step, tabIndex = _a.tabIndex, type = _a.type, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', 'aria-required', "autoComplete", "autoFocus", "defaultValue", "disabled", "getRef", "icon", "id", "invalid", "margin", "max", "maxLength", "min", "mini", "name", "onBlur", "onChange", "onFocus", "onKeyDown", "onPaste", "placeholder", "prefix", "readOnly", "required", "suffix", "step", "tabIndex", "type", "value"]);
+    var affixed = !!prefix || !!suffix || !!icon;
     var inputClass = classNames('Input', (_b = {},
         _b[getMarginClass(margin)] = !affixed,
         _b[_modifierClass] = _modifierClass && !affixed,
         _b['Input--invalid'] = invalid,
         _b['Input--mini'] = mini,
+        _b['Input--with-icon'] = !!icon,
         _b));
     var input = (React.createElement("input", __assign({}, getDataAttributes(rest), { "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": ariaRequired, autoComplete: autoComplete, 
         // eslint-disable-next-line jsx-a11y/no-autofocus
         autoFocus: autoFocus, className: inputClass, defaultValue: defaultValue, disabled: disabled, id: id, max: max, maxLength: maxLength, min: min, name: name, onBlur: onBlur, onChange: onChange, onFocus: onFocus, onKeyDown: onKeyDown, onPaste: onPaste, placeholder: placeholder, readOnly: readOnly, required: required, ref: getRef, step: step, tabIndex: tabIndex, type: type, value: inputValue(value, onChange) })));
     if (affixed) {
-        return (React.createElement(WithAddons, { _modifierClass: _modifierClass, disabled: disabled, margin: margin, mini: mini, prefix: prefix, suffix: suffix }, input));
+        return (React.createElement(WithAddons, { _modifierClass: _modifierClass, disabled: disabled, icon: icon, margin: margin, mini: mini, prefix: prefix, suffix: suffix }, input));
     }
     return input;
 }