@muraldevkit/ui-toolkit 4.20.1 → 4.22.0

package/dist/styles/date-picker/module.scss

@@ -2,16 +2,30 @@
 @use '~@muraldevkit/ds-foundation/src/styles/contextual-variables/z-index' as *;
 @use '../forms.global.scss' as *;
 @use '../forms.variables.scss' as *;
+.MrlDatePicker--container {
+	width: fit-content;
+}
 .MrlDatePicker {
 	@include mrl-text-inputs;
 	@include mrl-text-inputs-read-only;
 	@include mrl-focus($style: 'outline');
 	height: var(--mrl-spacing-09);
 	width: 17.5rem;
-	&--wrapper {
-		position: relative;
+	&[type='date']::-webkit-calendar-picker-indicator {
+		opacity: 0;
 	}
 }
 .MrlDatePicker--active {
 	border-color: var(--mrl-text-input-border-color-hover);
 }
+.MrlDatePicker--icon {
+	color: var(--mrl-text-input-border-color);
+	display: flex;
+	pointer-events: none;
+	position: absolute;
+	right: var(--mrl-spacing-03);
+	top: var(--mrl-spacing-03);
+}
+.MrlDatePicker--icon-active {
+	color: var(--mrl-text-input-border-color-hover);
+}

package/dist/styles.css

@@ -31,6 +31,7 @@
 .mrl-u-focus-wrapper{position:relative}.MrlRadioButtonStandalone-input{position:relative;position:absolute}.MrlRadioButtonStandalone-input:focus-visible+.mrl-u-focus-indicator{outline:none}.MrlRadioButtonStandalone-input:focus-visible+.mrl-u-focus-indicator::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-border-radius-rounded) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1}@keyframes border-animation{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}.MrlRadioButtonStandalone-focus-indicator{height:var(--mrl-radio-button-height);left:0;pointer-events:none;position:absolute;top:auto;width:var(--mrl-radio-button-width)}
 :root,:host{--mrl-text-input-background: var(--mrl-color-background);--mrl-text-input-background-color-hover: var(--mrl-color-background);--mrl-text-input-background-color-read-only: var(--mrl-black-opacity-00);--mrl-text-input-border-color: rgba(var(--mrl-gray-60), 1);--mrl-text-input-border-width: var(--mrl-line-width-border);--mrl-text-input-border-color-hover: var(--mrl-color-line-hover);--mrl-text-input-border-color-disabled: var(--mrl-color-line-disabled);--mrl-text-input-border-color-read-only: rgba(0, 0, 0, 0%);--mrl-text-input-border-color-focus: var(--mrl-color-line-active);--mrl-text-input-border-radius: var(--mrl-border-radius-functional);--mrl-text-input-color: rgba(var(--mrl-gray-90), 1);--mrl-text-input-color-focus: rgba(var(--mrl-gray-100), 1);--mrl-text-input-color-disabled: var(--mrl-color-text-disabled);--mrl-text-input-color-read-only: var(--mrl-gray-90);--mrl-text-input-height: var(--mrl-spacing-09);--mrl-text-input-placeholder-color: var(--mrl-color-text-secondary);--mrl-text-input-inset-vertical: var(--mrl-space-inset);--mrl-text-input-inset-horizontal: var(--mrl-space-inset-control-small);--mrl-text-input-padding: var(--mrl-text-input-inset-vertical) var(--mrl-text-input-inset-horizontal);--mrl-input-icon-offset: var(--mrl-spacing-03);--mrl-checkbox-height: var(--mrl-spacing-09);--mrl-checkbox-input-affordance: var(--mrl-spacing-08);--mrl-checkbox-input-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));--mrl-checkbox-input-size: var(--mrl-spacing-06);--mrl-checkbox-input-background: var(--mrl-color-background);--mrl-checkbox-input-border-color: rgba(var(--mrl-gray-60), 1);--mrl-checkbox-input-color: var(--mrl-color-text-inverse);--mrl-checkbox-input-border-width: var(--mrl-line-width-control);--mrl-checkbox-input-border-radius: var(--mrl-border-radius-content);--mrl-radio-button-height: var(--mrl-spacing-06);--mrl-radio-button-width: var(--mrl-spacing-06);--mrl-radio-button-fill-size: var(--mrl-spacing-04);--mrl-radio-button-border-color: rgba(var(--mrl-gray-60), 1);--mrl-radio-button-border-width: var(--mrl-line-width-border);--mrl-radio-button-border-radius: var(--mrl-border-radius-rounded);--mrl-radio-button-background: var(--mrl-color-background);--mrl-radio-button-background-selected: var(--mrl-color-background-highlight-selected);--mrl-select-background-color-read-only: var(--mrl-black-opacity-00);--mrl-select-border-color-read-only: rgba(0, 0, 0, 0%)}.mrl-checkbox-input--otHVC:checked~.mrl-checkbox-inputDisplay--n6jnp,.MrlCheckboxStandalone-input--GNHta:checked~.MrlCheckboxStandalone-inputDisplay--ie5bJ,.mrl-checkbox-input--otHVC:indeterminate~.mrl-checkbox-inputDisplay--n6jnp,.MrlCheckboxStandalone-input--GNHta:indeterminate~.MrlCheckboxStandalone-inputDisplay--ie5bJ{--mrl-checkbox-input-background: rgba(var(--mrl-gray-100), 1);--mrl-checkbox-input-border-color: rgba(var(--mrl-gray-100), 1)}:host{--mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));--mrl-select-item-spacing-stack: var(--mrl-spacing-02);--mrl-select-item-text-affordance: calc( var(--mrl-type-line-height-text-small) * var(--mrl-type-size-text-small) )}.MrlTextInput--Clq8M{--mrl-text-input-icon-size: var(--mrl-spacing-06);--mrl-text-input-icon-offset: var(--mrl-input-icon-offset)}.MrlLabel--kpDDL{--mrl-label-text-color: var(--mrl-color-text-label);--mrl-label-font-size: var(--mrl-type-size-text-small);--mrl-label-line-height: var(--mrl-type-line-height-text-small);--mrl-label-font-weight: var(--mrl-type-weight-title-secondary);--mrl-label-offset-vertical: var(--mrl-space-stack-related-small)}.MrlLabel--inline--zKiSM{--mrl-label-offset-vertical: 0;--mrl-label-offset-inline: var(--mrl-space-inline-sibling-xsmall);--mrl-label-icon-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));--mrl-label-icon-size: var(--mrl-spacing-06)}.MrlLabel--kpDDL.mrl-is--disabled--hithx{--mrl-label-text-color: var(--mrl-color-text-disabled)}.MrlLabel--kpDDL{color:var(--mrl-label-text-color);display:block;font-family:var(--mrl-body-font);font-size:var(--mrl-label-font-size);font-weight:var(--mrl-label-font-weight);line-height:var(--mrl-label-line-height);margin-bottom:var(--mrl-label-offset-vertical);padding-left:var(--mrl-text-input-border-width)}.MrlLabel--inline--zKiSM{align-items:center;display:inline-flex;margin-left:var(--mrl-label-offset-inline);padding-left:0}.MrlLabel-icon--Hjqge{height:var(--mrl-label-icon-size);margin:var(--mrl-label-icon-inset) calc(var(--mrl-label-icon-inset) + var(--mrl-label-offset-inline)) var(--mrl-label-icon-inset) var(--mrl-label-icon-inset);width:var(--mrl-label-icon-size)}.MrlSwitch--XCL5G{align-items:center;display:flex;justify-content:space-between}.MrlSwitch-disabled--iS1ZX{color:rgba(var(--mrl-gray-40), 1)}
 .mrl-u-focus-wrapper--Zz4hG{position:relative}.MrlSwitchStandalone-switch--usdmG{background-color:rgba(var(--mrl-gray-80), 1);border-radius:.625rem;cursor:pointer;display:block;height:var(--mrl-spacing-06);width:calc(var(--mrl-spacing-08) + var(--mrl-spacing-02))}@media(prefers-reduced-motion: no-preference){.MrlSwitchStandalone-switch--usdmG{transition:var(--mrl-duration-02)}}.MrlSwitchStandalone-switch-indicator--QRM7_{align-content:center;background-color:var(--mrl-color-background);border-radius:.375rem;bottom:calc(var(--mrl-spacing-03) - var(--mrl-spacing-02));color:var(--mrl-color-background-secondary);display:flex;height:var(--mrl-spacing-04);left:var(--mrl-spacing-02);pointer-events:none;position:absolute;width:var(--mrl-spacing-04)}@media(prefers-reduced-motion: no-preference){.MrlSwitchStandalone-switch-indicator--QRM7_{transition:var(--mrl-duration-02) var(--mrl-timing-m1)}}.MrlSwitchStandalone-switch-indicator--QRM7_ .mrl-svg--jTrfw{height:var(--mrl-spacing-04);pointer-events:none;width:var(--mrl-spacing-04)}.MrlSwitchStandalone--z_J5F{height:100%;position:relative}.MrlSwitchStandalone--z_J5F .MrlSwitchStandalone-checkbox--eQlJK{cursor:pointer;height:var(--mrl-spacing-06);opacity:0;position:absolute;width:calc(var(--mrl-spacing-08) + var(--mrl-spacing-02))}.MrlSwitchStandalone-checkbox--eQlJK:hover+.MrlSwitchStandalone-switch--usdmG{background-color:rgba(var(--mrl-gray-90), 1)}.MrlSwitchStandalone-checkbox--eQlJK:active+.MrlSwitchStandalone-switch--usdmG{background-color:rgba(var(--mrl-gray-100), 1)}.MrlSwitchStandalone-checkbox--eQlJK:disabled+.MrlSwitchStandalone-switch--usdmG,.MrlSwitchStandalone-checkbox--eQlJK:disabled:hover+.MrlSwitchStandalone-switch--usdmG{background-color:rgba(var(--mrl-gray-40), 1)}.MrlSwitchStandalone-checkbox--eQlJK:disabled~.MrlSwitchStandalone-switch-indicator--QRM7_{color:rgba(var(--mrl-gray-40), 1)}.MrlSwitchStandalone-checkbox--eQlJK:focus-visible+.MrlSwitchStandalone-switch--usdmG::after{animation-duration:var(--mrl-duration-03);animation-fill-mode:forwards;animation-iteration-count:1;animation-name:border-animation--K5EQd;animation-timing-function:var(--mrl-timing-m2);border:var(--mrl-line-width-focus) solid rgba(0,0,0,0);border-radius:calc(var(--mrl-border-radius-functional) + var(--mrl-line-width-focus) + var(--mrl-space-offset-focus));bottom:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);content:"";display:block;left:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);position:absolute;right:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);top:calc((var(--mrl-space-offset-focus) + var(--mrl-line-width-focus) + 0px)*-1);z-index:1}@keyframes border-animation--K5EQd{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus)}}@keyframes border-animation-inverse--J3M_h{0%{border-color:rgba(0,0,0,0)}100%{border-color:var(--mrl-color-focus-inverse)}}.MrlSwitchStandalone-checkbox--eQlJK[aria-checked=true]+.MrlSwitchStandalone-switch--usdmG{background-color:rgba(var(--mrl-blue-70), 1)}.MrlSwitchStandalone-checkbox--eQlJK[aria-checked=true]~.MrlSwitchStandalone-switch-indicator--QRM7_{color:rgba(var(--mrl-blue-70), 1);transform:translateX(calc(var(--mrl-spacing-08) - var(--mrl-spacing-05)))}.MrlSwitchStandalone-checkbox--eQlJK[aria-checked=true]:hover+.MrlSwitchStandalone-switch--usdmG{background-color:rgba(var(--mrl-blue-80), 1)}.MrlSwitchStandalone-checkbox--eQlJK[aria-checked=true]:active+.MrlSwitchStandalone-switch--usdmG{background-color:rgba(var(--mrl-blue-90), 1)}.MrlSwitchStandalone-checkbox--eQlJK[aria-checked=true]:disabled+.MrlSwitchStandalone-switch--usdmG,.MrlSwitchStandalone-checkbox--eQlJK[aria-checked=true]:disabled:hover+.MrlSwitchStandalone-switch--usdmG{background-color:rgba(var(--mrl-gray-40), 1)}
+.mrl-u-focus-wrapper--lYeyb{position:relative}.MrlForm-counter--RecKb{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-xxsmall);font-weight:var(--mrl-type-weight-text);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-text-xxsmall);color:rgba(var(--mrl-gray-80), 1);display:block;margin-top:var(--mrl-spacing-02);text-align:right;width:100%}:root,:host{--mrl-text-input-background: var(--mrl-color-background);--mrl-text-input-background-color-hover: var(--mrl-color-background);--mrl-text-input-background-color-read-only: var(--mrl-black-opacity-00);--mrl-text-input-border-color: rgba(var(--mrl-gray-60), 1);--mrl-text-input-border-width: var(--mrl-line-width-border);--mrl-text-input-border-color-hover: var(--mrl-color-line-hover);--mrl-text-input-border-color-disabled: var(--mrl-color-line-disabled);--mrl-text-input-border-color-read-only: rgba(0, 0, 0, 0%);--mrl-text-input-border-color-focus: var(--mrl-color-line-active);--mrl-text-input-border-radius: var(--mrl-border-radius-functional);--mrl-text-input-color: rgba(var(--mrl-gray-90), 1);--mrl-text-input-color-focus: rgba(var(--mrl-gray-100), 1);--mrl-text-input-color-disabled: var(--mrl-color-text-disabled);--mrl-text-input-color-read-only: var(--mrl-gray-90);--mrl-text-input-height: var(--mrl-spacing-09);--mrl-text-input-placeholder-color: var(--mrl-color-text-secondary);--mrl-text-input-inset-vertical: var(--mrl-space-inset);--mrl-text-input-inset-horizontal: var(--mrl-space-inset-control-small);--mrl-text-input-padding: var(--mrl-text-input-inset-vertical) var(--mrl-text-input-inset-horizontal);--mrl-input-icon-offset: var(--mrl-spacing-03);--mrl-checkbox-height: var(--mrl-spacing-09);--mrl-checkbox-input-affordance: var(--mrl-spacing-08);--mrl-checkbox-input-inset: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));--mrl-checkbox-input-size: var(--mrl-spacing-06);--mrl-checkbox-input-background: var(--mrl-color-background);--mrl-checkbox-input-border-color: rgba(var(--mrl-gray-60), 1);--mrl-checkbox-input-color: var(--mrl-color-text-inverse);--mrl-checkbox-input-border-width: var(--mrl-line-width-control);--mrl-checkbox-input-border-radius: var(--mrl-border-radius-content);--mrl-radio-button-height: var(--mrl-spacing-06);--mrl-radio-button-width: var(--mrl-spacing-06);--mrl-radio-button-fill-size: var(--mrl-spacing-04);--mrl-radio-button-border-color: rgba(var(--mrl-gray-60), 1);--mrl-radio-button-border-width: var(--mrl-line-width-border);--mrl-radio-button-border-radius: var(--mrl-border-radius-rounded);--mrl-radio-button-background: var(--mrl-color-background);--mrl-radio-button-background-selected: var(--mrl-color-background-highlight-selected);--mrl-select-background-color-read-only: var(--mrl-black-opacity-00);--mrl-select-border-color-read-only: rgba(0, 0, 0, 0%)}.mrl-checkbox-input--LZVKE:checked~.mrl-checkbox-inputDisplay--kmfBZ,.MrlCheckboxStandalone-input--ZJuLE:checked~.MrlCheckboxStandalone-inputDisplay--DbFyR,.mrl-checkbox-input--LZVKE:indeterminate~.mrl-checkbox-inputDisplay--kmfBZ,.MrlCheckboxStandalone-input--ZJuLE:indeterminate~.MrlCheckboxStandalone-inputDisplay--DbFyR{--mrl-checkbox-input-background: rgba(var(--mrl-gray-100), 1);--mrl-checkbox-input-border-color: rgba(var(--mrl-gray-100), 1)}:host{--mrl-select-item-padding-vertical: calc(var(--mrl-spacing-01) + var(--mrl-spacing-02));--mrl-select-item-spacing-stack: var(--mrl-spacing-02);--mrl-select-item-text-affordance: calc( var(--mrl-type-line-height-text-small) * var(--mrl-type-size-text-small) )}.MrlDatePicker--container--RP6Y4{width:fit-content}.MrlDatePicker--XlHsm{font-family:var(--mrl-body-font);font-size:var(--mrl-type-size-text-small);font-weight:var(--mrl-type-weight-text);letter-spacing:var(--mrl-type-spacing-text);line-height:var(--mrl-type-line-height-text-small);background:var(--mrl-text-input-background);border-color:var(--mrl-text-input-border-color);border-radius:var(--mrl-text-input-border-radius);border-style:solid;border-width:var(--mrl-text-input-border-width);color:var(--mrl-text-input-color);margin:0;min-height:var(--mrl-text-input-height);padding:var(--mrl-text-input-inset-vertical) var(--mrl-text-input-inset-horizontal);transition:background-color var(--mrl-duration-03) var(--mrl-timing-m2),border-color var(--mrl-duration-03) var(--mrl-timing-m2),color var(--mrl-duration-03) var(--mrl-timing-m2);width:100%;height:var(--mrl-spacing-09);width:17.5rem}.MrlDatePicker--XlHsm::placeholder{color:var(--mrl-text-input-placeholder-color)}.MrlDatePicker--XlHsm:hover{--mrl-text-input-border-color: var(--mrl-text-input-border-color-hover);--mrl-text-input-background: var(--mrl-text-input-background-color-hover)}.MrlDatePicker--XlHsm:focus{--mrl-text-input-border-color: var(--mrl-text-input-border-color-focus);color:var(--mrl-text-input-color-focus)}.MrlDatePicker--XlHsm:focus-visible{outline:none}.MrlDatePicker--XlHsm:disabled{--mrl-text-input-border-color: var(--mrl-text-input-border-color-disabled);color:var(--mrl-text-input-color-disabled);pointer-events:none}.MrlDatePicker--XlHsm:disabled::placeholder{color:var(--mrl-text-input-color-disabled)}.MrlDatePicker--XlHsm[aria-invalid=true]{border-color:var(--mrl-color-background-error)}.MrlDatePicker--XlHsm:not(:disabled):read-only{--mrl-text-input-background: var(--mrl-text-input-background-color-read-only);--mrl-text-input-border-color: var(--mrl-text-input-border-color-read-only);color:var(--mrl-text-input-color-read-only)}.MrlDatePicker--XlHsm:focus-visible{outline:var(--mrl-line-width-focus) solid var(--mrl-color-focus);outline-offset:var(--mrl-space-offset-focus)}.MrlDatePicker--XlHsm[type=date]::-webkit-calendar-picker-indicator{opacity:0}.MrlDatePicker--active--k2AUt{border-color:var(--mrl-text-input-border-color-hover)}.MrlDatePicker--icon--NjiU_{color:var(--mrl-text-input-border-color);display:flex;pointer-events:none;position:absolute;right:var(--mrl-spacing-03);top:var(--mrl-spacing-03)}.MrlDatePicker--icon-active--Dr0mh{color:var(--mrl-text-input-border-color-hover)}
 
 /*!
  * Bootstrap Grid v5.1.3 (https://getbootstrap.com/)

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@muraldevkit/ui-toolkit",
-	"version": "4.20.1",
+	"version": "4.22.0",
 	"description": "Mural's UI Toolkit",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",
@@ -135,7 +135,8 @@
 		"lodash.isequal": "4.4.0",
 		"path-browserify": "1.0.1",
 		"react": ">=16.9",
-		"react-dom": ">=16.9"
+		"react-dom": ">=16.9",
+		"react-select": "5.8.2"
 	},
 	"lint-staged": {
 		"src/**": "prettier --ignore-unknown --write",