superdesk-ui-framework 3.0.73 → 3.0.75

package/dist/playgrounds/react-playgrounds/TestGround.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import * as Components from './components/Index';
-import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect} from '../../../../app-typescript/index';
+import { Checkbox, RadioGroup, CheckboxButton, RadioButtonGroup, Button, Dropdown, Input, Label, Icon, IconButton, Badge, ThemeSelector, Container, IconLabel, Tooltip, Spinner, Divider, InputWrapper, InputNew, InputBase, Text, FormRowNew, ButtonGroup, Heading, SearchBar, Modal, BoxedList, BoxedListItem, TimePicker, DatePicker, TreeSelect, ContentDivider, Select, Option, AvatarGroup} from '../../../../app-typescript/index';
+import { IAvatarInGroup } from '../../../../app-typescript/components/avatar/avatar-group';
 import { FormLabel } from '../../../../app-typescript/components/Form/FormLabel';
 
 interface IProps {
@@ -23,7 +24,12 @@ interface IState {
     date: any;
     time: string;
     modalPlanningTemplates: boolean;
+    modalSaveEvent: boolean;
+    modalSaveEvent2: boolean;
+    modalSaveEvent3: boolean;
     treeSelectValue: any;
+    value: any;
+    valueS2: any;
 }
 
 let options2 = [
@@ -57,7 +63,12 @@ export class TestGround extends React.Component<IProps, IState> {
             date: new Date('2022-01-08'),
             time: '16:50',
             modalPlanningTemplates: false,
+            modalSaveEvent: false,
+            modalSaveEvent2: false,
+            modalSaveEvent3: false,
             treeSelectValue: [],
+            value: undefined,
+            valueS2: undefined,
         }
     }
 
@@ -70,11 +81,283 @@ export class TestGround extends React.Component<IProps, IState> {
     }
 
     render() {
+        const avatars: Array<IAvatarInGroup> = [
+            {
+                imageUrl: null,
+                initials: "VS",
+                displayName: 'Vladimir Stefanovic',
+                icon:{name: 'text', color: 'var(--sd-colour-highlight)'},
+            },
+            {
+                imageUrl: null,
+                initials: "JL",
+                displayName: 'Jeffrey Lebowski',
+                icon:{name: 'photo', color: 'var(--sd-colour-highlight)'}
+            },
+            {
+                imageUrl: null,
+                initials: "WS",
+                displayName: 'Walter Sobchak',
+                icon:{name: 'video', color: 'var(--sd-colour-highlight)'}
+            },
+            {
+                imageUrl: null,
+                initials: "ML",
+                displayName: 'Maude Lebowski',
+                icon:{name: 'file', color: 'var(--sd-colour-highlight)'}
+            },
+        ];
+        const modalSaveEventFooterOne=(
+            <ButtonGroup align="end">
+                <Button text='Cancel' onClick={() => this.setState({modalSaveEvent:false})} />
+                <Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent:false})} />
+            </ButtonGroup>
+        );
+        const modalSaveEventFooterTwo=(
+            <ButtonGroup align="end">
+                <Button text='Cancel' onClick={() => this.setState({modalSaveEvent2:false})} />
+                <Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent2:false})} />
+            </ButtonGroup>
+        );
+        const modalSaveEventFooterThree=(
+            <ButtonGroup align="end">
+                <Button text='Cancel' onClick={() => this.setState({modalSaveEvent3:false})} />
+                <Button type='primary' text='Save' onClick={() => this.setState({modalSaveEvent3:false})} />
+            </ButtonGroup>
+        );
         return (
             <Components.Layout header='Testing Ground'>
                 <Components.LayoutContainer>
                     <Components.MainPanel>
+                        <ButtonGroup>
+                            <Button text="Save Event Modal (Event only)" onClick={() => this.setState({modalSaveEvent: true})} />
+                            <Button text="Save Event Modal (Event & Planning)" onClick={() => this.setState({modalSaveEvent2: true})} />
+                            <Button text="Save Event Modal (Planning only)" onClick={() => this.setState({modalSaveEvent3: true})} />
+                        </ButtonGroup>
+                        <hr />
+                        {/* <button type="button" className="sd-dropdown-button" aria-haspopup="true" aria-expanded="false">
+                            <span className="sd-dropdown-button__text-block">
+                                <label className="sd-dropdown-button__text-label">Coverage:</label>
+                                <span className="sd-dropdown-button__text-value">Events &amp; Coverages</span>
+                            </span>
+                            <Icon name='chevron-down-thin' />
+                        </button> */}
+                        
+                        <hr />
                         <Button text="Planning Templates" onClick={() => this.setState({modalPlanningTemplates: true})} />
+                        <span></span>
+                        
+                        
+                         {/* Event Saving modals */}
+                         {/* Event Only (This one existed Before) */}
+                        <Modal 
+                            headerTemplate="Save Event"
+                            zIndex={10000}
+                            visible={this.state.modalSaveEvent}
+                            contentPadding='medium'
+                            contentBg='medium'
+                            size='medium'
+                            footerTemplate={modalSaveEventFooterOne}
+                            onHide={() => {this.setState({modalSaveEvent: false})}}
+                        >
+                            <div>
+                                <FormLabel text='Name'/>
+                                <Text size='small' weight='medium'>Australian Open 2024</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='Current Date'/>
+                                <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='Current Repeat Summary'/>
+                                <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='No. of events'/>
+                                <Text size='small' weight='medium'>1</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <Text size='small' className='mb-1 mt-0-5'><strong>This is a recurring event</strong>. Update all recurring events or just this one?</Text>
+                            <Select
+                                value={this.state.value}
+                                label='Update:'
+                                required={false}
+                                disabled={false}
+                                inlineLabel={true}
+                                labelHidden={true}
+                                onChange={(value) => {
+                                    this.setState({
+                                        value: value,
+                                    })
+                                }}
+                            >
+                                <Option>This event only</Option>
+                                <Option>This and all future events</Option>
+                                <Option>All events</Option>
+                            </Select>
+                        </Modal>
+
+                        {/* Event and Planning */}
+                        <Modal 
+                            headerTemplate="Save Event"
+                            zIndex={10000}
+                            visible={this.state.modalSaveEvent2}
+                            contentPadding='medium'
+                            contentBg='medium'
+                            size='medium'
+                            footerTemplate={modalSaveEventFooterTwo}
+                            onHide={() => {this.setState({modalSaveEvent2: false})}}
+                        >
+                            <div>
+                                <FormLabel text='Name'/>
+                                <Text size='small' weight='medium'>Australian Open 2024</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='Current Date'/>
+                                <Text size='small' weight='medium'>05.02.2024 @ 10:00</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='Current Repeat Summary'/>
+                                <Text size='small' weight='medium'>Every 1 day(s) until CET 28 Feb 2024</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <div>
+                                <FormLabel text='No. of events'/>
+                                <Text size='small' weight='medium'>1</Text>
+                            </div>
+                            <ContentDivider type="dashed" margin='x-small' />
+                            <Text size='small' className='mb-1 mt-0-5'><strong>This is a recurring event</strong>. Update all recurring events or just this one?</Text>
+                            <Select
+                                value={this.state.valueS2}
+                                label='Update:'
+                                required={false}
+                                disabled={false}
+                                inlineLabel={true}
+                                labelHidden={true}
+                                onChange={(value) => {
+                                    this.setState({
+                                        value: value,
+                                    })
+                                }}
+                            >
+                                <Option>This event only</Option>
+                                <Option>This and all future events</Option>
+                                <Option>All events</Option>
+                            </Select>
+                            <ContentDivider type="dashed" margin='small' />
+                            <Heading type='h4' className='mb-1'>Related Planning(s)</Heading>
+                            <div className='sd-list-item-group--space-between-items'>
+                                <div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
+                                    <div className="sd-list-item__border sd-list-item__border--locked"></div>
+                                    <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
+                                        <div className="sd-list-item__row">
+                                            <i role="presentation" className="icon-calendar icon--light-blue"></i>
+                                            <span className="sd-list-item__slugline">Planning Slug</span>
+                                            <span className="sd-overflow-ellipsis sd-list-item--element-grow">
+                                                <span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
+                                            </span>
+                                        </div>
+                                        <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
+                                            <Label text='draft' style='translucent'/>
+                                            <span className="sd-margin-s--auto">
+                                            <AvatarGroup
+                                                size="x-small"
+                                                items={avatars}
+                                            />
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <Text size='small' className='mb-1'>
+                                <strong>You made changes to a planning item that is a part of a recurring event</strong>.
+                                Update all recurring planning or just this one?
+                            </Text>
+                            <Select
+                                value={this.state.valueS2}
+                                label='Update:'
+                                required={false}
+                                disabled={false}
+                                inlineLabel={true}
+                                labelHidden={true}
+                                onChange={(valueS2) => {
+                                    this.setState({
+                                        value: valueS2,
+                                    })
+                                }}
+                            >
+                                <Option>This planning only</Option>
+                                <Option>This and all future plannings</Option>
+                                <Option>All plannings</Option>
+                            </Select>
+
+                        </Modal>
+
+                        {/* Planning only */}
+                        <Modal 
+                            headerTemplate="Save Event"
+                            zIndex={10000}
+                            visible={this.state.modalSaveEvent3}
+                            contentPadding='medium'
+                            contentBg='medium'
+                            size='medium'
+                            footerTemplate={modalSaveEventFooterThree}
+                            onHide={() => {this.setState({modalSaveEvent3: false})}}
+                        >
+                            <Heading type='h4' className='mb-1'>Related Planning(s)</Heading>
+                            <div className='sd-list-item-group--space-between-items'>
+                                <div role="listitem" className="sd-list-item sd-shadow--z1 mb-1">
+                                    <div className="sd-list-item__border sd-list-item__border--locked"></div>
+                                    <div className="sd-list-item__column sd-list-item__column--grow sd-list-item__column--no-border">
+                                        <div className="sd-list-item__row">
+                                            <i role="presentation" className="icon-calendar icon--light-blue"></i>
+                                            <span className="sd-list-item__slugline">Planning Slug</span>
+                                            <span className="sd-overflow-ellipsis sd-list-item--element-grow">
+                                                <span className="sd-list-item__text-strong">Cras justo odio, dapibus ac facilisis in.</span>
+                                            </span>
+                                        </div>
+                                        <div className="sd-list-item__row sd-list-item__row--overflow-visible me-1">
+                                            <Label text='draft' style='translucent'/>
+                                            <span className="sd-margin-s--auto">
+                                            <AvatarGroup
+                                                size="x-small"
+                                                items={avatars}
+                                            />
+                                            </span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <Text size='small' className='mb-1'>
+                                <strong>You made changes to a planning item that is a part of a recurring event</strong>.
+                                Update all recurring planning or just this one?
+                            </Text>
+                            <Select
+                                value={this.state.valueS2}
+                                label='Update:'
+                                required={false}
+                                disabled={false}
+                                inlineLabel={true}
+                                labelHidden={true}
+                                onChange={(valueS2) => {
+                                    this.setState({
+                                        value: valueS2,
+                                    })
+                                }}
+                            >
+                                <Option>This planning only</Option>
+                                <Option>This and all future plannings</Option>
+                                <Option>All plannings</Option>
+                            </Select>
+
+                        </Modal>
+
+                        {/* Planning templates modal */}
                         <Modal headerTemplate="Planning templates"
                             zIndex={10000}
                             visible={this.state.modalPlanningTemplates}

package/dist/superdesk-ui.bundle.css

@@ -11548,6 +11548,9 @@
   --space--3: calc(3 * var(--base-increment));
   --space--4: calc(4 * var(--base-increment));
   --space--5: calc(5 * var(--base-increment));
+  --space--6: calc(6 * var(--base-increment));
+  --space--7: calc(7 * var(--base-increment));
+  --space--8: calc(8 * var(--base-increment));
   --gap--none: 0;
   --gap--x-small: 0.4rem;
   --gap--small: 0.8rem;
@@ -11578,6 +11581,10 @@
   --width__modal--large: 80rem;
   --width__modal--x-large: 80vw;
   --text-size--base: 1rem;
+  --text-size-x-small: calc(var(--text-size--base) * 1.2);
+  --text-size-small: calc(var(--text-size--base) * 1.4);
+  --text-size-medium: calc(var(--text-size--base) * 1.6);
+  --text-size-large: calc(var(--text-size--base) * 2);
   --sd-shadow--z1: 0 0 0 1px var(--sd-shadow-outline), 0 1px 3px hsla(0, 0%, 0%, 0.16), 0 0 1px hsla(0, 0%, 0%, 0.1);
   --sd-shadow--z2: 0 0 0 1px var(--sd-shadow-outline), 0 1px 4px hsla(0, 0%, 0%, 0.16), 0 2px 6px hsla(0, 0%, 0%, 0.12), 0 0 1px hsla(0, 0%, 0%, 0.1);
   --sd-shadow--z3: 0 0 0 1px var(--sd-shadow-outline), 0 1px 6px hsla(0, 0%, 0%, 0.16), 0 3px 8px hsla(0, 0%, 0%, 0.24), 0 0 1px hsla(0, 0%, 0%, 0.1);
@@ -11585,7 +11592,10 @@
   --sd-drop-shadow--z1: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 3px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 0 1px rhsla(0, 0%, 0%, 0.12));
   --sd-drop-shadow--z2: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 4px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 2px 6px rhsla(0, 0%, 0%, 0.14)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
   --sd-drop-shadow--z3: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 1px 6px hsla(0, 0%, 0%, 0.18)) drop-shadow(0 3px 8px rhsla(0, 0%, 0%, 0.26)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
-  --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1)); }
+  --sd-drop-shadow--z4: drop-shadow(0 0 0 var(--sd-shadow-outline)) drop-shadow(0 2px 10px hsla(0, 0%, 0%, 0.24)) drop-shadow(0 6px 16px rhsla(0, 0%, 0%, 0.32)) drop-shadow(0 0 1px hsla(0, 0%, 0%, 0.1));
+  --form-element-height-small: var(--space--3);
+  --form-element-height-medium: var(--space--4);
+  --form-element-height-large: var(--space--5); }
 
 :root,
 [data-theme="light-ui"] {
@@ -35246,11 +35256,19 @@ a.label {
     display: flex;
     flex-direction: row;
     align-items: center;
-    gap: 0.8rem;
+    gap: var(--space--1);
     color: var(--color-text); }
     .simple-list .simple-list__item [class^="icon-"], .simple-list .simple-list__item [class*=" icon-"] {
       flex-grow: 0;
       flex-shrink: 0; }
+    .simple-list .simple-list__item.simple-list__item--gap-none {
+      gap: 0; }
+    .simple-list .simple-list__item.simple-list__item--gap-small {
+      gap: var(--space-0-5); }
+    .simple-list .simple-list__item.simple-list__item--gap-medium {
+      gap: var(--space-1); }
+    .simple-list .simple-list__item.simple-list__item--gap-large {
+      gap: var(--space-1-5); }
   .simple-list .simple-list__item--stacked {
     display: flex;
     flex-direction: column;
@@ -42122,6 +42140,8 @@ a.text-link {
     margin: 0.2rem 0 0.8rem; }
   .sd-list-item__row:only-child {
     margin: 0.2rem 0; }
+  .sd-list-item__row.sd-list-item__row--overflow-visible {
+    overflow: visible !important; }
 
 .sd-list-item__row--only-child {
   margin: 0.2rem 0 !important; }
@@ -49649,7 +49669,7 @@ textarea.sd-media-carousel__media-title {
   position: relative;
   display: block;
   position: relative;
-  padding-inline-end: 2rem;
+  padding-inline-end: var(--space--3);
   min-width: 5rem;
   cursor: pointer; }
   .sd-input__select::placeholder {
@@ -49722,25 +49742,60 @@ textarea.sd-media-carousel__media-title {
     grid-column: 2/4; }
   .sd-input.sd-input--is-select::after {
     position: relative;
-    z-index: 1;
+    font-family: 'sd_icons';
+    content: "\e64b";
     grid-row: 2/3;
     grid-column: 2/4;
+    --icon-base-size: 14px !important;
+    width: var(--icon-base-size);
+    height: var(--icon-base-size);
+    line-height: var(--icon-base-size);
+    font-size: var(--icon-base-size);
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    color: var(--color-icon-default);
+    -webkit-font-smoothing: antialiased;
     align-self: center;
     justify-self: flex-end;
     display: inline-block;
-    width: 0;
-    height: 0;
-    margin-inline-end: 1rem;
-    vertical-align: middle;
-    border-inline-start: 0.4rem solid transparent;
-    border-inline-end: 0.4rem solid transparent;
-    border-block-start: 0.4rem solid var(--color-text);
+    margin-inline-end: var(--space--1);
     pointer-events: none;
     opacity: 0.4;
-    content: "";
-    z-index: 0; }
+    z-index: 0;
+    transition: opacity 0.2s ease; }
   .sd-input.sd-input--is-select:hover::after {
     opacity: 0.6; }
+  .sd-input .sd-input__select-caret-wrapper {
+    position: relative;
+    display: block; }
+    .sd-input .sd-input__select-caret-wrapper::after {
+      --icon-base-size: 14px !important;
+      font-family: 'sd_icons';
+      content: "\e64b";
+      position: absolute;
+      inset-block-start: 10px;
+      inset-inline-end: 0;
+      width: var(--icon-base-size);
+      height: var(--icon-base-size);
+      line-height: var(--icon-base-size);
+      font-size: var(--icon-base-size);
+      speak: none;
+      font-style: normal;
+      font-weight: normal;
+      font-variant: normal;
+      text-transform: none;
+      color: var(--color-text);
+      -webkit-font-smoothing: antialiased;
+      margin-inline-end: var(--space--1);
+      pointer-events: none;
+      opacity: 0.6;
+      z-index: 0;
+      transition: opacity 0.2s ease; }
+    .sd-input .sd-input__select-caret-wrapper:hover::after {
+      opacity: 1; }
   .sd-input .sd-input__message-box {
     grid-row: 3/4;
     grid-column: 2/3; }

package/dist/superdesk-ui.bundle.js

@@ -40633,7 +40633,7 @@ var TableList = /** @class */ (function (_super) {
                                     ? _this.props.itemsDropdown(index)
                                     : []; } })
                             : React.createElement("div", __assign({ ref: provided2.innerRef }, provided2.draggableProps, provided2.dragHandleProps),
-                                React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
+                                React.createElement(TableListItem, { dragAndDrop: _this.props.dragAndDrop, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
                                         ? item.onClick
                                         : undefined, onDoubleClick: item.onDoubleClick
                                         ? item.onDoubleClick
@@ -40647,7 +40647,7 @@ var TableList = /** @class */ (function (_super) {
                                 React.createElement(Tooltip_1.Tooltip, { text: 'Add item', flow: 'top', appendToBody: true },
                                     React.createElement("div", { className: 'table-list__add-item--container sd-margin-x--auto' }, _this.dropDown()))))); }))
                 : React.createElement("div", { role: 'list', className: classes },
-                    this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, onClick: item.onClick
+                    this.state.items.map(function (item, index) { return (React.createElement(TableListItem, { key: index, start: item.start, center: item.center, end: item.end, action: item.action, selected: item.selected, onClick: item.onClick
                             ? item.onClick
                             : undefined, onDoubleClick: item.onDoubleClick
                             ? item.onDoubleClick
@@ -40683,6 +40683,7 @@ var TableListItem = /** @class */ (function (_super) {
     TableListItem.prototype.render = function () {
         var _this = this;
         var classes = (0, classnames_1.default)('table-list__item', {
+            'table-list__item--selected': this.props.selected,
             'table-list__item--clickable': this.props.onClick,
             'table-list__item--draggable': this.props.dragAndDrop,
             'table-list__item--locked': this.props.locked,
@@ -60738,7 +60739,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupSingleAndDoubleClick = void 0;
 function setupSingleAndDoubleClick() {
     var timer;
-    var delay;
+    var delay = 250;
     return function (event, cb) {
         clearTimeout(timer);
         if (event.nativeEvent.detail === 1) {
@@ -66311,7 +66312,8 @@ var Select = /** @class */ (function (_super) {
                 React.createElement("span", null, this.props.value)));
         }
         return (React.createElement(Form_1.InputWrapper, { label: this.props.label, error: this.props.error, invalid: this.props.error != null, required: this.props.required, disabled: this.props.disabled, readonly: this.props.readonly, info: this.props.info, inlineLabel: this.props.inlineLabel, labelHidden: this.props.labelHidden, fullWidth: this.props.fullWidth, htmlId: this.htmlId, tabindex: this.props.tabindex },
-            React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children)));
+            React.createElement("span", { className: 'sd-input__select-caret-wrapper' },
+                React.createElement("select", { className: 'sd-input__select', id: this.htmlId, value: this.props.value, "aria-describedby": this.htmlId, tabIndex: this.props.tabindex, onChange: this.handleChange, disabled: this.props.disabled || this.props.readonly }, this.props.children))));
     };
     return Select;
 }(React.Component));
@@ -77553,7 +77555,7 @@ var FormLabel = /** @class */ (function (_super) {
         var classes = (0, classnames_1.default)('form-label form-label--block', {
             'form-label--light': this.props.style === 'light',
         });
-        return (React.createElement("div", { className: classes }, this.props.text));
+        return (React.createElement("label", { className: classes }, this.props.text));
     };
     return FormLabel;
 }(React.PureComponent));
@@ -104887,6 +104889,7 @@ var SimpleListItem = /** @class */ (function (_super) {
                 'simple-list__item--justify-flex-start': this.props.justify === undefined
             },
             _a["simple-list__item--justify-".concat(this.props.justify)] = this.props.justify || this.props.justify !== undefined,
+            _a["simple-list__item--gap-".concat(this.props.gap)] = this.props.gap || this.props.gap !== undefined,
             _a));
         return (React.createElement("li", { className: classes, id: this.props.id || undefined }, this.props.children));
     };