@linzjs/lui 21.40.1 → 21.40.3

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [21.40.3](https://github.com/linz/lui/compare/v21.40.2...v21.40.3) (2024-07-17)
+
+
+### Bug Fixes
+
+* trigger release for switch button style change ([#1143](https://github.com/linz/lui/issues/1143)) ([7cf3f50](https://github.com/linz/lui/commit/7cf3f50f93ef3eac919ba7b24f72e1581c246424))
+
 ## [21.40.1](https://github.com/linz/lui/compare/v21.40.0...v21.40.1) (2024-07-16)
 
 

package/dist/index.js

@@ -47019,14 +47019,14 @@ var LuiSidePanelProvider = function (_a) {
         React__default["default"].createElement(LuiSidePanelContainer, __assign({}, props))));
 };
 
-var css_248z$g = ".lui-switch-checkbox {\n  height: 0;\n  width: 0;\n  visibility: hidden;\n}\n\n.lui-switch-label {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  cursor: pointer;\n  width: 40px;\n  height: 20px;\n  background: grey;\n  border-radius: 40px;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.lui-switch-label .lui-switch-button {\n  content: \"\";\n  position: absolute;\n  top: 2px;\n  left: 2px;\n  width: 18px;\n  height: 16px;\n  border-radius: 18px;\n  transition: 0.2s;\n  background: #fff;\n  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-checkbox:checked + .lui-switch-label .lui-switch-button {\n  left: calc(100% - 2px);\n  transform: translateX(-100%);\n}\n\n.lui-switch-label:active .lui-switch-button {\n  width: 20px;\n}";
+var css_248z$g = ".lui-switch-checkbox {\n  height: 0;\n  width: 0;\n  visibility: hidden;\n}\n\n.lui-switch-label {\n  display: flex;\n  align-items: center;\n  cursor: pointer;\n  width: 40px;\n  padding: 2px;\n  background: #ffffff;\n  border: 1px solid #007198;\n  border-radius: 40px;\n  position: relative;\n  transition: background-color 0.2s;\n}\n\n.lui-switch-label .lui-switch-button {\n  content: \"\";\n  position: relative;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  transition: 0.2s;\n  background: #007198;\n  box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29);\n}\n\n.lui-switch-label-checked {\n  background: #007198;\n}\n.lui-switch-label-checked .lui-switch-button {\n  transform: translateX(20px);\n  background: #ffffff;\n}\n\n.lui-switch-checkbox:disabled + .lui-switch-label {\n  border: 1px solid #989189;\n  background: #eaeaea;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label .lui-switch-button {\n  background: #989189;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label-checked {\n  background: #989189;\n}\n.lui-switch-checkbox:disabled + .lui-switch-label-checked .lui-switch-button {\n  background: #eaeaea;\n}";
 styleInject(css_248z$g);
 
 var LuiSwitchButton = function (props) {
     var generatedId = useGenerateOrDefaultId();
     return (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement("input", __assign({ className: "lui-switch-checkbox", type: "checkbox", "data-testid": 'lui-switch-new', id: generatedId }, props)),
-        React__default["default"].createElement("label", { "data-testid": "label", style: { background: props.checked ? '#007198' : 'gray' }, className: "lui-switch-label", htmlFor: generatedId },
+        React__default["default"].createElement("label", { "data-testid": "label", className: clsx('lui-switch-label', props.checked ? 'lui-switch-label-checked' : null), htmlFor: generatedId },
             React__default["default"].createElement("span", { className: "lui-switch-button" }))));
 };