@remember-web/primitive 0.2.12 → 0.2.14

package/dist/src/Labels/Label/styles.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Labels/Label/styles.ts"],"sourcesContent":["import {\n  contents000,\n  contents100,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport type { LabelProps } from './types';\n\ninterface LabelContainerProps {\n  $size: LabelProps['size'];\n  $direction: LabelProps['direction'];\n  $gap: LabelProps['gap'];\n  $width: LabelProps['width'];\n}\nexport const LabelContainer = styled.label<LabelContainerProps>`\n  display: flex;\n  position: relative;\n  width: ${({ $width = 'auto' }) => $width};\n  min-width: min-content; \n\n  ${({ $size, $gap }) => {\n    const defaultGap = $size === 'large' ? '12px' : '8px';\n    const finalGap = $gap !== undefined ? `${$gap}px` : defaultGap;\n\n    return css`\n      gap: ${finalGap};\n    `;\n  }}\n\n  ${({ $direction = 'top' }) => {\n    switch ($direction) {\n      // Top variations\n      case 'top':\n        return css`\n          flex-direction: column;\n          align-items: flex-start;\n        `;\n      case 'top-left':\n        return css`\n          flex-direction: column;\n          align-items: flex-start;\n        `;\n      case 'top-right':\n        return css`\n          flex-direction: column;\n          align-items: flex-end;\n        `;\n      case 'top-center':\n        return css`\n          flex-direction: column;\n          align-items: center;\n        `;\n\n      // Bottom variations\n      case 'bottom':\n        return css`\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        `;\n      case 'bottom-left':\n        return css`\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        `;\n      case 'bottom-right':\n        return css`\n          flex-direction: column-reverse;\n          align-items: flex-end;\n        `;\n      case 'bottom-center':\n        return css`\n          flex-direction: column-reverse;\n          align-items: center;\n        `;\n\n      // Left variations\n      case 'left':\n        return css`\n          flex-direction: row;\n          align-items: center;\n        `;\n      case 'left-top':\n        return css`\n          flex-direction: row;\n          align-items: flex-start;\n        `;\n      case 'left-bottom':\n        return css`\n          flex-direction: row;\n          align-items: flex-end;\n        `;\n      case 'left-center':\n        return css`\n          flex-direction: row;\n          align-items: center;\n        `;\n\n      // Right variations\n      case 'right':\n        return css`\n          flex-direction: row-reverse;\n          align-items: center;\n        `;\n      case 'right-top':\n        return css`\n          flex-direction: row-reverse;\n          align-items: flex-start;\n        `;\n      case 'right-bottom':\n        return css`\n          flex-direction: row-reverse;\n          align-items: flex-end;\n        `;\n      case 'right-center':\n        return css`\n          flex-direction: row-reverse;\n          align-items: center;\n        `;\n    }\n  }}\n\n  /* Size styles */\n   ${({ $size }) => {\n     switch ($size) {\n       case 'small':\n         return css`\n          ${getTypographyStyles('UIBody2')}\n          color: ${contents100};\n        `;\n       case 'large':\n       default:\n         return css`\n          ${getTypographyStyles('Title2')}\n          color: ${contents000};\n        `;\n     }\n   }}\n`;\n"],"names":["LabelContainer","styled","label","_templateObject","_taggedTemplateLiteral","_ref","_ref$$width","$width","_ref2","$size","$gap","defaultGap","finalGap","undefined","concat","css","_templateObject2","_ref3","_ref3$$direction","$direction","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject18","_ref4","_templateObject19","getTypographyStyles","contents100","_templateObject20","contents000"],"mappings":"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"}

package/dist/src/Labels/Label/styles.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { LabelProps } from './types';
+interface LabelContainerProps {
+    $size: LabelProps['size'];
+    $direction: LabelProps['direction'];
+    $gap: LabelProps['gap'];
+    $width: LabelProps['width'];
+}
+export declare const LabelContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, LabelContainerProps>>;
+export {};
+//# sourceMappingURL=styles.d.ts.map

package/dist/src/Labels/Label/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../../src/Labels/Label/styles.ts"],"names":[],"mappings":";AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAE1C,UAAU,mBAAmB;IAC3B,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC,CAAC;IAC1B,UAAU,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IACpC,IAAI,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IACxB,MAAM,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;CAC7B;AACD,eAAO,MAAM,cAAc,yOA2H1B,CAAC"}

package/dist/src/Labels/Label/styles.esm.js

@@ -0,0 +1,72 @@
+import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
+import { getTypographyStyles, contents000, contents100 } from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var LabelContainer = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  width: ", ";\n  min-width: min-content; \n\n  ", "\n\n  ", "\n\n  /* Size styles */\n   ", "\n"])), function (_ref) {
+  var _ref$$width = _ref.$width,
+    $width = _ref$$width === void 0 ? 'auto' : _ref$$width;
+  return $width;
+}, function (_ref2) {
+  var $size = _ref2.$size,
+    $gap = _ref2.$gap;
+  var defaultGap = $size === 'large' ? '12px' : '8px';
+  var finalGap = $gap !== undefined ? "".concat($gap, "px") : defaultGap;
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      gap: ", ";\n    "])), finalGap);
+}, function (_ref3) {
+  var _ref3$$direction = _ref3.$direction,
+    $direction = _ref3$$direction === void 0 ? 'top' : _ref3$$direction;
+  switch ($direction) {
+    // Top variations
+    case 'top':
+      return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n          flex-direction: column;\n          align-items: flex-start;\n        "])));
+    case 'top-left':
+      return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n          flex-direction: column;\n          align-items: flex-start;\n        "])));
+    case 'top-right':
+      return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n          flex-direction: column;\n          align-items: flex-end;\n        "])));
+    case 'top-center':
+      return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n          flex-direction: column;\n          align-items: center;\n        "])));
+
+    // Bottom variations
+    case 'bottom':
+      return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        "])));
+    case 'bottom-left':
+      return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        "])));
+    case 'bottom-right':
+      return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n          flex-direction: column-reverse;\n          align-items: flex-end;\n        "])));
+    case 'bottom-center':
+      return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n          flex-direction: column-reverse;\n          align-items: center;\n        "])));
+
+    // Left variations
+    case 'left':
+      return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n          flex-direction: row;\n          align-items: center;\n        "])));
+    case 'left-top':
+      return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n          flex-direction: row;\n          align-items: flex-start;\n        "])));
+    case 'left-bottom':
+      return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n          flex-direction: row;\n          align-items: flex-end;\n        "])));
+    case 'left-center':
+      return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n          flex-direction: row;\n          align-items: center;\n        "])));
+
+    // Right variations
+    case 'right':
+      return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n          flex-direction: row-reverse;\n          align-items: center;\n        "])));
+    case 'right-top':
+      return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n          flex-direction: row-reverse;\n          align-items: flex-start;\n        "])));
+    case 'right-bottom':
+      return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n          flex-direction: row-reverse;\n          align-items: flex-end;\n        "])));
+    case 'right-center':
+      return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n          flex-direction: row-reverse;\n          align-items: center;\n        "])));
+  }
+}, function (_ref4) {
+  var $size = _ref4.$size;
+  switch ($size) {
+    case 'small':
+      return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n          ", "\n          color: ", ";\n        "])), getTypographyStyles('UIBody2'), contents100);
+    case 'large':
+    default:
+      return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n          ", "\n          color: ", ";\n        "])), getTypographyStyles('Title2'), contents000);
+  }
+});
+
+export { LabelContainer };
+//# sourceMappingURL=styles.esm.js.map

package/dist/src/Labels/Label/styles.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/Labels/Label/styles.ts"],"sourcesContent":["import {\n  contents000,\n  contents100,\n  getTypographyStyles,\n} from '@remember-web/mixin';\nimport styled, { css } from 'styled-components';\nimport type { LabelProps } from './types';\n\ninterface LabelContainerProps {\n  $size: LabelProps['size'];\n  $direction: LabelProps['direction'];\n  $gap: LabelProps['gap'];\n  $width: LabelProps['width'];\n}\nexport const LabelContainer = styled.label<LabelContainerProps>`\n  display: flex;\n  position: relative;\n  width: ${({ $width = 'auto' }) => $width};\n  min-width: min-content; \n\n  ${({ $size, $gap }) => {\n    const defaultGap = $size === 'large' ? '12px' : '8px';\n    const finalGap = $gap !== undefined ? `${$gap}px` : defaultGap;\n\n    return css`\n      gap: ${finalGap};\n    `;\n  }}\n\n  ${({ $direction = 'top' }) => {\n    switch ($direction) {\n      // Top variations\n      case 'top':\n        return css`\n          flex-direction: column;\n          align-items: flex-start;\n        `;\n      case 'top-left':\n        return css`\n          flex-direction: column;\n          align-items: flex-start;\n        `;\n      case 'top-right':\n        return css`\n          flex-direction: column;\n          align-items: flex-end;\n        `;\n      case 'top-center':\n        return css`\n          flex-direction: column;\n          align-items: center;\n        `;\n\n      // Bottom variations\n      case 'bottom':\n        return css`\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        `;\n      case 'bottom-left':\n        return css`\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        `;\n      case 'bottom-right':\n        return css`\n          flex-direction: column-reverse;\n          align-items: flex-end;\n        `;\n      case 'bottom-center':\n        return css`\n          flex-direction: column-reverse;\n          align-items: center;\n        `;\n\n      // Left variations\n      case 'left':\n        return css`\n          flex-direction: row;\n          align-items: center;\n        `;\n      case 'left-top':\n        return css`\n          flex-direction: row;\n          align-items: flex-start;\n        `;\n      case 'left-bottom':\n        return css`\n          flex-direction: row;\n          align-items: flex-end;\n        `;\n      case 'left-center':\n        return css`\n          flex-direction: row;\n          align-items: center;\n        `;\n\n      // Right variations\n      case 'right':\n        return css`\n          flex-direction: row-reverse;\n          align-items: center;\n        `;\n      case 'right-top':\n        return css`\n          flex-direction: row-reverse;\n          align-items: flex-start;\n        `;\n      case 'right-bottom':\n        return css`\n          flex-direction: row-reverse;\n          align-items: flex-end;\n        `;\n      case 'right-center':\n        return css`\n          flex-direction: row-reverse;\n          align-items: center;\n        `;\n    }\n  }}\n\n  /* Size styles */\n   ${({ $size }) => {\n     switch ($size) {\n       case 'small':\n         return css`\n          ${getTypographyStyles('UIBody2')}\n          color: ${contents100};\n        `;\n       case 'large':\n       default:\n         return css`\n          ${getTypographyStyles('Title2')}\n          color: ${contents000};\n        `;\n     }\n   }}\n`;\n"],"names":["LabelContainer","styled","label","_templateObject","_taggedTemplateLiteral","_ref","_ref$$width","$width","_ref2","$size","$gap","defaultGap","finalGap","undefined","concat","css","_templateObject2","_ref3","_ref3$$direction","$direction","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","_templateObject8","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17","_templateObject18","_ref4","_templateObject19","getTypographyStyles","contents100","_templateObject20","contents000"],"mappings":"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"}

package/dist/src/Labels/Label/types.d.ts

@@ -0,0 +1,13 @@
+import type { LabelHTMLAttributes } from 'react';
+export type Direction = 'top' | 'top-left' | 'top-right' | 'top-center' | 'bottom' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'left' | 'left-top' | 'left-bottom' | 'left-center' | 'right' | 'right-top' | 'right-bottom' | 'right-center';
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    text: string;
+    size?: 'small' | 'large';
+    gap?: number;
+    width?: string;
+    rightElement?: React.ReactNode;
+    required?: boolean;
+    direction?: Direction;
+    children?: React.ReactNode;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/src/Labels/Label/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/Labels/Label/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,SAAS,GACjB,KAAK,GACL,UAAU,GACV,WAAW,GACX,YAAY,GACZ,QAAQ,GACR,aAAa,GACb,cAAc,GACd,eAAe,GACf,MAAM,GACN,UAAU,GACV,aAAa,GACb,aAAa,GACb,OAAO,GACP,WAAW,GACX,cAAc,GACd,cAAc,CAAC;AAEnB,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B"}

package/dist/src/Labels/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Label } from './Label';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/Labels/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Labels/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC"}

package/dist/src/index.cjs.js

@@ -32,6 +32,7 @@ var index$k = require('./Floating/Tooltip/index.cjs.js');
 var styles$2 = require('./Floating/DropdownMenu/styles.cjs.js');
 var styles$3 = require('./Floating/Popover/styles.cjs.js');
 var index$l = require('./Chips/Chip/index.cjs.js');
+var index$m = require('./Labels/Label/index.cjs.js');
 
 
 
@@ -82,4 +83,5 @@ exports.StyledPopoverContentWrapper = styles$3.StyledPopoverContentWrapper;
 exports.showFadeIn = styles$3.showFadeIn;
 exports.showFadeOut = styles$3.showFadeOut;
 exports.Chip = index$l.Chip;
+exports.Label = index$m;
 //# sourceMappingURL=index.cjs.js.map

package/dist/src/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/src/index.d.ts

@@ -9,4 +9,5 @@ export * from './Paginations';
 export * from './Inputs';
 export * from './Floating';
 export * from './Chips';
+export * from './Labels';
 //# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC"}

package/dist/src/index.esm.js

@@ -30,4 +30,5 @@ export { default as Tooltip } from './Floating/Tooltip/index.esm.js';
 export { DropdownMenuItemDisabledCSS, DropdownMenuItemHoverCSS, StyledDropdownMenuContent, StyledDropdownMenuContentWrapper, StyledDropdownMenuItem, StyledDropdownMenuSection, StyledDropdownMenuSectionTitle, dropdownMenuItemCSS, getDropdownMenuItemCss } from './Floating/DropdownMenu/styles.esm.js';
 export { StyledPopoverContent, StyledPopoverContentWrapper, showFadeIn, showFadeOut } from './Floating/Popover/styles.esm.js';
 export { Chip } from './Chips/Chip/index.esm.js';
+export { default as Label } from './Labels/Label/index.esm.js';
 //# sourceMappingURL=index.esm.js.map

package/dist/src/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.2.12",
+  "version": "0.2.14",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",
@@ -41,7 +41,7 @@
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@remember-web/icon": "^0.1.12",
+    "@remember-web/icon": "^0.1.13",
     "@remember-web/mixin": "^0.2.6",
     "@remember-web/shared": "^0.1.1"
   },

package/src/Chips/Chip/Chip.stories.tsx

@@ -50,7 +50,7 @@ const meta = {
 } satisfies Meta<typeof Chip>;
 
 export const Default: Story = {
-  render: ({ leftIcon, deleteIcon, selected, clickable, ...args }) => {
+  render: ({ leftIcon, deleteIcon, ...args }) => {
     const leftIconString = String(leftIcon);
     const leftIconElement =
       leftIcon && isIconName(leftIconString)
@@ -63,6 +63,11 @@ export const Default: Story = {
         ? createElement(getIconComponentFromName(rightIconString))
         : undefined;
 
+    if (args.clickable === false && Object.hasOwn(args, 'selected')) {
+      const { selected, ...rest } = args;
+      args = rest;
+    }
+
     return (
       <Chip
         {...args}

package/src/Chips/Chip/const.ts

@@ -15,12 +15,12 @@ import type { ChipSize, ChipVariant, ChipVariantStyleMap } from './types';
 export const CHIP_SIZE_STYLE = {
   small: {
     typography: 'Caption1',
-    padding: '8px 10px',
+    padding: '6px 10px',
     height: '28px',
   },
   medium: {
     typography: 'UIBody3',
-    padding: '8px 12px',
+    padding: '5px 12px',
     height: '30px',
   },
 } as const satisfies Record<ChipSize, unknown>;

package/src/Chips/Chip/styles.ts

@@ -58,14 +58,13 @@ export const StyledChip = styled.div<ChipStyleProps>`
 
     width: fit-content;
     border-radius: 50px;
-    text-align: center;
+    text-align: left;
     transition: all 0.2s ease-in;
-
-    height: ${CHIP_SIZE_STYLE[$size].height};
+    height: auto; 
     padding: ${CHIP_SIZE_STYLE[$size].padding};
 
     ${getTypographyStyles(CHIP_SIZE_STYLE[$size].typography)}
-
+    
     ${getVariantStyles({ $variant, $clickable, ...props })}
   `}
 `;

package/src/Inputs/Select/styles.ts

@@ -39,7 +39,7 @@ export const SelectContainer = styled.div<{ $width?: number | string }>`
 `;
 
 export const SelectLabel = styled.label`
-  ${getTypographyStyles('SubTitle1')}
+  ${getTypographyStyles('Title2')}
   display: block;
   margin-bottom: 12px;
   display: flex;

package/src/Inputs/Select/types.ts

@@ -17,6 +17,9 @@ export type SelectBaseProps<Value extends SelectValue> = {
   className?: string;
   disabled?: boolean;
   error?: boolean;
+  /**
+   * @deprecated Label 컴포넌트를 사용해 주세요.
+   */
   label?: ReactNode;
   required?: boolean;
   // TODO: children의 prop에 따라 결정되는 제네릭 구현이 필요 infer를 활용하면 될 것 같기도 한데 추후 확인

package/src/Inputs/TextInput/styles.ts

@@ -86,7 +86,7 @@ export const InputInner = styled.input`
 `;
 
 export const InputLabel = styled.label`
-  ${getTypographyStyles('SubTitle1')}
+  ${getTypographyStyles('Title2')}
   display: block;
   margin-bottom: 12px;
   display: flex;
@@ -100,7 +100,7 @@ export const InputLabel = styled.label`
 `;
 
 export const InputError = styled.div`
-  ${getTypographyStyles('Caption1')}
+  ${getTypographyStyles('UIBody3')}
   color: ${roleRed};
 
   margin-top: 8px;

package/src/Inputs/TextInput/types.ts

@@ -16,6 +16,9 @@ type TextInputProps = {
     | 'url'
     | 'date'
     | 'datetime-local';
+  /**
+   * @deprecated Label 컴포넌트를 사용해 주세요.
+   */
   label?: ReactNode;
   hintText?: string;
   hintTextColor?: ColorVariable;

package/src/Labels/Label/Label.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Flex } from '@/Common';
+import { Select, TextInput } from '@/Inputs';
+import {
+  getIconComponentFromName,
+  iconNames,
+  isIconName,
+} from '@/stories/util';
+import { createElement } from 'react';
+import Label from '.';
+
+type Story = StoryObj<typeof Label>;
+
+const meta = {
+  title: 'Primitive/Labels/Label',
+  component: Label,
+  argTypes: {
+    text: { control: 'text' },
+    children: { control: 'text' },
+    size: { control: 'select', options: ['small', 'large'] },
+    rightElement: { control: 'select', options: iconNames },
+    required: { control: 'boolean' },
+    direction: {
+      control: 'select',
+      options: [
+        'top',
+        'top-left',
+        'top-right',
+        'top-center',
+        'bottom',
+        'bottom-left',
+        'bottom-right',
+        'bottom-center',
+        'left',
+        'left-top',
+        'left-bottom',
+        'left-center',
+        'right',
+        'right-top',
+        'right-bottom',
+        'right-center',
+      ],
+    },
+  },
+  args: {
+    text: 'Label 컴포넌트',
+    children: <TextInput width="300px" />,
+  },
+} satisfies Meta<typeof Label>;
+
+export const Default: Story = {
+  render: ({ rightElement, ...props }) => {
+    const RightIconString = String(rightElement);
+    const renderedRightElement =
+      rightElement &&
+      isIconName(RightIconString) &&
+      createElement(getIconComponentFromName(RightIconString));
+    return (
+      <Flex gap={20} justify="unset" style={{ width: '100%' }}>
+        <Label rightElement={renderedRightElement} {...props} />
+        <Label text="children 없이 독립적으로 사용 가능" required />
+      </Flex>
+    );
+  },
+};
+
+export default meta;

package/src/Labels/Label/index.tsx

@@ -0,0 +1,50 @@
+import { Flex } from '@/Common';
+import { IconRequiredS } from '@remember-web/icon';
+import { forwardRef } from 'react';
+import { LabelContainer } from './styles';
+import type { LabelProps } from './types';
+
+const Label = forwardRef<HTMLLabelElement, LabelProps>(
+  (
+    {
+      text,
+      children,
+      direction = 'top-left',
+      size = 'small',
+      gap,
+      width,
+      rightElement,
+      required,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <LabelContainer
+        ref={ref}
+        $size={size}
+        className={className}
+        $direction={direction}
+        $gap={gap}
+        $width={width}
+        {...props}
+      >
+        <Flex gap={4}>
+          {text}
+          <Flex>
+            {rightElement}
+            {required && (
+              <Flex className="required-icon">
+                <IconRequiredS />
+              </Flex>
+            )}
+          </Flex>
+        </Flex>
+        {children}
+      </LabelContainer>
+    );
+  }
+);
+
+export default Label;

package/src/Labels/Label/styles.ts

@@ -0,0 +1,138 @@
+import {
+  contents000,
+  contents100,
+  getTypographyStyles,
+} from '@remember-web/mixin';
+import styled, { css } from 'styled-components';
+import type { LabelProps } from './types';
+
+interface LabelContainerProps {
+  $size: LabelProps['size'];
+  $direction: LabelProps['direction'];
+  $gap: LabelProps['gap'];
+  $width: LabelProps['width'];
+}
+export const LabelContainer = styled.label<LabelContainerProps>`
+  display: flex;
+  position: relative;
+  width: ${({ $width = 'auto' }) => $width};
+  min-width: min-content; 
+
+  ${({ $size, $gap }) => {
+    const defaultGap = $size === 'large' ? '12px' : '8px';
+    const finalGap = $gap !== undefined ? `${$gap}px` : defaultGap;
+
+    return css`
+      gap: ${finalGap};
+    `;
+  }}
+
+  ${({ $direction = 'top' }) => {
+    switch ($direction) {
+      // Top variations
+      case 'top':
+        return css`
+          flex-direction: column;
+          align-items: flex-start;
+        `;
+      case 'top-left':
+        return css`
+          flex-direction: column;
+          align-items: flex-start;
+        `;
+      case 'top-right':
+        return css`
+          flex-direction: column;
+          align-items: flex-end;
+        `;
+      case 'top-center':
+        return css`
+          flex-direction: column;
+          align-items: center;
+        `;
+
+      // Bottom variations
+      case 'bottom':
+        return css`
+          flex-direction: column-reverse;
+          align-items: flex-start;
+        `;
+      case 'bottom-left':
+        return css`
+          flex-direction: column-reverse;
+          align-items: flex-start;
+        `;
+      case 'bottom-right':
+        return css`
+          flex-direction: column-reverse;
+          align-items: flex-end;
+        `;
+      case 'bottom-center':
+        return css`
+          flex-direction: column-reverse;
+          align-items: center;
+        `;
+
+      // Left variations
+      case 'left':
+        return css`
+          flex-direction: row;
+          align-items: center;
+        `;
+      case 'left-top':
+        return css`
+          flex-direction: row;
+          align-items: flex-start;
+        `;
+      case 'left-bottom':
+        return css`
+          flex-direction: row;
+          align-items: flex-end;
+        `;
+      case 'left-center':
+        return css`
+          flex-direction: row;
+          align-items: center;
+        `;
+
+      // Right variations
+      case 'right':
+        return css`
+          flex-direction: row-reverse;
+          align-items: center;
+        `;
+      case 'right-top':
+        return css`
+          flex-direction: row-reverse;
+          align-items: flex-start;
+        `;
+      case 'right-bottom':
+        return css`
+          flex-direction: row-reverse;
+          align-items: flex-end;
+        `;
+      case 'right-center':
+        return css`
+          flex-direction: row-reverse;
+          align-items: center;
+        `;
+    }
+  }}
+
+  /* Size styles */
+   ${({ $size }) => {
+     switch ($size) {
+       case 'small':
+         return css`
+          ${getTypographyStyles('UIBody2')}
+          color: ${contents100};
+        `;
+       case 'large':
+       default:
+         return css`
+          ${getTypographyStyles('Title2')}
+          color: ${contents000};
+        `;
+     }
+   }}
+`;

package/src/Labels/Label/types.ts

@@ -0,0 +1,30 @@
+import type { LabelHTMLAttributes } from 'react';
+
+export type Direction =
+  | 'top'
+  | 'top-left'
+  | 'top-right'
+  | 'top-center'
+  | 'bottom'
+  | 'bottom-left'
+  | 'bottom-right'
+  | 'bottom-center'
+  | 'left'
+  | 'left-top'
+  | 'left-bottom'
+  | 'left-center'
+  | 'right'
+  | 'right-top'
+  | 'right-bottom'
+  | 'right-center';
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  text: string;
+  size?: 'small' | 'large';
+  gap?: number;
+  width?: string;
+  rightElement?: React.ReactNode;
+  required?: boolean;
+  direction?: Direction;
+  children?: React.ReactNode;
+}

package/src/Labels/index.ts

@@ -0,0 +1 @@
+export { default as Label } from './Label';

package/src/index.ts

@@ -9,3 +9,4 @@ export * from './Paginations';
 export * from './Inputs';
 export * from './Floating';
 export * from './Chips';
+export * from './Labels';