srf-feathers 1.7.7 → 1.7.8

package/build/elements/Button/Button.d.ts

@@ -3,7 +3,7 @@ import { ButtonProps } from './Button.types';
 import { TooltipProps } from '../Tooltip/Tooltip.types';
 import './Button.scss';
 import './../Tooltip/Tooltip.scss';
-export declare const ButtonModifiers: readonly ["primary", "save", "publish", "retire", "danger", "favorite", "white", "unobtrusive", "fullwidth", "fullheight", "margin_top", "margin_bottom", "left_align", "icon_rotated", "invisible_content", "no_outline", "extra_big", "big", "small", "extra_tiny", "tiny", "hidden", "icon_right", "icon_sticks_to_border", "spread_content", "bold", "selected", "uppercase", "link", "circle"];
+export declare const ButtonModifiers: readonly ["primary", "save", "publish", "retire", "danger", "favorite", "white", "unobtrusive", "fullwidth", "fullheight", "margin_top", "margin_bottom", "left_align", "icon_rotated", "invisible_content", "no_outline", "extra_big", "big", "small", "extra_tiny", "tiny", "hidden", "icon_right", "icon_sticks_to_border", "spread_content", "bold", "selected", "uppercase", "link", "circle", "pill"];
 export type ButtonModifiersType = (typeof ButtonModifiers)[number];
 declare const Button: React.FC<ButtonProps>;
 export declare const ButtonTooltip: React.FC<TooltipProps>;

package/build/index.esm.js

@@ -3629,7 +3629,7 @@ var Tooltip = function (_a) {
             React__default.createElement("div", { dangerouslySetInnerHTML: { __html: content } }))));
 };
 
-var css_248z$8 = ":root{--f-button-default-background:rgb(235,235,229);--f-button-default-color:rgb(78,77,71);--f-button-hover-background:rgb(218,218,210);--f-button-focus-background:rgb(202,200,191);--f-button-primary-default-background:rgb(78,77,71);--f-button-primary-default-color:rgb(255,255,255);--f-button-primary-hover-background:rgb(107,105,96);--f-button-primary-focus-background:rgb(136,133,121);--f-button-danger-default-background:rgb(241,67,74);--f-button-danger-default-color:rgb(255,255,255);--f-button-danger-hover-background:rgb(227,31,43);--f-button-danger-focus-background:rgb(201,16,36);--f-button-favorite-default-color:rgb(255,255,255);--f-button-favorite-default-background:rgb(173,52,146);--f-button-favorite-hover-background:rgb(147,44,123);--f-button-favorite-focus-background:rgb(121,36,101);--f-button-save-default-background:rgb(28,179,115);--f-button-save-default-color:rgb(255,255,255);--f-button-retire-default-background:rgb(242,139,2);--f-button-retire-default-color:rgb(255,255,255);--f-button-retire-hover-background:rgb(237,112,4);--f-button-retire-focus-background:rgb(205,87,12);--f-button-save-hover-background:rgb(25,160,103);--f-button-save-focus-background:rgb(22,140,90);--f-button-publish-default-background:rgb(26,122,197);--f-button-publish-default-color:rgb(255,255,255);--f-button-publish-hover-background:rgb(22,103,167);--f-button-publish-focus-background:rgb(16,80,130);--f-button-white-default-background:rgb(250,250,248);--f-button-white-default-color:rgb(78,77,71);--f-button-white-hover-background:rgb(218,218,210);--f-button-white-focus-background:rgb(202,200,191);--f-button-link-default-color:rgb(241,67,74);--f-button-link-default-background:transparent;--f-button-link-hover-color:rgb(201,16,36);--f-button-link-hover-background:transparent;--f-button-link-focus-background:transparent}.f-button{--f-button-height:40px;--f-button-gutter:16px;--f-button-icon-size:24px;--f-button-icon-text-gap:8px;--f-button-text-color:var(--f-button-default-color);position:relative;display:flex;align-items:center;justify-content:center;min-width:calc(var(--f-button-gutter) + var(--f-button-icon-size) + var(--f-button-gutter));height:var(--f-button-height);max-width:100%;padding:0 var(--f-button-gutter);margin:0;letter-spacing:0.4px;background:var(--f-button-default-background);box-shadow:0 1px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.08);border:none;border-radius:2px;transition:background-color 0.3s ease-in-out,width 0.3s ease,box-shadow 0.3s ease-in-out,filter 0.3s ease-in-out;-webkit-appearance:none}.f-button svg{transition:transform 0.3s ease}.f-button svg *{stroke:currentColor}.f-button,.f-button:hover,.f-button:active{color:var(--f-button-text-color)}.f-button:focus-visible{color:var(--f-button-text-color)}.f-button:not(:disabled):hover{cursor:pointer;background:var(--f-button-hover-background);color:var(--f-button-hover-text-color,var(--f-button-text-color))}.f-button:not(:disabled):focus-visible{background:var(--f-button-focus-background);outline:none}.f-button:disabled{cursor:not-allowed;opacity:0.66}.f-button__icon-wrapper{display:flex;padding:0 var(--f-button-icon-text-gap) 0 0;pointer-events:none}.f-button__text{font-weight:400;font-variation-settings:\"wght\" 400;--f-button-text-font-size:16px;font-size:var(--f-button-text-font-size);line-height:20px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.f-button--circle{border-radius:50%}.f-button--link{--f-button-text-color:var(--f-button-link-default-color);--f-button-hover-text-color:var(--f-button-link-hover-color);--f-button-default-background:var(--f-button-link-default-background);--f-button-hover-background:var(--f-button-link-hover-background);--f-button-focus-background:var(--f-button-link-focus-background);box-shadow:none}.f-button--primary{--f-button-text-color:var(--f-button-primary-default-color);--f-button-default-background:var(--f-button-primary-default-background);--f-button-hover-background:var(--f-button-primary-hover-background);--f-button-focus-background:var(--f-button-primary-focus-background)}.f-button--danger{--f-button-text-color:var(--f-button-danger-default-color);--f-button-default-background:var(--f-button-danger-default-background);--f-button-hover-background:var(--f-button-danger-hover-background);--f-button-focus-background:var(--f-button-danger-focus-background)}.f-button--favorite{--f-button-text-color:var(--f-button-favorite-default-color);--f-button-default-background:var(--f-button-favorite-default-background);--f-button-hover-background:var(--f-button-favorite-hover-background);--f-button-focus-background:var(--f-button-favorite-focus-background)}.f-button--save{--f-button-text-color:var(--f-button-save-default-color);--f-button-default-background:var(--f-button-save-default-background);--f-button-hover-background:var(--f-button-save-hover-background);--f-button-focus-background:var(--f-button-save-focus-background)}.f-button--publish{--f-button-text-color:var(--f-button-publish-default-color);--f-button-default-background:var(--f-button-publish-default-background);--f-button-hover-background:var(--f-button-publish-hover-background);--f-button-focus-background:var(--f-button-publish-focus-background)}.f-button--retire{--f-button-text-color:var(--f-button-retire-default-color);--f-button-default-background:var(--f-button-retire-default-background);--f-button-hover-background:var(--f-button-retire-hover-background);--f-button-focus-background:var(--f-button-retire-focus-background)}.f-button--white{--f-button-text-color:var(--f-button-white-default-color);--f-button-default-background:var(--f-button-white-default-background);--f-button-hover-background:var(--f-button-white-hover-background);--f-button-focus-background:var(--f-button-white-focus-background)}.f-button--unobtrusive.f-button--unobtrusive{--f-button-text-color:var(--icon-button-changing-icon-color,$color-srf-warmgrey-1100);box-shadow:none}.f-button--unobtrusive.f-button--unobtrusive,.f-button--unobtrusive.f-button--unobtrusive:hover,.f-button--unobtrusive.f-button--unobtrusive:active{background:transparent}.f-button--unobtrusive.f-button--unobtrusive:focus-visible{background:transparent}.f-button--icon-only{--f-button-gutter:8px}.f-button--icon-only .f-button__icon-wrapper{padding:0}.f-button--extra-big{--f-button-height:56px;--f-button-gutter:14px;--f-button-icon-size:28px}.f-button--extra-big .f-button__text{--f-button-text-font-size:18px}.f-button--big{--f-button-height:48px;--f-button-gutter:12px;--f-button-icon-size:24px}.f-button--big .f-button__text{--f-button-text-font-size:16px}.f-button--small{--f-button-height:32px;--f-button-gutter:12px;--f-button-icon-size:16px}.f-button--small.f-button--icon-only{--f-button-gutter:8px}.f-button--small .f-button__text{font-weight:400;font-variation-settings:\"wght\" 400;--f-button-text-font-size:14px;line-height:16px}.f-button--tiny{--f-button-height:24px;--f-button-gutter:4px;--f-button-icon-size:16px;--f-button-icon-text-gap:4px}.f-button--tiny .f-button__text{font-weight:400;font-variation-settings:\"wght\" 400;--f-button-text-font-size:12px;line-height:16px}.f-button--extra-tiny{--f-button-height:18px;--f-button-gutter:4px;--f-button-icon-size:10px}.f-button--extra-tiny .f-button__text{--f-button-text-font-size:12px}.f-button--no-outline{box-shadow:none;border-radius:0}.f-button--icon-rotated svg{transform:rotate(180deg)}.f-button--margin-top{margin-top:24px}.f-button--margin-bottom{margin-bottom:24px}.f-button--left-align{justify-content:left}.f-button--invisible-content .f-button__text,.f-button--invisible-content .f-button__icon-wrapper,.f-button--invisible-content::before{visibility:hidden;opacity:0}.f-button--hidden{display:none}.f-button--icon-on-the-right{flex-direction:row-reverse}.f-button--icon-on-the-right .f-button__icon-wrapper{padding:0 0 0 var(--f-button-icon-text-gap)}.f-button--icon-sticks-to-border{padding:0 calc(var(--f-button-gutter) + var(--f-button-icon-size) + var(--f-button-icon-text-gap))}.f-button--icon-sticks-to-border .f-button__text{flex-grow:1;text-align:center}.f-button--icon-sticks-to-border .f-button__icon-wrapper{position:absolute;left:0;padding:0 var(--f-button-gutter)}.f-button--icon-sticks-to-border.f-button--icon-on-the-right .f-button__icon-wrapper{left:initial;right:0}.f-button--spread-content{justify-content:space-between}.f-button--bold .f-button__text{font-weight:700;font-variation-settings:\"wght\" 700}.f-button--selected{background:var(--f-button-focus-background)}.f-button--selected .f-button__text{font-weight:700;font-variation-settings:\"wght\" 700}.f-button--uppercase{text-transform:uppercase}.f-button--fullwidth{width:100%}.f-button--fullheight{--f-button-height:100%}";
+var css_248z$8 = ":root{--f-button-default-background:rgb(235,235,229);--f-button-default-color:rgb(78,77,71);--f-button-hover-background:rgb(218,218,210);--f-button-focus-background:rgb(202,200,191);--f-button-primary-default-background:rgb(78,77,71);--f-button-primary-default-color:rgb(255,255,255);--f-button-primary-hover-background:rgb(107,105,96);--f-button-primary-focus-background:rgb(136,133,121);--f-button-danger-default-background:rgb(241,67,74);--f-button-danger-default-color:rgb(255,255,255);--f-button-danger-hover-background:rgb(227,31,43);--f-button-danger-focus-background:rgb(201,16,36);--f-button-favorite-default-color:rgb(255,255,255);--f-button-favorite-default-background:rgb(173,52,146);--f-button-favorite-hover-background:rgb(147,44,123);--f-button-favorite-focus-background:rgb(121,36,101);--f-button-save-default-background:rgb(28,179,115);--f-button-save-default-color:rgb(255,255,255);--f-button-retire-default-background:rgb(242,139,2);--f-button-retire-default-color:rgb(255,255,255);--f-button-retire-hover-background:rgb(237,112,4);--f-button-retire-focus-background:rgb(205,87,12);--f-button-save-hover-background:rgb(25,160,103);--f-button-save-focus-background:rgb(22,140,90);--f-button-publish-default-background:rgb(26,122,197);--f-button-publish-default-color:rgb(255,255,255);--f-button-publish-hover-background:rgb(22,103,167);--f-button-publish-focus-background:rgb(16,80,130);--f-button-white-default-background:rgb(250,250,248);--f-button-white-default-color:rgb(78,77,71);--f-button-white-hover-background:rgb(218,218,210);--f-button-white-focus-background:rgb(202,200,191);--f-button-link-default-color:rgb(241,67,74);--f-button-link-default-background:transparent;--f-button-link-hover-color:rgb(201,16,36);--f-button-link-hover-background:transparent;--f-button-link-focus-background:transparent}.f-button{--f-button-height:40px;--f-button-gutter:16px;--f-button-icon-size:24px;--f-button-icon-text-gap:8px;--f-button-text-color:var(--f-button-default-color);position:relative;display:flex;align-items:center;justify-content:center;min-width:calc(var(--f-button-gutter) + var(--f-button-icon-size) + var(--f-button-gutter));height:var(--f-button-height);max-width:100%;padding:0 var(--f-button-gutter);margin:0;letter-spacing:0.4px;background:var(--f-button-default-background);box-shadow:0 1px 2px 0 rgba(0,0,0,0.16),0 0 2px 0 rgba(0,0,0,0.08);border:none;border-radius:2px;transition:background-color 0.3s ease-in-out,width 0.3s ease,box-shadow 0.3s ease-in-out,filter 0.3s ease-in-out;-webkit-appearance:none}.f-button svg{transition:transform 0.3s ease}.f-button svg *{stroke:currentColor}.f-button,.f-button:hover,.f-button:active{color:var(--f-button-text-color)}.f-button:focus-visible{color:var(--f-button-text-color)}.f-button:not(:disabled):hover{cursor:pointer;background:var(--f-button-hover-background);color:var(--f-button-hover-text-color,var(--f-button-text-color))}.f-button:not(:disabled):focus-visible{background:var(--f-button-focus-background);outline:none}.f-button:disabled{cursor:not-allowed;opacity:0.66}.f-button__icon-wrapper{display:flex;padding:0 var(--f-button-icon-text-gap) 0 0;pointer-events:none}.f-button__text{font-weight:400;font-variation-settings:\"wght\" 400;--f-button-text-font-size:16px;font-size:var(--f-button-text-font-size);line-height:20px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.f-button--circle{border-radius:50%}.f-button--pill{border-radius:var(--f-button-height)}.f-button--link{--f-button-text-color:var(--f-button-link-default-color);--f-button-hover-text-color:var(--f-button-link-hover-color);--f-button-default-background:var(--f-button-link-default-background);--f-button-hover-background:var(--f-button-link-hover-background);--f-button-focus-background:var(--f-button-link-focus-background);box-shadow:none}.f-button--primary{--f-button-text-color:var(--f-button-primary-default-color);--f-button-default-background:var(--f-button-primary-default-background);--f-button-hover-background:var(--f-button-primary-hover-background);--f-button-focus-background:var(--f-button-primary-focus-background)}.f-button--danger{--f-button-text-color:var(--f-button-danger-default-color);--f-button-default-background:var(--f-button-danger-default-background);--f-button-hover-background:var(--f-button-danger-hover-background);--f-button-focus-background:var(--f-button-danger-focus-background)}.f-button--favorite{--f-button-text-color:var(--f-button-favorite-default-color);--f-button-default-background:var(--f-button-favorite-default-background);--f-button-hover-background:var(--f-button-favorite-hover-background);--f-button-focus-background:var(--f-button-favorite-focus-background)}.f-button--save{--f-button-text-color:var(--f-button-save-default-color);--f-button-default-background:var(--f-button-save-default-background);--f-button-hover-background:var(--f-button-save-hover-background);--f-button-focus-background:var(--f-button-save-focus-background)}.f-button--publish{--f-button-text-color:var(--f-button-publish-default-color);--f-button-default-background:var(--f-button-publish-default-background);--f-button-hover-background:var(--f-button-publish-hover-background);--f-button-focus-background:var(--f-button-publish-focus-background)}.f-button--retire{--f-button-text-color:var(--f-button-retire-default-color);--f-button-default-background:var(--f-button-retire-default-background);--f-button-hover-background:var(--f-button-retire-hover-background);--f-button-focus-background:var(--f-button-retire-focus-background)}.f-button--white{--f-button-text-color:var(--f-button-white-default-color);--f-button-default-background:var(--f-button-white-default-background);--f-button-hover-background:var(--f-button-white-hover-background);--f-button-focus-background:var(--f-button-white-focus-background)}.f-button--unobtrusive.f-button--unobtrusive{--f-button-text-color:var(--icon-button-changing-icon-color,$color-srf-warmgrey-1100);box-shadow:none}.f-button--unobtrusive.f-button--unobtrusive,.f-button--unobtrusive.f-button--unobtrusive:hover,.f-button--unobtrusive.f-button--unobtrusive:active{background:transparent}.f-button--unobtrusive.f-button--unobtrusive:focus-visible{background:transparent}.f-button--icon-only{--f-button-gutter:8px}.f-button--icon-only .f-button__icon-wrapper{padding:0}.f-button--extra-big{--f-button-height:56px;--f-button-gutter:14px;--f-button-icon-size:28px}.f-button--extra-big .f-button__text{--f-button-text-font-size:18px}.f-button--big{--f-button-height:48px;--f-button-gutter:12px;--f-button-icon-size:24px}.f-button--big .f-button__text{--f-button-text-font-size:16px}.f-button--small{--f-button-height:32px;--f-button-gutter:12px;--f-button-icon-size:16px}.f-button--small.f-button--icon-only{--f-button-gutter:8px}.f-button--small .f-button__text{font-weight:400;font-variation-settings:\"wght\" 400;--f-button-text-font-size:14px;line-height:16px}.f-button--tiny{--f-button-height:24px;--f-button-gutter:4px;--f-button-icon-size:16px;--f-button-icon-text-gap:4px}.f-button--tiny .f-button__text{font-weight:400;font-variation-settings:\"wght\" 400;--f-button-text-font-size:12px;line-height:16px}.f-button--extra-tiny{--f-button-height:18px;--f-button-gutter:4px;--f-button-icon-size:10px}.f-button--extra-tiny .f-button__text{--f-button-text-font-size:12px}.f-button--no-outline{box-shadow:none;border-radius:0}.f-button--icon-rotated svg{transform:rotate(180deg)}.f-button--margin-top{margin-top:24px}.f-button--margin-bottom{margin-bottom:24px}.f-button--left-align{justify-content:left}.f-button--invisible-content .f-button__text,.f-button--invisible-content .f-button__icon-wrapper,.f-button--invisible-content::before{visibility:hidden;opacity:0}.f-button--hidden{display:none}.f-button--icon-on-the-right{flex-direction:row-reverse}.f-button--icon-on-the-right .f-button__icon-wrapper{padding:0 0 0 var(--f-button-icon-text-gap)}.f-button--icon-sticks-to-border{padding:0 calc(var(--f-button-gutter) + var(--f-button-icon-size) + var(--f-button-icon-text-gap))}.f-button--icon-sticks-to-border .f-button__text{flex-grow:1;text-align:center}.f-button--icon-sticks-to-border .f-button__icon-wrapper{position:absolute;left:0;padding:0 var(--f-button-gutter)}.f-button--icon-sticks-to-border.f-button--icon-on-the-right .f-button__icon-wrapper{left:initial;right:0}.f-button--spread-content{justify-content:space-between}.f-button--bold .f-button__text{font-weight:700;font-variation-settings:\"wght\" 700}.f-button--selected{background:var(--f-button-focus-background)}.f-button--selected .f-button__text{font-weight:700;font-variation-settings:\"wght\" 700}.f-button--uppercase{text-transform:uppercase}.f-button--fullwidth{width:100%}.f-button--fullheight{--f-button-height:100%}";
 styleInject(css_248z$8);
 
 var Button = function (_a) {
@@ -3665,6 +3665,7 @@ var Button = function (_a) {
             'f-button--uppercase': modifier === null || modifier === void 0 ? void 0 : modifier.includes('uppercase'),
             'f-button--link': modifier === null || modifier === void 0 ? void 0 : modifier.includes('link'),
             'f-button--circle': modifier === null || modifier === void 0 ? void 0 : modifier.includes('circle'),
+            'f-button--pill': modifier === null || modifier === void 0 ? void 0 : modifier.includes('pill'),
             'f-button--icon-only': icon && !text,
         }), disabled: disabled, onClick: function (event) { return onClick(event); }, tabIndex: tabIndex, title: title, "data-id": dataId, "data-cy": dataCy },
         icon && (React__default.createElement("div", { className: classNames('f-button__icon-wrapper', {