@team-monolith/cds 0.4.3 → 0.4.5

package/dist/components/Banner.js

@@ -50,7 +50,7 @@ var Banner = React.forwardRef(function (props, ref) {
             css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n            box-sizing: border-box;\n            display: flex;\n            align-items: center;\n            color: ", ";\n            line-height: 125%;\n          "], ["\n            box-sizing: border-box;\n            display: flex;\n            align-items: center;\n            color: ", ";\n            line-height: 125%;\n          "])), COLOR.white),
             COLOR_TO_STYLE(theme, color),
             fullWidth
-                ? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                width: 100%;\n              "], ["\n                width: 100%;\n              "]))) : css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                border-radius: 12px;\n                width: fit-content;\n                min-width: 343px;\n              "], ["\n                border-radius: 12px;\n                width: fit-content;\n                min-width: 343px;\n              "]))),
+                ? css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n                width: 100%;\n              "], ["\n                width: 100%;\n              "]))) : css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n                border-radius: 12px;\n                width: fit-content;\n              "], ["\n                border-radius: 12px;\n                width: fit-content;\n              "]))),
         ] }, { children: [icon && _jsx(IconDiv, { children: icon }), _jsxs(TextContainer, __assign({ setPaddingRight: !close && !buttonLabel }, { children: [headline && _jsx(HeadlineDiv, { children: headline }), content && _jsx("div", { children: content })] })), buttonLabel && (_jsx(BannerButton, __assign({ onClick: onButtonClick }, { children: buttonLabel }))), close && (_jsx(CloseButton, __assign({ onClick: onClose }, { children: _jsx(StyledCloseFillIcon, {}) })))] })));
 });
 var StyledCloseFillIcon = styled(CloseFillIcon)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: block;\n  padding: 14px;\n  width: 20px;\n  height: 20px;\n\n  color: currentColor;\n"], ["\n  display: block;\n  padding: 14px;\n  width: 20px;\n  height: 20px;\n\n  color: currentColor;\n"])));

package/dist/components/Input.js

@@ -54,7 +54,7 @@ var Input = React.forwardRef(function (props, ref) {
     var _className = props.className, inputBaseProps = __rest(props, ["className"]);
     return (_jsxs(InputWrapper, __assign({ className: props.className, size: props.size, fullWidth: props.fullWidth, ref: ref }, other, { children: [label ? (_jsxs(Label, __assign({ disabled: props.disabled }, { children: [label, " ", _jsx(InputBase, __assign({}, inputBaseProps))] }))) : (_jsx(InputBase, __assign({}, inputBaseProps))), hintText && (_jsxs(Hint, __assign({ color: props.color, disabled: props.disabled }, { children: [hintIcon, hintText] })))] })));
 });
-var InputWrapper = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: inline-flex;\n  flex-direction: column;\n  gap: 8px;\n  ", "\n  ", "\n\n  position: relative;\n"], ["\n  display: inline-flex;\n  flex-direction: column;\n  gap: 8px;\n  ", "\n  ", "\n\n  position: relative;\n"])), function (_a) {
+var InputWrapper = styled.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  ", "\n  ", "\n\n  position: relative;\n"], ["\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  ", "\n  ", "\n\n  position: relative;\n"])), function (_a) {
     var size = _a.size;
     return SIZE_TO_FONT_STYLES(size);
 }, function (_a) {

package/dist/components/InputBase.js

@@ -29,20 +29,20 @@ var COLOR_TO_INPUT_STYLES = function (theme, color, disabled) {
         activeSuccess: css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      border: 2px solid ", ";\n      background: ", ";\n      color: ", ";\n    "], ["\n      border: 2px solid ", ";\n      background: ", ";\n      color: ", ";\n    "])), theme.color.foreground.success, theme.color.background.neutralBase, theme.color.foreground.neutralBase),
     }[color];
 };
-var SIZE_TO_STYLES = function (size) {
+var SIZE_TO_STYLES = function (size, fullWidth) {
     return ({
-        small: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n      width: 300px;\n      height: 36px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n      width: 300px;\n      height: 36px;\n    "]))),
-        medium: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: 12px;\n      padding-bottom: 12px;\n      width: 375px;\n      height: 48px;\n    "], ["\n      padding-top: 12px;\n      padding-bottom: 12px;\n      width: 375px;\n      height: 48px;\n    "]))),
-        large: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-top: 14px;\n      padding-bottom: 14px;\n      width: 375px;\n      height: 56px;\n    "], ["\n      padding-top: 14px;\n      padding-bottom: 14px;\n      width: 375px;\n      height: 56px;\n    "]))),
+        small: css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n      padding-top: 8px;\n      padding-bottom: 8px;\n      ", ";\n      height: 36px;\n    "], ["\n      padding-top: 8px;\n      padding-bottom: 8px;\n      ", ";\n      height: 36px;\n    "])), !fullWidth && "max-width: 300px"),
+        medium: css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n      padding-top: 12px;\n      padding-bottom: 12px;\n      ", ";\n      height: 48px;\n    "], ["\n      padding-top: 12px;\n      padding-bottom: 12px;\n      ", ";\n      height: 48px;\n    "])), !fullWidth && "max-width: 375px"),
+        large: css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n      padding-top: 14px;\n      padding-bottom: 14px;\n      ", ";\n      height: 56px;\n    "], ["\n      padding-top: 14px;\n      padding-bottom: 14px;\n      ", ";\n      height: 56px;\n    "])), !fullWidth && "max-width: 375px"),
     }[size]);
 };
 export function InputBase(props) {
     var className = props.className, color = props.color, size = props.size, placeholder = props.placeholder, _a = props.disabled, disabled = _a === void 0 ? false : _a, startIcon = props.startIcon, startLabel = props.startLabel, endLabel = props.endLabel, endIcon = props.endIcon, inputProps = props.inputProps, inputRef = props.inputRef, _b = props.fullWidth, fullWidth = _b === void 0 ? false : _b, onChange = props.onChange, onClear = props.onClear, defaultValue = props.defaultValue, value = props.value;
-    return (_jsxs(InputContainer, __assign({ className: className, disabled: disabled, color: color, inputSize: size, fullWidth: fullWidth }, { children: [startIcon, startLabel && _jsx("span", { children: startLabel }), _jsx(StyledInput, __assign({}, inputProps, { ref: inputRef, onChange: onChange, placeholder: placeholder, disabled: disabled, defaultValue: defaultValue, value: value })), endLabel && _jsx("span", { children: endLabel }), endIcon, onClear && (_jsx(ClearButton, __assign({ onClick: onClear, disabled: disabled, tabIndex: -1 }, { children: _jsx(CloseCircleFillIcon, {}) })))] })));
+    return (_jsxs(InputContainer, __assign({ className: className, disabled: disabled, color: color, inputSize: size, fullWidth: fullWidth }, { children: [startIcon, startLabel && _jsx("span", { children: startLabel }), _jsx(StyledInput, __assign({}, inputProps, { ref: inputRef, onChange: onChange, placeholder: placeholder, disabled: disabled, defaultValue: defaultValue, value: value })), endLabel && _jsx("span", { children: endLabel }), endIcon, onClear && (_jsx(ClearButton, __assign({ type: "button", onClick: onClear, disabled: disabled, tabIndex: -1 }, { children: _jsx(CloseCircleFillIcon, {}) })))] })));
 }
 var InputContainer = styled.div(function (_a) {
     var theme = _a.theme, color = _a.color, inputSize = _a.inputSize, disabled = _a.disabled, fullWidth = _a.fullWidth;
-    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    box-sizing: border-box;\n    padding: 14px 16px;\n    border-radius: 8px;\n    ", "\n    ", "\n    ", " // InputWrapper\uC758 width\uB97C \uB530\uB985\uB2C8\uB2E4.\n  "], ["\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    box-sizing: border-box;\n    padding: 14px 16px;\n    border-radius: 8px;\n    ", "\n    ", "\n    ", " // InputWrapper\uC758 width\uB97C \uB530\uB985\uB2C8\uB2E4.\n  "])), COLOR_TO_INPUT_STYLES(theme, color, disabled), SIZE_TO_STYLES(inputSize), fullWidth && "width: inherit;");
+    return css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    box-sizing: border-box;\n    padding: 14px 16px;\n    border-radius: 8px;\n    ", "\n    ", "\n    ", " // InputWrapper\uC758 width\uB97C \uB530\uB985\uB2C8\uB2E4.\n  "], ["\n    display: flex;\n    align-items: center;\n    gap: 16px;\n\n    box-sizing: border-box;\n    padding: 14px 16px;\n    border-radius: 8px;\n    ", "\n    ", "\n    ", " // InputWrapper\uC758 width\uB97C \uB530\uB985\uB2C8\uB2E4.\n  "])), COLOR_TO_INPUT_STYLES(theme, color, disabled), SIZE_TO_STYLES(inputSize, fullWidth), fullWidth && "width: inherit;");
 });
 var StyledInput = styled.input(function (_a) {
     var theme = _a.theme;

package/dist/index.d.ts

@@ -1,5 +1,3 @@
-/// <reference path="../@types/svg.d.ts" />
-/// <reference path="../@types/emotion.d.ts" />
 export * from "./components/AlertDialog";
 export { default as Banner } from "./components/Banner";
 export * from "./components/Banner";

package/dist/index.js

@@ -1,5 +1,3 @@
-/// <reference path="../../@types/svg.d.ts" />
-/// <reference path="../../@types/emotion.d.ts" />
 export * from "./components/AlertDialog";
 export { default as Banner } from "./components/Banner";
 export * from "./components/Banner";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@team-monolith/cds",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "dependencies": {
@@ -16,8 +16,7 @@
     "typescript": "^4.5.5"
   },
   "files": [
-    "dist/**/*",
-    "@types/**/*"
+    "dist/**/*"
   ],
   "scripts": {
     "clean": "rimraf dist",

package/@types/emotion.d.ts

@@ -1,70 +0,0 @@
-import "@emotion/react";
-
-interface CodleColors {
-  background: {
-    neutralBase: string;
-    neutralAlt: string;
-    neutralAltActive: string;
-    neutralAltDisabled: string;
-    primary: string;
-    primaryActive: string;
-    primaryDisabled: string;
-    secondary: string;
-    secondaryActive: string;
-    secondaryDisabled: string;
-    danger: string;
-    dangerActive: string;
-    dangerDisabled: string;
-    success: string;
-    successActive: string;
-    successDisabled: string;
-    info: string;
-    infoActive: string;
-    infoDisabled: string;
-    warning: string;
-    warningActive: string;
-    warningDisabled: string;
-  };
-  foreground: {
-    neutralBase: string;
-    neutralBaseDisabled: string;
-    neutralAlt: string;
-    neutralAltDisabled: string;
-    primary: string;
-    primaryDisabled: string;
-    secondary: string;
-    secondaryDisabled: string;
-    danger: string;
-    dangerDisabled: string;
-    success: string;
-    successDisabled: string;
-    info: string;
-    infoDisabled: string;
-    warning: string;
-    warningDisabled: string;
-  };
-  container: {
-    primaryContainer: string;
-    primaryOnContainer: string;
-    secondaryContainer: string;
-    secondaryOnContainer: string;
-    dangerContainer: string;
-    dangerOnContainer: string;
-    successContainer: string;
-    successOnContainer: string;
-    infoContainer: string;
-    infoOnContainer: string;
-    warningContainer: string;
-    warningOnContainer: string;
-    obsidianContainer: string;
-    obsidianOnContainer: string;
-    marbleContainer: string;
-    marbleOnContainer: string;
-  };
-}
-
-declare module "@emotion/react" {
-  export interface Theme {
-    color: CodleColors;
-  }
-}

package/@types/svg.d.ts

@@ -1,10 +0,0 @@
-declare module "*.svg" {
-  import * as React from "react";
-
-  export const ReactComponent: React.FunctionComponent<
-    React.SVGProps<SVGSVGElement> & { title?: string }
-  >;
-
-  const src: string;
-  export default src;
-}