@remember-web/primitive 0.2.13 → 0.3.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Labels/Label/index.tsx"],"sourcesContent":["import { Flex } from '@/Common';\nimport { IconRequiredS } from '@remember-web/icon';\nimport { forwardRef } from 'react';\nimport { LabelContainer } from './styles';\nimport type { LabelProps } from './types';\n\nconst Label = forwardRef<HTMLLabelElement, LabelProps>(\n  (\n    {\n      text,\n      children,\n      direction = 'top-left',\n      size = 'small',\n      gap,\n      width,\n      rightElement,\n      required,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <LabelContainer\n        ref={ref}\n        $size={size}\n        className={className}\n        $direction={direction}\n        $gap={gap}\n        $width={width}\n        {...props}\n      >\n        <Flex gap={4}>\n          {text}\n          <Flex>\n            {rightElement}\n            {required && (\n              <Flex className=\"required-icon\">\n                <IconRequiredS />\n              </Flex>\n            )}\n          </Flex>\n        </Flex>\n        {children}\n      </LabelContainer>\n    );\n  }\n);\n\nexport default Label;\n"],"names":["Label","forwardRef","_ref","ref","text","children","_ref$direction","direction","_ref$size","size","gap","width","rightElement","required","className","props","_objectWithoutProperties","_excluded","_jsxs","LabelContainer","_objectSpread","$size","$direction","$gap","$width","Flex","_jsx","IconRequiredS"],"mappings":";;;;;;;;;;;;;;;;AAMMA,IAAAA,KAAK,gBAAGC,UAAU,CACtB,UAAAC,IAAA,EAaEC,GAAG,EACA;AAAA,EAAA,IAZDC,IAAI,GAAAF,IAAA,CAAJE,IAAI;IACJC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IAAAC,cAAA,GAAAJ,IAAA,CACRK,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,cAAA;IAAAE,SAAA,GAAAN,IAAA,CACtBO,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,SAAA;IACdE,GAAG,GAAAR,IAAA,CAAHQ,GAAG;IACHC,KAAK,GAAAT,IAAA,CAALS,KAAK;IACLC,YAAY,GAAAV,IAAA,CAAZU,YAAY;IACZC,QAAQ,GAAAX,IAAA,CAARW,QAAQ;IACRC,SAAS,GAAAZ,IAAA,CAATY,SAAS;AACNC,IAAAA,KAAK,GAAAC,wBAAA,CAAAd,IAAA,EAAAe,SAAA,CAAA,CAAA;AAIV,EAAA,oBACEC,IAAA,CAACC,cAAc,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACbjB,IAAAA,GAAG,EAAEA,GAAI;AACTkB,IAAAA,KAAK,EAAEZ,IAAK;AACZK,IAAAA,SAAS,EAAEA,SAAU;AACrBQ,IAAAA,UAAU,EAAEf,SAAU;AACtBgB,IAAAA,IAAI,EAAEb,GAAI;AACVc,IAAAA,MAAM,EAAEb,KAAAA;AAAM,GAAA,EACVI,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAV,QAAA,EAAA,cAETa,IAAA,CAACO,IAAI,EAAA;AAACf,MAAAA,GAAG,EAAE,CAAE;AAAAL,MAAAA,QAAA,EACVD,CAAAA,IAAI,eACLc,IAAA,CAACO,IAAI,EAAA;AAAApB,QAAAA,QAAA,GACFO,YAAY,EACZC,QAAQ,iBACPa,GAAA,CAACD,IAAI,EAAA;AAACX,UAAAA,SAAS,EAAC,eAAe;AAAAT,UAAAA,QAAA,eAC7BqB,GAAA,CAACC,aAAa,EAAE,EAAA,CAAA;AAAC,SACb,CACP,CAAA;AAAA,OACG,CAAC,CAAA;KACH,CAAC,EACNtB,QAAQ,CAAA;AAAA,GAAA,CACK,CAAC,CAAA;AAErB,CACF;;;;"}

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

@@ -0,0 +1,79 @@
+'use strict';
+
+var _taggedTemplateLiteral = require('@babel/runtime/helpers/taggedTemplateLiteral');
+var mixin = require('@remember-web/mixin');
+var styled = require('styled-components');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTemplateLiteral);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20;
+var LabelContainer = styled__default.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\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 styled.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\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 styled.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column;\n          align-items: flex-start;\n        "])));
+    case 'top-left':
+      return styled.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column;\n          align-items: flex-start;\n        "])));
+    case 'top-right':
+      return styled.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column;\n          align-items: flex-end;\n        "])));
+    case 'top-center':
+      return styled.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column;\n          align-items: center;\n        "])));
+
+    // Bottom variations
+    case 'bottom':
+      return styled.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        "])));
+    case 'bottom-left':
+      return styled.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column-reverse;\n          align-items: flex-start;\n        "])));
+    case 'bottom-right':
+      return styled.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column-reverse;\n          align-items: flex-end;\n        "])));
+    case 'bottom-center':
+      return styled.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral__default.default(["\n          flex-direction: column-reverse;\n          align-items: center;\n        "])));
+
+    // Left variations
+    case 'left':
+      return styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row;\n          align-items: center;\n        "])));
+    case 'left-top':
+      return styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row;\n          align-items: flex-start;\n        "])));
+    case 'left-bottom':
+      return styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row;\n          align-items: flex-end;\n        "])));
+    case 'left-center':
+      return styled.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row;\n          align-items: center;\n        "])));
+
+    // Right variations
+    case 'right':
+      return styled.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row-reverse;\n          align-items: center;\n        "])));
+    case 'right-top':
+      return styled.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row-reverse;\n          align-items: flex-start;\n        "])));
+    case 'right-bottom':
+      return styled.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row-reverse;\n          align-items: flex-end;\n        "])));
+    case 'right-center':
+      return styled.css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral__default.default(["\n          flex-direction: row-reverse;\n          align-items: center;\n        "])));
+  }
+}, function (_ref4) {
+  var $size = _ref4.$size;
+  switch ($size) {
+    case 'small':
+      return styled.css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral__default.default(["\n          ", "\n          color: ", ";\n        "])), mixin.getTypographyStyles('UIBody2'), mixin.contents100);
+    case 'large':
+    default:
+      return styled.css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral__default.default(["\n          ", "\n          color: ", ";\n        "])), mixin.getTypographyStyles('Title2'), mixin.contents000);
+  }
+});
+
+exports.LabelContainer = LabelContainer;
+//# sourceMappingURL=styles.cjs.js.map

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.13",
+  "version": "0.3.0",
   "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.2.0",
     "@remember-web/mixin": "^0.2.6",
     "@remember-web/shared": "^0.1.1"
   },

package/src/Inputs/Select/DesignedSelect/styles.ts

@@ -85,7 +85,7 @@ export const SelectOptionWrapper = styled.ul<{
   z-index: 1;
   border: 1px solid ${contents300};
   background-color: ${bg100};
-  overflow-y: scroll;
+  overflow-y: auto;
   overscroll-behavior: contain;
   transition: border-color 0.2s, background-color 0.2s;
 

package/src/Inputs/Select/Select.stories.tsx

@@ -11,7 +11,6 @@ const meta = {
   title: 'Primitive/Inputs/Select',
   component: Select,
   argTypes: {
-    label: { type: 'string' },
     required: { type: 'boolean' },
     placeholder: { type: 'string' },
     disabled: { type: 'boolean' },

package/src/Inputs/Select/index.tsx

@@ -7,7 +7,6 @@ import DesignedSelect from './DesignedSelect';
 import NativeSelect from './NativeSelect';
 import { NativeOption } from './NativeSelect/Option';
 import { OptionHolder } from './Option';
-import { SelectLabel } from './styles';
 import type {
   DesignedSelectProps,
   NativeSelectProps,
@@ -21,7 +20,6 @@ function Select<Value extends SelectValue>(
 ) {
   const {
     children,
-    label,
     value,
     className,
     disabled,
@@ -34,57 +32,41 @@ function Select<Value extends SelectValue>(
 
   if (props.native) {
     return (
-      <div>
-        {label && (
-          <SelectLabel>
-            {label}
-            {required && <mark>*</mark>}
-          </SelectLabel>
-        )}
-        <NativeSelect
-          disabled={disabled}
-          className={className}
-          onClick={onClick}
-          onChange={(e) => {
-            onChange?.(e.target.value as Value, e.target.innerText);
-          }}
-          value={value}
-          required={required}
-          placeholder={placeholder}
-          width={width}
-          ref={ref as Ref<HTMLSelectElement>}
-        >
-          {Children.map(children, (child) => (
-            <NativeOption {...child.props} />
-          ))}
-        </NativeSelect>
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      {label && (
-        <SelectLabel>
-          {label}
-          {required && <mark>*</mark>}
-        </SelectLabel>
-      )}
-      <DesignedSelect
-        className={className}
-        value={value}
+      <NativeSelect
         disabled={disabled}
+        className={className}
         onClick={onClick}
-        onChange={(_value, _label) => onChange?.(_value as Value, _label)}
+        onChange={(e) => {
+          onChange?.(e.target.value as Value, e.target.innerText);
+        }}
+        value={value}
+        required={required}
         placeholder={placeholder}
         width={width}
-        maxHeight={props.maxHeight}
-        extendDirection={props.extendDirection}
-        ref={ref as Ref<HTMLDivElement>}
+        ref={ref as Ref<HTMLSelectElement>}
       >
-        {children}
-      </DesignedSelect>
-    </div>
+        {Children.map(children, (child) => (
+          <NativeOption {...child.props} />
+        ))}
+      </NativeSelect>
+    );
+  }
+
+  return (
+    <DesignedSelect
+      className={className}
+      value={value}
+      disabled={disabled}
+      onClick={onClick}
+      onChange={(_value, _label) => onChange?.(_value as Value, _label)}
+      placeholder={placeholder}
+      width={width}
+      maxHeight={props.maxHeight}
+      extendDirection={props.extendDirection}
+      ref={ref as Ref<HTMLDivElement>}
+    >
+      {children}
+    </DesignedSelect>
   );
 }
 

package/src/Inputs/Select/styles.ts

@@ -6,7 +6,6 @@ import {
   contents200,
   contents300,
   getTypographyStyles,
-  roleRed,
 } from '@remember-web/mixin';
 import styled from 'styled-components';
 
@@ -37,17 +36,3 @@ export const SelectContainer = styled.div<{ $width?: number | string }>`
     background-color: ${bg200};
   }
 `;
-
-export const SelectLabel = styled.label`
-  ${getTypographyStyles('SubTitle1')}
-  display: block;
-  margin-bottom: 12px;
-  display: flex;
-  align-items: center;
-  gap: 4px;
-
-  & > mark {
-    all: unset;
-    color: ${roleRed};
-  }
-`;

package/src/Inputs/Select/types.ts

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

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;