@symphony-talent/component-library 1.5.0 → 1.6.0

package/bundles/symphony-talent-component-library-projects-component-library.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ngx-bootstrap/dropdown'), require('@angular/platform-browser/animations'), require('ngx-bootstrap/tooltip')) :
-    typeof define === 'function' && define.amd ? define('@symphony-talent/component-library/projects/component-library', ['exports', '@angular/core', '@angular/common', 'ngx-bootstrap/dropdown', '@angular/platform-browser/animations', 'ngx-bootstrap/tooltip'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["symphony-talent"] = global["symphony-talent"] || {}, global["symphony-talent"]["component-library"] = global["symphony-talent"]["component-library"] || {}, global["symphony-talent"]["component-library"].projects = global["symphony-talent"]["component-library"].projects || {}, global["symphony-talent"]["component-library"].projects["component-library"] = {}), global.ng.core, global.ng.common, global.dropdown, global.ng.platformBrowser.animations, global.tooltip));
-})(this, (function (exports, core, common, dropdown, animations, tooltip) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('ngx-bootstrap/dropdown'), require('@angular/platform-browser/animations'), require('ngx-bootstrap/tooltip'), require('@angular/forms')) :
+    typeof define === 'function' && define.amd ? define('@symphony-talent/component-library/projects/component-library', ['exports', '@angular/core', '@angular/common', 'ngx-bootstrap/dropdown', '@angular/platform-browser/animations', 'ngx-bootstrap/tooltip', '@angular/forms'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global["symphony-talent"] = global["symphony-talent"] || {}, global["symphony-talent"]["component-library"] = global["symphony-talent"]["component-library"] || {}, global["symphony-talent"]["component-library"].projects = global["symphony-talent"]["component-library"].projects || {}, global["symphony-talent"]["component-library"].projects["component-library"] = {}), global.ng.core, global.ng.common, global.dropdown, global.ng.platformBrowser.animations, global.tooltip, global.ng.forms));
+})(this, (function (exports, core, common, dropdown, animations, tooltip, forms) { 'use strict';
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -369,7 +369,7 @@
     exports.PillComponent = __decorate([
         core.Component({
             selector: 'symphony-pill',
-            template: "<span *ngIf=\"tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    tooltip=\"{{tooltipLabel}}\"\n    placement=\"top\"\n    containerClass=\"sfx-info-tooltip pill-tooltip\"\n    [adaptivePosition]=\"false\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"glyphicon glyphicon-remove sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"glyphicon glyphicon-remove sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>",
+            template: "<span *ngIf=\"tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    tooltip=\"{{tooltipLabel}}\"\n    placement=\"top\"\n    containerClass=\"sfx-info-tooltip pill-tooltip\"\n    [adaptivePosition]=\"false\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-close-modal sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>\n\n<span *ngIf=\"!tooltipLabel\"\n    class=\"sfx-d-inline-block sfx-pill-item\"\n    [ngClass]=\"{'inverse-pill': isInverse }\"\n    >\n    <i *ngIf=\"hasClose\" (click)=\"onRemoveClick()\"\n        class=\"si-close-modal sfx-cursor-pointer\"\n    ></i>\n    {{ pillLabel }}\n</span>",
             encapsulation: core.ViewEncapsulation.None,
             styles: [".sfx-pill-item{background-color:#f1f1f1;border-radius:25px;color:#000;font-weight:600;margin-right:10px;margin-top:10px;padding:10px 20px;text-align:center}.sfx-pill-item.inverse-pill{background-color:#000;color:#fff}.sfx-pill-item i{font-size:12px;position:relative;top:2px}.sfx-pill-item:hover{background-color:#000;color:#fff}.sfx-d-inline-block{display:inline-block}.sfx-cursor-pointer{cursor:pointer}.sfx-info-tooltip{min-width:100px}.sfx-info-tooltip.pill-tooltip{min-width:80px;opacity:1;top:-5px!important}.sfx-info-tooltip.pill-tooltip .tooltip-inner{border-radius:10px;box-shadow:0 0 20px rgba(0,0,0,.2);font-weight:600}.sfx-info-tooltip.pill-tooltip .tooltip-arrow.arrow{border-top-color:#fff}.sfx-info-tooltip .tooltip-inner{background-color:#fff;border-radius:0;color:#000;font-size:13px;max-width:160px;padding:8px 15px}"]
         })
@@ -387,8 +387,8 @@
     exports.TaskIconComponent = __decorate([
         core.Component({
             selector: 'symphony-task-icon',
-            template: "<div\n  class=\"task-circle\"\n  [ngClass]=\"{\n    'task-incomplete': !isComplete,\n    'task-complete': isComplete\n  }\"\n>\n  <i\n    class=\"fa-solid\"\n    [ngClass]=\"{\n      'fa-clipboard': !isComplete,\n      'fa-clipboard-check': isComplete\n    }\"\n  ></i>\n</div>\n",
-            styles: [".task-circle{border-radius:50%;height:50px;width:50px}.task-circle .fa-solid{color:#fff;font-size:20px;left:17px;position:relative;top:15px}.task-complete{background-color:#00d56b}.task-incomplete{background-color:#d9d9d9}"]
+            template: "<div\n  class=\"task-circle\"\n  [ngClass]=\"{\n    'task-incomplete': !isComplete,\n    'task-complete': isComplete\n  }\"\n>\n  <i\n    class=\"fa-solid\"\n    [ngClass]=\"{\n      'si-task-completed': !isComplete,\n      'si-task-open': isComplete\n    }\"\n  ></i>\n</div>\n",
+            styles: [".task-circle{border-radius:50%;height:50px;width:50px}.task-circle .fa-solid{color:#fff;font-size:20px;left:15px;position:relative;top:15px}.task-complete{background-color:#00d56b}.task-incomplete{background-color:#d9d9d9}"]
         })
     ], exports.TaskIconComponent);
 
@@ -422,17 +422,56 @@
     __decorate([
         core.Input()
     ], exports.InputTextComponent.prototype, "icon", void 0);
+    __decorate([
+        core.Input()
+    ], exports.InputTextComponent.prototype, "label", void 0);
+    __decorate([
+        core.Input()
+    ], exports.InputTextComponent.prototype, "isInverse", void 0);
     __decorate([
         core.Output()
     ], exports.InputTextComponent.prototype, "textChange", void 0);
     exports.InputTextComponent = __decorate([
         core.Component({
-            selector: 'symphony-input',
-            template: "<div class=\"search-wrap\">\n  <label for=\"keyword-search\" class=\"visuallyhidden\">Search: </label>\n  <input\n    type=\"text\"\n    name=\"keyword-search\"\n    class=\"keyword-search\"\n    placeholder=\"{{ placeholder }}\"\n    (keyup)=\"onTextChange($event)\"\n  />\n  <i *ngIf=\"icon\" class=\"{{ icon }}\"></i>\n</div>\n",
-            styles: [".visuallyhidden{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.search-wrap{position:relative}.search-wrap .keyword-search{border:1px solid #d0d0d0;border-radius:4px;font-family:neuzeit-grotesk,sans-serif!important;line-height:25px;padding:7px 15px;width:300px}.search-wrap .keyword-search::-moz-placeholder{color:#bababa}.search-wrap .keyword-search:-ms-input-placeholder{color:#bababa}.search-wrap .keyword-search::placeholder{color:#bababa}.search-wrap .keyword-search:focus{border-color:#464646}.search-wrap .keyword-search:focus-visible{outline:none}.search-wrap .fa-solid{font-size:20px;position:relative;right:30px;top:3px}"]
+            selector: 'symphony-input-text',
+            template: "<div\n  class=\"input-text-wrap\"\n  [ngClass]=\"{\n    'input-secondary': isInverse\n  }\"\n>\n  <label for=\"input-text\" class=\"input-text-label\">{{ label }}</label>\n  <input\n    type=\"text\"\n    name=\"input-text\"\n    class=\"input-text\"\n    autocomplete=\"off\"\n    placeholder=\"{{ placeholder }}\"\n    (keyup)=\"onTextChange($event)\"\n  />\n  <symphony-icon [icon]=\"icon\"></symphony-icon>\n</div>\n",
+            styles: [".input-text-wrap{position:relative}.input-text-wrap.input-secondary{color:#fff}.input-text-wrap.input-secondary .input-text{background-color:transparent;border-color:#565656}.input-text-wrap.input-secondary .input-text::-moz-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text:-ms-input-placeholder{color:#fff}.input-text-wrap.input-secondary .input-text::placeholder{color:#fff}.input-text-wrap .input-text-label{display:block;font-family:neuzeit_groteskbold,sans-serif;line-height:25px;margin-bottom:.9375rem}.input-text-wrap .input-text{border:1px solid #d0d0d0;border-radius:4px;font-family:neuzeit-grotesk,sans-serif!important;line-height:25px;padding:7px 15px;width:100%}.input-text-wrap .input-text::-moz-placeholder{color:#000}.input-text-wrap .input-text:-ms-input-placeholder{color:#000}.input-text-wrap .input-text::placeholder{color:#000}.input-text-wrap .input-text:focus{border-color:#464646}.input-text-wrap .input-text:focus-visible{outline:none}.input-text-wrap symphony-icon{bottom:8px;font-size:14px;position:absolute;right:15px}"]
         })
     ], exports.InputTextComponent);
 
+    exports.IconComponent = /** @class */ (function () {
+        function IconComponent() {
+        }
+        IconComponent.prototype.ngOnInit = function () { };
+        return IconComponent;
+    }());
+    __decorate([
+        core.Input()
+    ], exports.IconComponent.prototype, "icon", void 0);
+    __decorate([
+        core.Input()
+    ], exports.IconComponent.prototype, "isSecondary", void 0);
+    exports.IconComponent = __decorate([
+        core.Component({
+            selector: 'symphony-icon',
+            template: "<i\n  [class]=\"icon\"\n  [ngClass]=\"{\n    'icon-secondary': isSecondary,\n    'icon-primary': !isSecondary\n  }\"\n></i>\n",
+            styles: [".icon-secondary{color:#fff}i{height:18px;width:18px}"]
+        })
+    ], exports.IconComponent);
+
+    exports.IconModule = /** @class */ (function () {
+        function IconModule() {
+        }
+        return IconModule;
+    }());
+    exports.IconModule = __decorate([
+        core.NgModule({
+            declarations: [exports.IconComponent],
+            imports: [common.CommonModule],
+            exports: [exports.IconComponent],
+        })
+    ], exports.IconModule);
+
     exports.InputTextModule = /** @class */ (function () {
         function InputTextModule() {
         }
@@ -441,7 +480,8 @@
     exports.InputTextModule = __decorate([
         core.NgModule({
             declarations: [exports.InputTextComponent],
-            imports: [common.CommonModule],
+            imports: [common.CommonModule, exports.IconModule],
+            exports: [exports.InputTextComponent],
         })
     ], exports.InputTextModule);
 
@@ -675,40 +715,7 @@
         })
     ], exports.H5Module);
 
-    exports.IconComponent = /** @class */ (function () {
-        function IconComponent() {
-        }
-        IconComponent.prototype.ngOnInit = function () { };
-        return IconComponent;
-    }());
-    __decorate([
-        core.Input()
-    ], exports.IconComponent.prototype, "icon", void 0);
-    __decorate([
-        core.Input()
-    ], exports.IconComponent.prototype, "isSecondary", void 0);
-    exports.IconComponent = __decorate([
-        core.Component({
-            selector: 'symphony-icon',
-            template: "<i\n  [class]=\"icon\"\n  [ngClass]=\"{\n    'icon-secondary': isSecondary,\n    'icon-primary': !isSecondary\n  }\"\n></i>\n",
-            styles: [".icon-secondary{color:#fff}i{height:18px;width:18px}"]
-        })
-    ], exports.IconComponent);
-
-    exports.IconModule = /** @class */ (function () {
-        function IconModule() {
-        }
-        return IconModule;
-    }());
-    exports.IconModule = __decorate([
-        core.NgModule({
-            declarations: [exports.IconComponent],
-            imports: [common.CommonModule],
-            exports: [exports.IconComponent],
-        })
-    ], exports.IconModule);
-
-    exports["ɵl"] = /** @class */ (function () {
+    exports["ɵf"] = /** @class */ (function () {
         function AvatarComponent(sp) {
             this.sp = sp;
         }
@@ -789,65 +796,35 @@
     }());
     __decorate([
         core.Input()
-    ], exports["ɵl"].prototype, "firstName", void 0);
+    ], exports["ɵf"].prototype, "firstName", void 0);
     __decorate([
         core.Input()
-    ], exports["ɵl"].prototype, "lastName", void 0);
+    ], exports["ɵf"].prototype, "lastName", void 0);
     __decorate([
         core.Input()
-    ], exports["ɵl"].prototype, "sizePx", void 0);
+    ], exports["ɵf"].prototype, "sizePx", void 0);
     __decorate([
         core.Input()
-    ], exports["ɵl"].prototype, "fontSizePx", void 0);
-    exports["ɵl"] = __decorate([
+    ], exports["ɵf"].prototype, "fontSizePx", void 0);
+    exports["ɵf"] = __decorate([
         core.Component({
             selector: 'lib-avatar',
             template: "<div\n    [style.line-height.px]=\"sizePx\"\n    [style.height.px]=\"sizePx\"\n    [style.width.px]=\"sizePx\"\n    [style.font-size.px]=\"fontSizePx\"\n    [style.background-color]=\"bgColor\"\n    class=\"avatar-circle\"\n>\n    <div *ngIf=\"initials\" class=\"avatar-text\">\n        {{ initials }}\n    </div>\n</div>\n",
             styles: [".avatar-circle{background:#000;border-radius:50%;height:50px;line-height:50px;width:50px}.avatar-text{color:#fff;text-align:center}"]
         })
-    ], exports["ɵl"]);
-
-    exports["ɵk"] = /** @class */ (function () {
-        function AvatarModule() {
-        }
-        return AvatarModule;
-    }());
-    exports["ɵk"] = __decorate([
-        core.NgModule({
-            declarations: [exports["ɵl"]],
-            imports: [common.CommonModule],
-            providers: [common.SlicePipe],
-            exports: [exports["ɵl"]],
-        })
-    ], exports["ɵk"]);
-
-    exports["ɵf"] = /** @class */ (function () {
-        function DescriptionComponent() {
-        }
-        DescriptionComponent.prototype.ngOnInit = function () { };
-        return DescriptionComponent;
-    }());
-    __decorate([
-        core.Input()
-    ], exports["ɵf"].prototype, "description", void 0);
-    exports["ɵf"] = __decorate([
-        core.Component({
-            selector: 'symphony-description',
-            template: "<p>{{description}}</p>\n",
-            styles: ["p{font-size:14px;line-height:29px;margin-bottom:0}"]
-        })
     ], exports["ɵf"]);
 
     exports["ɵe"] = /** @class */ (function () {
-        function DescriptionModule() {
+        function AvatarModule() {
         }
-        return DescriptionModule;
+        return AvatarModule;
     }());
     exports["ɵe"] = __decorate([
         core.NgModule({
             declarations: [exports["ɵf"]],
             imports: [common.CommonModule],
-            exports: [exports["ɵf"]]
+            providers: [common.SlicePipe],
+            exports: [exports["ɵf"]],
         })
     ], exports["ɵe"]);
 
@@ -880,36 +857,6 @@
         })
     ], exports["ɵa"]);
 
-    exports["ɵh"] = /** @class */ (function () {
-        function ListTitleComponent() {
-        }
-        ListTitleComponent.prototype.ngOnInit = function () { };
-        return ListTitleComponent;
-    }());
-    __decorate([
-        core.Input()
-    ], exports["ɵh"].prototype, "listTitle", void 0);
-    exports["ɵh"] = __decorate([
-        core.Component({
-            selector: 'symphony-list-title',
-            template: "<h3>{{listTitle}}</h3>\n",
-            styles: ["h3{font-weight:700;letter-spacing:-1px;line-height:29px;margin-bottom:0;margin-top:0}"]
-        })
-    ], exports["ɵh"]);
-
-    exports["ɵg"] = /** @class */ (function () {
-        function ListTitleModule() {
-        }
-        return ListTitleModule;
-    }());
-    exports["ɵg"] = __decorate([
-        core.NgModule({
-            declarations: [exports["ɵh"]],
-            imports: [common.CommonModule],
-            exports: [exports["ɵh"]]
-        })
-    ], exports["ɵg"]);
-
     exports["ɵd"] = /** @class */ (function () {
         function MoreDropdownComponent() {
         }
@@ -924,8 +871,8 @@
     exports["ɵd"] = __decorate([
         core.Component({
             selector: 'symphony-more-dropdown',
-            template: "<div style=\"margin-left: 300px;\" class=\"btn-group\" dropdown>\n    <button id=\"button-basic\" dropdownToggle type=\"button\" class=\"btn dropdown-toggle\"\n            aria-controls=\"dropdown-basic\">\n      <i class=\"glyphicon glyphicon-option-vertical\"></i>\n    </button>\n    <ul id=\"dropdown-basic\" *dropdownMenu class=\"dropdown-menu\"\n        role=\"menu\" aria-labelledby=\"button-basic\">\n      <li role=\"menuitem\" *ngFor=\"let moreActions of sfxMoreActions\">\n        <a class=\"dropdown-item\" href=\"#\">{{moreActions.dropItemName}}</a>\n      </li>\n    </ul>\n  </div>",
-            styles: [".btn-group button.dropdown-toggle.btn{background:#fff;border-radius:50%;box-shadow:none;color:#000;font-size:24px;height:40px;line-height:26px;padding:0;width:40px}.btn-group button.dropdown-toggle.btn:hover{background:#000;color:#fff}.btn-group .dropdown-menu{border:none;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,.175);left:auto;margin-top:10px;max-height:none;overflow:inherit;padding-bottom:20px;padding-top:20px;right:7px}.btn-group .dropdown-menu li a.dropdown-item{color:#000;font-weight:600;padding:10px 20px}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{color:#fff;content:\"\\e252\";display:inline-block;font-family:Glyphicons Halflings!important;font-size:14px;position:absolute;right:8px;top:-13px;transform:rotate(180deg)}.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff}"]
+            template: "<div class=\"btn-group\" dropdown>\n  <button\n    id=\"button-basic\"\n    dropdownToggle\n    type=\"button\"\n    class=\"btn dropdown-toggle\"\n    aria-controls=\"dropdown-basic\"\n  >\n    <i class=\"si-more-options\"></i>\n  </button>\n  <ul\n    id=\"dropdown-basic\"\n    *dropdownMenu\n    class=\"dropdown-menu\"\n    role=\"menu\"\n    aria-labelledby=\"button-basic\"\n  >\n    <li role=\"menuitem\" *ngFor=\"let moreActions of sfxMoreActions\">\n      <a class=\"dropdown-item\" href=\"#\">{{ moreActions.dropItemName }}</a>\n    </li>\n  </ul>\n</div>\n",
+            styles: [".btn-group button.dropdown-toggle.btn{align-items:center;background:#fff;border-radius:50%;box-shadow:none;color:#000;display:flex;font-size:24px;height:40px;justify-content:center;line-height:26px;padding:0;width:40px}.btn-group button.dropdown-toggle.btn:hover{background:#000;color:#fff}.btn-group .dropdown-menu{border:none;border-radius:10px;box-shadow:0 0 15px rgba(0,0,0,.175);left:auto;margin-top:10px;max-height:none;overflow:inherit;padding-bottom:20px;padding-top:20px;right:7px}.btn-group .dropdown-menu li a.dropdown-item{color:#000;font-weight:600;padding:10px 20px}.btn-group .dropdown-menu li a.dropdown-item:hover{background:#000;color:#fff}.btn-group .dropdown-menu li a.not-allowed{cursor:not-allowed}.btn-group .dropdown-menu:before{color:#fff;content:\"\\e252\";display:inline-block;font-family:Glyphicons Halflings!important;font-size:14px;position:absolute;right:8px;top:-13px;transform:rotate(180deg)}.btn-group.open button.dropdown-toggle.btn{background:#000;color:#fff}"]
         })
     ], exports["ɵd"]);
 
@@ -942,12 +889,12 @@
         })
     ], exports["ɵc"]);
 
-    exports["ɵm"] = /** @class */ (function () {
+    exports["ɵg"] = /** @class */ (function () {
         function PillModule() {
         }
         return PillModule;
     }());
-    exports["ɵm"] = __decorate([
+    exports["ɵg"] = __decorate([
         core.NgModule({
             declarations: [exports.PillComponent],
             imports: [
@@ -955,80 +902,7 @@
             ],
             exports: [exports.PillComponent],
         })
-    ], exports["ɵm"]);
-
-    exports["ɵj"] = /** @class */ (function () {
-        function TimeStampComponent() {
-        }
-        TimeStampComponent.prototype.ngOnInit = function () { };
-        return TimeStampComponent;
-    }());
-    __decorate([
-        core.Input()
-    ], exports["ɵj"].prototype, "timeStamp", void 0);
-    exports["ɵj"] = __decorate([
-        core.Component({
-            selector: 'symphony-time-stamp',
-            template: "<p>{{timeStamp}}</p>\n",
-            styles: ["p{font-size:14px;letter-spacing:-1px;line-height:29px;margin-bottom:0}"]
-        })
-    ], exports["ɵj"]);
-
-    exports["ɵi"] = /** @class */ (function () {
-        function TimeStampModule() {
-        }
-        return TimeStampModule;
-    }());
-    exports["ɵi"] = __decorate([
-        core.NgModule({
-            declarations: [exports["ɵj"]],
-            imports: [common.CommonModule],
-            exports: [exports["ɵj"]]
-        })
-    ], exports["ɵi"]);
-
-    exports["ɵo"] = /** @class */ (function () {
-        function ButtonRoundComponent() {
-            this.clicked = new core.EventEmitter();
-        }
-        ButtonRoundComponent.prototype.ngOnInit = function () { };
-        ButtonRoundComponent.prototype.onClick = function () {
-            this.clicked.emit('Clicked');
-        };
-        return ButtonRoundComponent;
-    }());
-    __decorate([
-        core.Input()
-    ], exports["ɵo"].prototype, "icon", void 0);
-    __decorate([
-        core.Input()
-    ], exports["ɵo"].prototype, "disabled", void 0);
-    __decorate([
-        core.Input()
-    ], exports["ɵo"].prototype, "isSecondary", void 0);
-    __decorate([
-        core.Output()
-    ], exports["ɵo"].prototype, "clicked", void 0);
-    exports["ɵo"] = __decorate([
-        core.Component({
-            selector: 'symphony-button-round',
-            template: "<button\n  class=\"btn\"\n  [ngClass]=\"{\n    'btn-secondary': isSecondary,\n    'btn-primary': !isSecondary\n  }\"\n  (click)=\"onClick()\"\n  [disabled]=\"disabled\"\n>\n  <i class=\"fas\" [ngClass]=\"icon\"></i>\n</button>\n",
-            styles: ["button{border-radius:50%;height:40px;outline:none;width:40px}button i{font-size:10px}button:focus{outline:none}button:disabled{cursor:not-allowed;opacity:.3}button:disabled:hover{background-color:#fff;border:1px solid #000;color:#000}.btn-primary{background:#fff;border:1px solid #000;color:#000}.btn-primary:hover,.btn-secondary{background:#000;color:#fff}.btn-secondary{border:1px solid #fff}.btn-secondary:hover{background:#fff;color:#000}.bg-black{background-color:#000;padding:10px}"]
-        })
-    ], exports["ɵo"]);
-
-    exports["ɵn"] = /** @class */ (function () {
-        function ButtonRoundModule() {
-        }
-        return ButtonRoundModule;
-    }());
-    exports["ɵn"] = __decorate([
-        core.NgModule({
-            declarations: [exports["ɵo"]],
-            imports: [common.CommonModule],
-            exports: [exports["ɵo"]],
-        })
-    ], exports["ɵn"]);
+    ], exports["ɵg"]);
 
     var Icons;
     (function (Icons) {
@@ -1105,7 +979,7 @@
         Icons["USER"] = "si-user";
     })(Icons || (Icons = {}));
 
-    exports["ɵq"] = /** @class */ (function () {
+    exports["ɵi"] = /** @class */ (function () {
         function IconWrapperComponent() {
             this.Icons = Icons;
         }
@@ -1114,20 +988,178 @@
     }());
     __decorate([
         core.Input()
-    ], exports["ɵq"].prototype, "isInverse", void 0);
-    exports["ɵq"] = __decorate([
+    ], exports["ɵi"].prototype, "isInverse", void 0);
+    exports["ɵi"] = __decorate([
         core.Component({
             selector: 'symphony-icon-wrapper',
             template: "<div class=\"icon-wrapper\" [ngClass]=\"{ 'is-inverse': isInverse }\">\n  <ng-content></ng-content>\n</div>\n",
-            styles: [".icon-wrapper{border:1px solid #000;border-radius:50%;height:40px;padding-top:11px;width:40px}.icon-wrapper.is-inverse,.icon-wrapper:hover{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}"]
+            styles: [".icon-wrapper{border:1px solid #000;border-radius:50%;cursor:pointer;height:40px;padding-top:11px;text-align:center;width:40px}.icon-wrapper.is-inverse,.icon-wrapper:hover{background:#000;color:#fff}.icon-wrapper.is-inverse:hover{background:#fff;color:#000}"]
         })
-    ], exports["ɵq"]);
+    ], exports["ɵi"]);
 
-    exports["ɵp"] = /** @class */ (function () {
+    exports["ɵh"] = /** @class */ (function () {
         function IconWrapperModule() {
         }
         return IconWrapperModule;
     }());
+    exports["ɵh"] = __decorate([
+        core.NgModule({
+            declarations: [exports["ɵi"]],
+            imports: [common.CommonModule],
+            exports: [exports["ɵi"]],
+        })
+    ], exports["ɵh"]);
+
+    exports["ɵk"] = /** @class */ (function () {
+        function TwoColumnFilterAreaComponent() {
+        }
+        TwoColumnFilterAreaComponent.prototype.ngOnInit = function () { };
+        return TwoColumnFilterAreaComponent;
+    }());
+    __decorate([
+        core.Input()
+    ], exports["ɵk"].prototype, "height", void 0);
+    exports["ɵk"] = __decorate([
+        core.Component({
+            selector: 'symphony-two-column-filter-area',
+            template: "<section class=\"col-xs-12 col-sm-12 col-md-12 col-lg-12 sfx-mb-30 sfx-p-0\">\n  <div class=\"sfx-filter-section\" [ngStyle]=\"{ height: height }\">\n    <div class=\"row\">\n      <!-- select dropdown for event type -->\n      <div\n        class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mb-30 sfx-filter-items-wrap\"\n      >\n        <ng-content select=\"[filter-one]\"></ng-content>\n      </div>\n\n      <!-- search component -->\n      <div\n        class=\"col-xs-12 col-sm-6 col-md-6 col-lg-6 sfx-mb-30 sfx-filter-items-wrap\"\n      >\n        <ng-content select=\"[filter-two]\"></ng-content>\n      </div>\n    </div>\n  </div>\n</section>\n",
+            styles: [".sfx-filter-section{background-color:#000;border-radius:5px;padding:1.875rem 2.5rem}"]
+        })
+    ], exports["ɵk"]);
+
+    exports["ɵj"] = /** @class */ (function () {
+        function TwoColumnFilterAreaModule() {
+        }
+        return TwoColumnFilterAreaModule;
+    }());
+    exports["ɵj"] = __decorate([
+        core.NgModule({
+            declarations: [exports["ɵk"]],
+            imports: [common.CommonModule],
+            exports: [exports["ɵk"]],
+        })
+    ], exports["ɵj"]);
+
+    exports["ɵo"] = /** @class */ (function () {
+        function SfxInlineErrorComponent() {
+        }
+        return SfxInlineErrorComponent;
+    }());
+    __decorate([
+        core.Input()
+    ], exports["ɵo"].prototype, "errorMessage", void 0);
+    exports["ɵo"] = __decorate([
+        core.Component({
+            selector: 'lib-sfx-inline-error',
+            template: "<p>{{ errorMessage }}</p>\n",
+            styles: ["p{color:red!important;font-size:1rem;margin:0;padding:10px 0}"]
+        })
+    ], exports["ɵo"]);
+
+    exports["ɵn"] = /** @class */ (function () {
+        function SfxInlineErrorModule() {
+        }
+        return SfxInlineErrorModule;
+    }());
+    exports["ɵn"] = __decorate([
+        core.NgModule({
+            declarations: [exports["ɵo"]],
+            imports: [common.CommonModule],
+            exports: [exports["ɵo"]],
+        })
+    ], exports["ɵn"]);
+
+    exports["ɵm"] = /** @class */ (function () {
+        function InputRadioComponent() {
+            this.clicked = new core.EventEmitter();
+        }
+        InputRadioComponent.prototype.ngOnInit = function () { };
+        InputRadioComponent.prototype.onClick = function () {
+            this.isActive ? (this.isActive = false) : (this.isActive = true);
+            this.clicked.emit({
+                label: this.label,
+                isActive: this.isActive,
+            });
+        };
+        return InputRadioComponent;
+    }());
+    __decorate([
+        core.Input()
+    ], exports["ɵm"].prototype, "isActive", void 0);
+    __decorate([
+        core.Input()
+    ], exports["ɵm"].prototype, "label", void 0);
+    __decorate([
+        core.Input()
+    ], exports["ɵm"].prototype, "isRequired", void 0);
+    __decorate([
+        core.Output()
+    ], exports["ɵm"].prototype, "clicked", void 0);
+    exports["ɵm"] = __decorate([
+        core.Component({
+            selector: 'symphony-input-radio',
+            template: "<div class=\"sfx-radio\" (click)=\"onClick()\">\n  <input\n    type=\"radio\"\n    class=\"sfx-radio-input sfx-position-absolute\"\n    [checked]=\"isActive\"\n    name=\"{{ label }}\"\n  />\n  <label for=\"{{ label }}\" class=\"Font400\"\n    >{{ label }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n  >\n</div>\n",
+            styles: [".requiredField{color:red!important}.sfx-radio{-moz-user-select:none;-ms-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;margin:10px 0;user-select:none}.sfx-radio .sfx-radio-input{cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;top:0;width:100%;z-index:1}.sfx-radio .sfx-radio-input~label{color:#000;cursor:pointer;display:inline-block;font-family:neuzeit_groteskbold;font-size:14px;height:100%;line-height:20px;position:relative}.sfx-radio .sfx-radio-input+:before{border:.1rem solid #000;border-radius:50%;content:\"\";display:inline-block;height:1rem;margin-bottom:.2rem;margin-right:.5rem;vertical-align:bottom;width:1rem}.sfx-radio .sfx-radio-input:checked+:before{background:radial-gradient(#000 0,#000 40%,transparent 50%,transparent)}.sfx-radio .sfx-radio-input:checked+*{color:#000}"]
+        })
+    ], exports["ɵm"]);
+
+    exports["ɵl"] = /** @class */ (function () {
+        function InputRadioModule() {
+        }
+        return InputRadioModule;
+    }());
+    exports["ɵl"] = __decorate([
+        core.NgModule({
+            declarations: [exports["ɵm"]],
+            imports: [
+                common.CommonModule,
+                forms.FormsModule,
+                forms.ReactiveFormsModule,
+                exports["ɵn"],
+            ],
+            exports: [exports["ɵm"]],
+        })
+    ], exports["ɵl"]);
+
+    exports["ɵq"] = /** @class */ (function () {
+        function InputCheckboxComponent() {
+            this.clicked = new core.EventEmitter();
+        }
+        InputCheckboxComponent.prototype.ngOnInit = function () { };
+        InputCheckboxComponent.prototype.onClick = function () {
+            this.isActive ? (this.isActive = false) : (this.isActive = true);
+            this.clicked.emit({
+                label: this.label,
+                isActive: this.isActive,
+            });
+        };
+        return InputCheckboxComponent;
+    }());
+    __decorate([
+        core.Input()
+    ], exports["ɵq"].prototype, "isActive", void 0);
+    __decorate([
+        core.Input()
+    ], exports["ɵq"].prototype, "label", void 0);
+    __decorate([
+        core.Input()
+    ], exports["ɵq"].prototype, "isRequired", void 0);
+    __decorate([
+        core.Output()
+    ], exports["ɵq"].prototype, "clicked", void 0);
+    exports["ɵq"] = __decorate([
+        core.Component({
+            selector: 'symphony-input-checkbox',
+            template: "<div class=\"sfx-checkbox\">\n    <input\n        type=\"checkbox\"\n        class=\"sfx-checkbox-input\"\n        [checked]=\"isActive\"\n        name=\"{{ label }}\"\n    />\n    <label (click)=\"onClick()\" for=\"{{ label }}\" class=\"Font400\"\n        >{{ label\n        }}<span class=\"requiredField\" *ngIf=\"isRequired\">*</span></label\n    >\n</div>\n",
+            styles: [".sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:transparent}.requiredField{color:red!important}.sfx-checkbox{-moz-user-select:none;-ms-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;margin:10px 0;user-select:none}.sfx-checkbox .sfx-checkbox-input:checked,.sfx-checkbox .sfx-checkbox-input:not(:checked){height:0;left:0;margin:0;opacity:0;overflow:hidden;pointer-events:none;position:absolute;width:0;z-index:-1}.sfx-checkbox .sfx-checkbox-input~label{color:#000;cursor:pointer;display:inline-block;font-family:neuzeit_groteskbold,sans-serif;font-size:14px;height:100%;line-height:20px;margin:0;padding-left:36px;position:relative;word-break:break-word}.sfx-checkbox .sfx-checkbox-input~label.sfx-font-reg{font-family:neuzeit_groteskregular,sans-serif}.sfx-checkbox .sfx-checkbox-input~label:before{border-radius:2px;content:\"\";left:0;position:absolute;transform:translateZ(0);transition:all .2s ease-in}.sfx-checkbox .sfx-checkbox-input~label:after{border-radius:2px;content:\"\";left:0;position:absolute;top:0}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:before{border:none;height:15px;left:0;top:1px;transform:rotate(37deg) scale(.1);transform-origin:100% 100%;width:9px}.sfx-checkbox .sfx-checkbox-input:not(:checked)~label:after{border:2px solid #000;border-radius:4px;height:20px;width:20px;z-index:0}.sfx-checkbox .sfx-checkbox-input:checked~label:before{-webkit-backface-visibility:hidden;backface-visibility:hidden;border-color:transparent #000 #000 transparent;border-radius:0;border-style:solid;border-width:0 2px 2px 0;height:12px;left:3px;top:3px;transform:rotate(37deg) scale(1);transform-origin:100% 100%;width:6px;z-index:1}.sfx-checkbox .sfx-checkbox-input:checked~label:after{background-color:#fff;border:2px solid #000;border-radius:4px;height:20px;width:20px}.sfx-checkbox .sfx-checkbox-input:disabled~label{opacity:.3;pointer-events:none}"]
+        })
+    ], exports["ɵq"]);
+
+    exports["ɵp"] = /** @class */ (function () {
+        function InputCheckboxModule() {
+        }
+        return InputCheckboxModule;
+    }());
     exports["ɵp"] = __decorate([
         core.NgModule({
             declarations: [exports["ɵq"]],
@@ -1151,9 +1183,6 @@
                 exports["ɵc"],
                 exports["ɵe"],
                 exports["ɵg"],
-                exports["ɵi"],
-                exports["ɵk"],
-                exports["ɵm"],
                 exports.TaskIconModule,
                 exports.ColorSampleModule,
                 exports.H1Module,
@@ -1162,9 +1191,12 @@
                 exports.H4Module,
                 exports.ParagraphModule,
                 exports.H5Module,
-                exports["ɵn"],
                 exports.IconModule,
+                exports["ɵh"],
+                exports["ɵj"],
+                exports["ɵl"],
                 exports["ɵp"],
+                exports.InputTextModule,
             ],
         })
     ], exports.AtomsModule);
@@ -1210,7 +1242,7 @@
             declarations: [exports.PillsComponent],
             imports: [
                 common.CommonModule,
-                exports["ɵm"]
+                exports["ɵg"]
             ],
             exports: [
                 exports.PillsComponent
@@ -1236,8 +1268,8 @@
     exports.TaskComponent = __decorate([
         core.Component({
             selector: 'symphony-task',
-            template: "<div class=\"sfx-task\">\n  <symphony-task-icon\n    class=\"task-icon\"\n    [isComplete]=\"taskModel.isComplete\"\n  ></symphony-task-icon>\n  <div class=\"task-content\">\n    <symphony-list-title [listTitle]=\"taskModel.title\"></symphony-list-title>\n    <div class=\"time-and-assigned\">\n      <symphony-time-stamp\n        [timeStamp]=\"taskModel.dueDate\"\n      ></symphony-time-stamp>\n      <symphony-description\n        [description]=\"taskModel.assignee\"\n      ></symphony-description>\n    </div>\n  </div>\n  <symphony-more-dropdown\n    class=\"task-more-option\"\n    *ngIf=\"taskModel.moreActions && taskModel.moreActions.length > 0\"\n    [moreActions]=\"taskModel.moreActions\"\n  >\n  </symphony-more-dropdown>\n</div>\n",
-            styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-task{align-items:center;border-bottom:1px solid #d9d9d9;display:flex;padding:30px 0}.sfx-task symphony-task{font-size:14px;letter-spacing:-1px}.sfx-task symphony-task-icon{margin-right:20px}.sfx-task .task-content{height:50px;width:80%}.sfx-task symphony-description,.sfx-task symphony-time-stamp{display:inline-block}.sfx-task symphony-time-stamp{margin-right:20px}.sfx-task .time-and-assigned{margin-bottom:-10px}"]
+            template: "<div class=\"sfx-task\">\n  <symphony-task-icon\n    class=\"task-icon\"\n    [isComplete]=\"taskModel.isComplete\"\n  ></symphony-task-icon>\n  <div class=\"task-content\">\n    <symphony-h3 [text]=\"taskModel.title\"></symphony-h3>\n    <div class=\"time-and-assigned\">\n      <symphony-paragraph\n        [text]=\"taskModel.dueDate\"\n      ></symphony-paragraph>\n      <symphony-paragraph\n        [text]=\"taskModel.assignee\"\n      ></symphony-paragraph>\n    </div>\n  </div>\n  <symphony-more-dropdown\n    class=\"task-more-option\"\n    *ngIf=\"taskModel.moreActions && taskModel.moreActions.length > 0\"\n    [moreActions]=\"taskModel.moreActions\"\n  >\n  </symphony-more-dropdown>\n</div>\n",
+            styles: ["*{font-family:neuzeit-grotesk,sans-serif!important}.sfx-task{align-items:center;border-bottom:1px solid #d9d9d9;display:flex;padding:30px 0}.sfx-task symphony-task{font-size:14px;letter-spacing:-1px}.sfx-task symphony-task-icon{margin-right:20px}.sfx-task .task-content{height:50px;width:80%}.sfx-task symphony-more-dropdown{margin-left:auto}.sfx-task symphony-paragraph{display:inline-block;margin-right:20px}.sfx-task .time-and-assigned{margin-bottom:-10px}"]
         })
     ], exports.TaskComponent);
 
@@ -1252,10 +1284,9 @@
             imports: [
                 common.CommonModule,
                 exports.TaskIconModule,
-                exports["ɵg"],
-                exports["ɵi"],
-                exports["ɵe"],
                 exports["ɵc"],
+                exports.H3Module,
+                exports.ParagraphModule
             ],
             exports: [exports.TaskComponent],
         })
@@ -1283,7 +1314,7 @@
     exports.ColorSwatchComponent = __decorate([
         core.Component({
             selector: 'symphony-ui-color-explorer',
-            template: "<div class=\"sfx-ui-color-explorer\">\n  <symphony-color-sample\n    [color]=\"colorSwatchModel.color\"\n  ></symphony-color-sample>\n  <symphony-list-title\n    [listTitle]=\"colorSwatchModel.colorName\"\n  ></symphony-list-title>\n  <symphony-description [description]=\"description\"></symphony-description>\n</div>\n",
+            template: "<div class=\"sfx-ui-color-explorer\">\n  <symphony-color-sample\n    [color]=\"colorSwatchModel.color\"\n  ></symphony-color-sample>\n  <symphony-h3\n    [text]=\"colorSwatchModel.colorName\"\n  ></symphony-h3>\n  <symphony-paragraph [text]=\"description\"></symphony-paragraph>\n</div>\n",
             styles: [""]
         })
     ], exports.ColorSwatchComponent);
@@ -1299,8 +1330,8 @@
             imports: [
                 common.CommonModule,
                 exports.ColorSampleModule,
-                exports["ɵg"],
-                exports["ɵe"],
+                exports.H3Module,
+                exports.ParagraphModule
             ],
             exports: [exports.ColorSwatchComponent],
         })
@@ -1343,54 +1374,85 @@
                 exports.IconModule,
                 exports.H5Module,
                 exports.ParagraphModule,
-                exports["ɵp"],
+                exports["ɵh"],
             ],
             exports: [exports.IconSwatchComponent],
         })
     ], exports.IconSwatchModule);
 
-    exports["ɵs"] = /** @class */ (function () {
+    exports["ɵu"] = /** @class */ (function () {
         function NoteComponent() {
+            this.noteModel = {
+                firstName: '',
+                lastName: '',
+                listTitle: '',
+                timeStamp: '',
+                description: '',
+                moreActions: [],
+            };
         }
         NoteComponent.prototype.ngOnInit = function () { };
         return NoteComponent;
     }());
     __decorate([
         core.Input()
-    ], exports["ɵs"].prototype, "firstName", void 0);
-    __decorate([
-        core.Input()
-    ], exports["ɵs"].prototype, "lastName", void 0);
-    __decorate([
-        core.Input()
-    ], exports["ɵs"].prototype, "listTitle", void 0);
-    __decorate([
-        core.Input()
-    ], exports["ɵs"].prototype, "timeStamp", void 0);
-    __decorate([
-        core.Input()
-    ], exports["ɵs"].prototype, "description", void 0);
+    ], exports["ɵu"].prototype, "noteModel", void 0);
+    exports["ɵu"] = __decorate([
+        core.Component({
+            selector: 'symphony-note',
+            template: "<div class=\"sfx-note\">\n    <lib-avatar class=\"list-avatar\" [firstName]= noteModel.firstName [lastName]= noteModel.lastName></lib-avatar>\n    <div class=\"list-content\">\n        <symphony-h3 [text]= noteModel.listTitle></symphony-h3>\n        <symphony-paragraph [text]= noteModel.timeStamp></symphony-paragraph>\n        <symphony-paragraph [text]= noteModel.description></symphony-paragraph>\n    </div>\n    <symphony-more-dropdown class=\"list-more-option\" [moreActions]= noteModel.moreActions></symphony-more-dropdown>\n</div>\n",
+            styles: [".sfx-note{padding:20px 75px;position:relative}.sfx-note .list-avatar{left:0;position:absolute;top:20px}.sfx-note .list-more-option{position:absolute;right:0;top:20px}"]
+        })
+    ], exports["ɵu"]);
+
+    exports["ɵt"] = /** @class */ (function () {
+        function NoteModule() {
+        }
+        return NoteModule;
+    }());
+    exports["ɵt"] = __decorate([
+        core.NgModule({
+            declarations: [exports["ɵu"]],
+            imports: [
+                common.CommonModule,
+                exports["ɵe"],
+                exports["ɵc"],
+                exports.H3Module,
+                exports.ParagraphModule
+            ],
+            exports: [exports["ɵu"]]
+        })
+    ], exports["ɵt"]);
+
+    exports["ɵs"] = /** @class */ (function () {
+        function BreadcrumbComponent() {
+        }
+        BreadcrumbComponent.prototype.ngOnInit = function () {
+            this.icon = Icons.ARROWNEXT;
+        };
+        return BreadcrumbComponent;
+    }());
     __decorate([
         core.Input()
-    ], exports["ɵs"].prototype, "moreActions", void 0);
+    ], exports["ɵs"].prototype, "breadcrumbs", void 0);
     exports["ɵs"] = __decorate([
         core.Component({
-            selector: 'symphony-note',
-            template: "<div class=\"sfx-note\">\n    <lib-avatar class=\"list-avatar\" [firstName]= firstName [lastName]= lastName></lib-avatar>\n    <div class=\"list-content\">\n        <symphony-list-title [listTitle]= listTitle></symphony-list-title>\n        <symphony-time-stamp [timeStamp]= timeStamp></symphony-time-stamp>\n        <symphony-description [description]= description></symphony-description>\n    </div>\n    <symphony-more-dropdown class=\"list-more-option\" [moreActions]= moreActions></symphony-more-dropdown>\n</div>\n",
-            styles: [".sfx-note{padding:20px 75px;position:relative}.sfx-note .list-avatar{left:0;position:absolute;top:20px}.sfx-note .list-more-option{position:absolute;right:0;top:20px}"]
+            selector: 'symphony-breadcrumb',
+            template: "<div class=\"sfx-breadcrumb-wrapper\">\n  <span\n    class=\"breadcrumb-item\"\n    *ngFor=\"let breadcrumb of breadcrumbs; let last = last\"\n  >\n    <symphony-h3 *ngIf=\"!last\"\n      ><a\n        class=\"sfx-cursor-pointer sfx-font30 sfx-txt-black\"\n        href=\"{{ breadcrumb.link }}\"\n        >{{ breadcrumb.label }}</a\n      ></symphony-h3\n    >\n    <symphony-h3 *ngIf=\"last\">{{ breadcrumb.label }} </symphony-h3>\n\n    <symphony-icon [icon]=\"icon\" *ngIf=\"!last\"></symphony-icon>\n  </span>\n</div>\n",
+            styles: [".breadcrumb-item,.sfx-breadcrumb-wrapper{display:flex}symphony-icon{padding:0 6px;position:relative;top:9px}"]
         })
     ], exports["ɵs"]);
 
     exports["ɵr"] = /** @class */ (function () {
-        function NoteModule() {
+        function BreadcrumbModule() {
         }
-        return NoteModule;
+        return BreadcrumbModule;
     }());
     exports["ɵr"] = __decorate([
         core.NgModule({
             declarations: [exports["ɵs"]],
-            imports: [common.CommonModule, exports["ɵk"], exports["ɵg"], exports["ɵi"], exports["ɵe"], exports["ɵc"]],
-            exports: [exports["ɵs"]]
+            imports: [common.CommonModule, exports.H3Module, exports.IconModule],
+            exports: [exports["ɵs"]],
         })
     ], exports["ɵr"]);
 
@@ -1404,22 +1466,21 @@
             declarations: [],
             imports: [
                 common.CommonModule,
-                exports["ɵk"],
-                exports["ɵg"],
-                exports["ɵi"],
                 exports["ɵe"],
                 exports["ɵc"],
                 exports.PillsModule,
                 exports.TaskModule,
                 exports.ColorSwatchModule,
                 exports.IconSwatchModule,
+                exports["ɵr"],
             ],
             exports: [
-                exports["ɵr"],
+                exports["ɵt"],
                 exports.PillsModule,
                 exports.TaskModule,
                 exports.ColorSwatchModule,
                 exports.IconSwatchModule,
+                exports["ɵr"],
             ],
         })
     ], exports.MoleculesModule);