@grantbii/design-system 1.0.71 → 1.0.72

package/core/atoms/Badge.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import { Colors, Icons } from "../foundations";
+import { Colors, Icons, Responsive, Typography } from "../foundations";
 const Badge = ({ text, Icon, iconSize = 20, iconWeight = "regular", onClickClose, textWidthPixels, backgroundColor, color, }) => (_jsxs(BaseBadge, { "$backgroundColor": backgroundColor, "$color": color, children: [_jsxs(BadgeContent, { "$isCloseable": !!onClickClose, "$widthPixels": textWidthPixels, children: [Icon ? (_jsx(IconContainer, { children: _jsx(Icon, { color: color, size: iconSize, weight: iconWeight }) })) : (_jsx(_Fragment, {})), _jsx(BadgeText, { children: text })] }), onClickClose ? (_jsx(Button, { type: "button", onClick: onClickClose, children: _jsx(Icons.XIcon, { size: 12 }) })) : (_jsx(_Fragment, {}))] }));
 export default Badge;
 const BaseBadge = styled.div `
@@ -38,7 +38,14 @@ const BadgeText = styled.p `
   text-overflow: ellipsis;
 
   font-weight: 500;
-  font-size: 14px;
+
+  @media (width < ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${Typography.HELPER_FONT_SIZES.small};
+  }
+
+  @media (width >= ${Responsive.WIDTH_BREAKPOINTS.laptop}) {
+    font-size: ${Typography.HELPER_FONT_SIZES.big};
+  }
 `;
 const Button = styled.button `
   display: flex;

package/core/atoms/Checkbox.js

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { LabelInput } from "./shared";
+import { LabelledInput } from "./shared";
 const Checkbox = (_a) => {
     var { id, label, labelBefore = false } = _a, checkboxProps = __rest(_a, ["id", "label", "labelBefore"]);
-    return (_jsxs(LabelInput, { children: [labelBefore ? _jsx("label", { htmlFor: `${id}-checkbox`, children: label }) : _jsx(_Fragment, {}), _jsx("input", Object.assign({}, checkboxProps, { id: `${id}-checkbox`, type: "checkbox" })), labelBefore ? _jsx(_Fragment, {}) : _jsx("label", { htmlFor: `${id}-checkbox`, children: label })] }));
+    return (_jsxs(LabelledInput, { children: [labelBefore ? _jsx("label", { htmlFor: `${id}-checkbox`, children: label }) : _jsx(_Fragment, {}), _jsx("input", Object.assign({}, checkboxProps, { id: `${id}-checkbox`, type: "checkbox" })), labelBefore ? _jsx(_Fragment, {}) : _jsx("label", { htmlFor: `${id}-checkbox`, children: label })] }));
 };
 export default Checkbox;

package/core/atoms/RadioButton.js

@@ -11,9 +11,9 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { LabelInput } from "./shared";
+import { LabelledInput } from "./shared";
 const RadioButton = (_a) => {
     var { id, label } = _a, radioButtonProps = __rest(_a, ["id", "label"]);
-    return (_jsxs(LabelInput, { children: [_jsx("input", Object.assign({}, radioButtonProps, { id: `${id}-radio-button`, type: "radio" })), _jsx("label", { htmlFor: `${id}-radio-button`, children: label })] }));
+    return (_jsxs(LabelledInput, { children: [_jsx("input", Object.assign({}, radioButtonProps, { id: `${id}-radio-button`, type: "radio" })), _jsx("label", { htmlFor: `${id}-radio-button`, children: label })] }));
 };
 export default RadioButton;

package/core/atoms/shared.d.ts

@@ -4,4 +4,4 @@ export declare const BaseButton: import("styled-components/dist/types").IStyledC
     $color?: string;
     $width?: string;
 }>> & string;
-export declare const LabelInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const LabelledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/core/atoms/shared.js

@@ -19,7 +19,7 @@ export const BaseButton = styled.div `
   color: ${({ $color = Colors.typography.whiteHigh }) => $color};
   background-color: ${({ $underline = false, $backgroundColor = Colors.main.grantbiiBlue, }) => ($underline ? "transparent" : $backgroundColor)};
 `;
-export const LabelInput = styled.div `
+export const LabelledInput = styled.div `
   display: flex;
   align-items: center;
   gap: 8px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.71",
+  "version": "1.0.72",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {