@hexure/ui 1.14.11 → 1.14.13

package/dist/cjs/index.js

@@ -3563,7 +3563,9 @@ const Wrapper$c = styled.label `
   margin-left: -6px;
   cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
   display: flex;
-  align-items: center;
+  flex-direction: ${props => (props.$labelLoc === 'Bottom' ? 'column' : 'row')};
+  align-items: ${props => (props.$labelLoc === 'Bottom' ? 'center' : 'center')};
+  justify-content: ${props => (props.$labelLoc === 'Bottom' ? 'center' : 'flex-start')};
   font-size: ${FontSizes.DEFAULT};
   line-height: 1.6em;
   box-sizing: border-box;
@@ -3655,16 +3657,19 @@ const Label$3 = styled.span `
   font-weight: ${props => (props.$isLabelBold ? 'bold' : '400')};
   line-height: 1.6em;
   color: ${props => props.color || Colors.BLACK.Hex};
-  margin-left: 6px;
+  margin-left: ${props => (props.$labelLoc === 'Bottom' ? '0' : '6px')};
+  margin-top: ${props => (props.$labelLoc === 'Bottom' ? '6px' : '0')};
   box-sizing: border-box;
+  width: 100%;
+  text-align: ${props => (props.$labelLoc === 'Bottom' ? 'center' : 'left')};
 `;
 const Checkbox = (_a) => {
-    var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false, dataSectionName, isLabelBold = false } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError", "dataSectionName", "isLabelBold"]);
+    var { children, color, disabled, checked, onChange, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false, dataSectionName, isLabelBold = false, labelLoc = 'Right' } = _a, accessibleProps = __rest(_a, ["children", "color", "disabled", "checked", "onChange", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError", "dataSectionName", "isLabelBold", "labelLoc"]);
     const baseId = dataItemid || 'checkbox';
-    return (React.createElement(Wrapper$c, Object.assign({ "$disabled": disabled }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+    return (React.createElement(Wrapper$c, Object.assign({ "$disabled": disabled, "$labelLoc": labelLoc }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
         React.createElement(Input$2, { "$invalid": invalid, checked: checked, "data-itemid": `${baseId}-input`, "data-section-name": dataSectionName, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'checkbox' }),
         React.createElement(Check$1, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "data-itemid": `${baseId}-check` }),
-        children ? (React.createElement(Label$3, { "$isLabelBold": isLabelBold, color: color, "data-itemid": `${baseId}-label` },
+        children ? (React.createElement(Label$3, { "$isLabelBold": isLabelBold, "$labelLoc": labelLoc, color: color, "data-itemid": `${baseId}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)) : null));
 };
@@ -6202,7 +6207,9 @@ const Wrapper$2 = styled.label `
   margin-left: -6px;
   cursor: ${props => (props.$disabled ? 'default' : 'pointer')};
   display: flex;
-  align-items: center;
+  flex-direction: ${props => (props.$labelLoc === 'Bottom' ? 'column' : 'row')};
+  align-items: ${props => (props.$labelLoc === 'Bottom' ? 'center' : 'center')};
+  justify-content: ${props => (props.$labelLoc === 'Bottom' ? 'center' : 'flex-start')};
   font-size: ${FontSizes.DEFAULT};
   line-height: 1.6em;
   box-sizing: border-box;
@@ -6274,11 +6281,11 @@ const Check = styled.span `
   background-color: ${props => getBackgroundColor(props)};
   box-sizing: border-box;
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   &:after {
     content: '';
-    position: absolute;
-    top: 2px;
-    left: 2px;
     width: 9px;
     height: 9px;
     border-radius: 50%;
@@ -6292,15 +6299,18 @@ const Label = styled.span `
   font-weight: ${props => (props.$isLabelBold ? 'bold' : '400')};
   color: ${Colors.BLACK.Hex};
   line-height: 1.6em;
-  margin-left: 6px;
+  margin-left: ${props => (props.$labelLoc === 'Bottom' ? '0' : '6px')};
+  margin-top: ${props => (props.$labelLoc === 'Bottom' ? '6px' : '0')};
+  width: 100%;
+  text-align: ${props => (props.$labelLoc === 'Bottom' ? 'center' : 'left')};
 `;
 const Radio = (_a) => {
-    var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false, isLabelBold = false } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError", "isLabelBold"]);
+    var { children, disabled, checked, onChange, value, invalid, tooltip, tabIndex, dataItemid, isInvalidRedBackground = false, isWarningError = false, isLabelBold = false, labelLoc = 'Right' } = _a, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange", "value", "invalid", "tooltip", "tabIndex", "dataItemid", "isInvalidRedBackground", "isWarningError", "isLabelBold", "labelLoc"]);
     const baseId = dataItemid || 'radio';
-    return (React.createElement(Wrapper$2, Object.assign({}, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
+    return (React.createElement(Wrapper$2, Object.assign({ "$disabled": disabled, "$labelLoc": labelLoc }, accessibleProps, { "data-itemid": `${baseId}-wrapper` }),
         React.createElement(Input, { "$invalid": invalid, checked: checked, "data-itemid": `${baseId}-input`, disabled: disabled, name: accessibleProps.name, onChange: disabled ? undefined : onChange, tabIndex: disabled ? -1 : tabIndex, type: 'radio', value: value }),
         React.createElement(Check, { "$invalid": invalid, "$isInvalidRedBackground": isInvalidRedBackground, "$isWarningError": isWarningError, "data-itemid": `${baseId}-check` }),
-        React.createElement(Label, { "$isLabelBold": isLabelBold, "data-itemid": `${baseId}-label` },
+        React.createElement(Label, { "$isLabelBold": isLabelBold, "$labelLoc": labelLoc, "data-itemid": `${baseId}-label` },
             children,
             tooltip ? React.createElement(Tooltip, Object.assign({}, tooltip)) : null)));
 };