@remember-web/primitive 0.1.15 → 0.1.17

package/dist/src/Control/BaseToggle/index.cjs.js

@@ -23,7 +23,7 @@ var _objectWithoutProperties__default = /*#__PURE__*/_interopDefault(_objectWith
 var _excluded = ["variant", "label", "labelPosition", "className", "inputClassName", "size", "labelGap", "type", "onToggle", "onChange", "indeterminate"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty__default.default(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var _BaseToggle = function _BaseToggle(_ref, _ref2) {
+var _BaseToggle = function _BaseToggle(_ref, ref) {
   var variant = _ref.variant,
     _label = _ref.label,
     _ref$labelPosition = _ref.labelPosition,
@@ -45,22 +45,23 @@ var _BaseToggle = function _BaseToggle(_ref, _ref2) {
     variant: "Body1",
     children: _label
   }) : _label;
+  var refCallback = react.useCallback(function (input) {
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(input);
+      } else {
+        ref.current = input;
+      }
+    }
+    if (input) {
+      input.indeterminate = indeterminate !== null && indeterminate !== void 0 ? indeterminate : false;
+    }
+  }, [indeterminate, ref]);
   return /*#__PURE__*/jsxRuntime.jsxs(styles.ToggleRoot, {
     className: className,
     $gap: labelGap,
     children: [/*#__PURE__*/jsxRuntime.jsx(styles.ToggleInput, _objectSpread(_objectSpread({
-      ref: function ref(input) {
-        if (_ref2) {
-          if (typeof _ref2 === 'function') {
-            _ref2(input);
-          } else {
-            _ref2.current = input;
-          }
-        }
-        if (input) {
-          input.indeterminate = indeterminate !== null && indeterminate !== void 0 ? indeterminate : false;
-        }
-      },
+      ref: refCallback,
       className: inputClassName,
       type: type
     }, props), {}, {
@@ -73,7 +74,7 @@ var _BaseToggle = function _BaseToggle(_ref, _ref2) {
       size: size,
       status: "on",
       variant: variant
-    }), /*#__PURE__*/jsxRuntime.jsx(index.ToggleIcon, {
+    }), type === 'checkbox' && /*#__PURE__*/jsxRuntime.jsx(index.ToggleIcon, {
       className: "indeterminateIcon",
       size: size,
       status: "indeterminate",

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n  HTMLInputElement,\n  BaseToggleProps\n> = (\n  {\n    variant,\n    label: _label,\n    labelPosition = 'right',\n    className,\n    inputClassName,\n    size = 'medium',\n    labelGap = size === 'small' ? 2 : 4,\n    type = 'checkbox',\n    onToggle,\n    onChange,\n    indeterminate,\n    ...props\n  },\n  ref\n) => {\n  const isStringLabel = typeof _label === 'string';\n  const label = isStringLabel ? (\n    <Typography variant=\"Body1\">{_label}</Typography>\n  ) : (\n    _label\n  );\n\n  return (\n    <ToggleRoot className={className} $gap={labelGap}>\n      <ToggleInput\n        ref={(input) => {\n          if (ref) {\n            if (typeof ref === 'function') {\n              ref(input);\n            } else {\n              ref.current = input;\n            }\n          }\n\n          if (input) {\n            input.indeterminate = indeterminate ?? false;\n          }\n        }}\n        className={inputClassName}\n        type={type}\n        {...props}\n        onChange={(e) => {\n          onChange?.(e);\n          onToggle?.(e.target.checked);\n        }}\n      />\n      {labelPosition === 'left' && label}\n      <ToggleIcon\n        className=\"onIcon\"\n        size={size}\n        status=\"on\"\n        variant={variant}\n      />\n      <ToggleIcon\n        className=\"indeterminateIcon\"\n        size={size}\n        status=\"indeterminate\"\n        variant={variant}\n      />\n      <ToggleIcon\n        className=\"offIcon\"\n        size={size}\n        status=\"off\"\n        variant={variant}\n      />\n      {labelPosition === 'right' && label}\n    </ToggleRoot>\n  );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAmBK;;;AAZDA;;;;AAGAC;;;;AAEAC;;;;AAIGC;AAIL;AACA;AACcC;AAAeC;;;AAMfC;AAAsBC;AAAeF;AAE7CG;AACE;AACE;;AAEA;;AAEA;AACF;AAEA;;AAEA;;AAEFF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n  HTMLInputElement,\n  BaseToggleProps\n> = (\n  {\n    variant,\n    label: _label,\n    labelPosition = 'right',\n    className,\n    inputClassName,\n    size = 'medium',\n    labelGap = size === 'small' ? 2 : 4,\n    type = 'checkbox',\n    onToggle,\n    onChange,\n    indeterminate,\n    ...props\n  },\n  ref\n) => {\n  const isStringLabel = typeof _label === 'string';\n  const label = isStringLabel ? (\n    <Typography variant=\"Body1\">{_label}</Typography>\n  ) : (\n    _label\n  );\n\n  const refCallback = useCallback(\n    (input: HTMLInputElement | null) => {\n      if (ref) {\n        if (typeof ref === 'function') {\n          ref(input);\n        } else {\n          ref.current = input;\n        }\n      }\n\n      if (input) {\n        input.indeterminate = indeterminate ?? false;\n      }\n    },\n    [indeterminate, ref]\n  );\n\n  return (\n    <ToggleRoot className={className} $gap={labelGap}>\n      <ToggleInput\n        ref={refCallback}\n        className={inputClassName}\n        type={type}\n        {...props}\n        onChange={(e) => {\n          onChange?.(e);\n          onToggle?.(e.target.checked);\n        }}\n      />\n      {labelPosition === 'left' && label}\n      <ToggleIcon\n        className=\"onIcon\"\n        size={size}\n        status=\"on\"\n        variant={variant}\n      />\n      {type === 'checkbox' && (\n        <ToggleIcon\n          className=\"indeterminateIcon\"\n          size={size}\n          status=\"indeterminate\"\n          variant={variant}\n        />\n      )}\n      <ToggleIcon\n        className=\"offIcon\"\n        size={size}\n        status=\"off\"\n        variant={variant}\n      />\n      {labelPosition === 'right' && label}\n    </ToggleRoot>\n  );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAmBK;;;AAZDA;;;;AAGAC;;;;AAEAC;;;;AAIGC;AAIL;AACA;AACcC;AAAeC;;AAK7B;AAEI;AACE;;AAEA;;AAEA;AACF;AAEA;;AAEA;AACF;;AAKYC;AAAsBC;AAAeF;AAE7CG;AACAF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;;AAIEE;AACAL;AACAS;AACAN;AAAiB;AAInBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Control/BaseToggle/index.tsx"],"names":[],"mappings":";AAsFA,eAAO,MAAM,UAAU;;;;;;;;;;sJAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/Control/BaseToggle/index.tsx"],"names":[],"mappings":";AA6FA,eAAO,MAAM,UAAU;;;;;;;;;;sJAA0B,CAAC"}

package/dist/src/Control/BaseToggle/index.esm.js

@@ -1,7 +1,7 @@
 "use client";
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
-import { forwardRef } from 'react';
+import { forwardRef, useCallback } from 'react';
 import '../../Common/Divider/index.esm.js';
 import '../../Common/Flex/index.esm.js';
 import '../../Common/Grid/index.esm.js';
@@ -16,7 +16,7 @@ import { ToggleRoot, ToggleInput } from './styles.esm.js';
 var _excluded = ["variant", "label", "labelPosition", "className", "inputClassName", "size", "labelGap", "type", "onToggle", "onChange", "indeterminate"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var _BaseToggle = function _BaseToggle(_ref, _ref2) {
+var _BaseToggle = function _BaseToggle(_ref, ref) {
   var variant = _ref.variant,
     _label = _ref.label,
     _ref$labelPosition = _ref.labelPosition,
@@ -38,22 +38,23 @@ var _BaseToggle = function _BaseToggle(_ref, _ref2) {
     variant: "Body1",
     children: _label
   }) : _label;
+  var refCallback = useCallback(function (input) {
+    if (ref) {
+      if (typeof ref === 'function') {
+        ref(input);
+      } else {
+        ref.current = input;
+      }
+    }
+    if (input) {
+      input.indeterminate = indeterminate !== null && indeterminate !== void 0 ? indeterminate : false;
+    }
+  }, [indeterminate, ref]);
   return /*#__PURE__*/jsxs(ToggleRoot, {
     className: className,
     $gap: labelGap,
     children: [/*#__PURE__*/jsx(ToggleInput, _objectSpread(_objectSpread({
-      ref: function ref(input) {
-        if (_ref2) {
-          if (typeof _ref2 === 'function') {
-            _ref2(input);
-          } else {
-            _ref2.current = input;
-          }
-        }
-        if (input) {
-          input.indeterminate = indeterminate !== null && indeterminate !== void 0 ? indeterminate : false;
-        }
-      },
+      ref: refCallback,
       className: inputClassName,
       type: type
     }, props), {}, {
@@ -66,7 +67,7 @@ var _BaseToggle = function _BaseToggle(_ref, _ref2) {
       size: size,
       status: "on",
       variant: variant
-    }), /*#__PURE__*/jsx(ToggleIcon, {
+    }), type === 'checkbox' && /*#__PURE__*/jsx(ToggleIcon, {
       className: "indeterminateIcon",
       size: size,
       status: "indeterminate",

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n  HTMLInputElement,\n  BaseToggleProps\n> = (\n  {\n    variant,\n    label: _label,\n    labelPosition = 'right',\n    className,\n    inputClassName,\n    size = 'medium',\n    labelGap = size === 'small' ? 2 : 4,\n    type = 'checkbox',\n    onToggle,\n    onChange,\n    indeterminate,\n    ...props\n  },\n  ref\n) => {\n  const isStringLabel = typeof _label === 'string';\n  const label = isStringLabel ? (\n    <Typography variant=\"Body1\">{_label}</Typography>\n  ) : (\n    _label\n  );\n\n  return (\n    <ToggleRoot className={className} $gap={labelGap}>\n      <ToggleInput\n        ref={(input) => {\n          if (ref) {\n            if (typeof ref === 'function') {\n              ref(input);\n            } else {\n              ref.current = input;\n            }\n          }\n\n          if (input) {\n            input.indeterminate = indeterminate ?? false;\n          }\n        }}\n        className={inputClassName}\n        type={type}\n        {...props}\n        onChange={(e) => {\n          onChange?.(e);\n          onToggle?.(e.target.checked);\n        }}\n      />\n      {labelPosition === 'left' && label}\n      <ToggleIcon\n        className=\"onIcon\"\n        size={size}\n        status=\"on\"\n        variant={variant}\n      />\n      <ToggleIcon\n        className=\"indeterminateIcon\"\n        size={size}\n        status=\"indeterminate\"\n        variant={variant}\n      />\n      <ToggleIcon\n        className=\"offIcon\"\n        size={size}\n        status=\"off\"\n        variant={variant}\n      />\n      {labelPosition === 'right' && label}\n    </ToggleRoot>\n  );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAmBK;;;AAZDA;;;;AAGAC;;;;AAEAC;;;;AAIGC;AAIL;AACA;AACcC;AAAeC;;;AAMfC;AAAsBC;AAAeF;AAE7CG;AACE;AACE;;AAEA;;AAEA;AACF;AAEA;;AAEA;;AAEFF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAGjBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Control/BaseToggle/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ForwardRefRenderFunction } from 'react';\nimport { forwardRef, useCallback } from 'react';\n\nimport { Typography } from '@/Common';\n\nimport { ToggleIcon } from './ToggleIcon';\nimport { ToggleInput, ToggleRoot } from './styles';\nimport type { BaseToggleProps } from './types';\n\nconst _BaseToggle: ForwardRefRenderFunction<\n  HTMLInputElement,\n  BaseToggleProps\n> = (\n  {\n    variant,\n    label: _label,\n    labelPosition = 'right',\n    className,\n    inputClassName,\n    size = 'medium',\n    labelGap = size === 'small' ? 2 : 4,\n    type = 'checkbox',\n    onToggle,\n    onChange,\n    indeterminate,\n    ...props\n  },\n  ref\n) => {\n  const isStringLabel = typeof _label === 'string';\n  const label = isStringLabel ? (\n    <Typography variant=\"Body1\">{_label}</Typography>\n  ) : (\n    _label\n  );\n\n  const refCallback = useCallback(\n    (input: HTMLInputElement | null) => {\n      if (ref) {\n        if (typeof ref === 'function') {\n          ref(input);\n        } else {\n          ref.current = input;\n        }\n      }\n\n      if (input) {\n        input.indeterminate = indeterminate ?? false;\n      }\n    },\n    [indeterminate, ref]\n  );\n\n  return (\n    <ToggleRoot className={className} $gap={labelGap}>\n      <ToggleInput\n        ref={refCallback}\n        className={inputClassName}\n        type={type}\n        {...props}\n        onChange={(e) => {\n          onChange?.(e);\n          onToggle?.(e.target.checked);\n        }}\n      />\n      {labelPosition === 'left' && label}\n      <ToggleIcon\n        className=\"onIcon\"\n        size={size}\n        status=\"on\"\n        variant={variant}\n      />\n      {type === 'checkbox' && (\n        <ToggleIcon\n          className=\"indeterminateIcon\"\n          size={size}\n          status=\"indeterminate\"\n          variant={variant}\n        />\n      )}\n      <ToggleIcon\n        className=\"offIcon\"\n        size={size}\n        status=\"off\"\n        variant={variant}\n      />\n      {labelPosition === 'right' && label}\n    </ToggleRoot>\n  );\n};\n\nexport const BaseToggle = forwardRef(_BaseToggle);\n"],"names":["labelPosition","size","type","props","variant","children","className","$gap","ref","onChange","status"],"mappings":";;;;;;;;;;;;;;;AAAa;AAAA;AAAA;AAWb;AAmBK;;;AAZDA;;;;AAGAC;;;;AAEAC;;;;AAIGC;AAIL;AACA;AACcC;AAAeC;;AAK7B;AAEI;AACE;;AAEA;;AAEA;AACF;AAEA;;AAEA;AACF;;AAKYC;AAAsBC;AAAeF;AAE7CG;AACAF;AACAJ;AAAW;AAEXO;AACEA;;AAEF;;AAIAH;AACAL;AACAS;AACAN;;AAIEE;AACAL;AACAS;AACAN;AAAiB;AAInBE;AACAL;AACAS;AACAN;AAAiB;AAEgB;AAGzC;;;"}

package/dist/src/Control/BaseToggle/styles.cjs.js

@@ -11,11 +11,11 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTempla
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 var _templateObject, _templateObject2;
-var ToggleRoot = styled__default.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ", "\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  :has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n"])), function (_ref) {
+var ToggleRoot = styled__default.default.label(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ", "\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  &:has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n"])), function (_ref) {
   var $gap = _ref.$gap;
   return $gap && "gap: ".concat($gap, "px;");
 });
-var ToggleInput = styled__default.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:indeterminate ~ svg.offIcon,\n  &:indeterminate ~ svg.onIcon {\n    display: none;\n  }\n\n  &:not(:indeterminate) ~ svg.indeterminateIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ", ";\n    outline-offset: -1px;\n  }\n"])), mixin.primary100);
+var ToggleInput = styled__default.default.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default.default(["\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &[type='checkbox']:indeterminate ~ svg.offIcon,\n  &[type='checkbox']:indeterminate ~ svg.onIcon {\n    display: none;\n  }\n\n  &[type='checkbox']:not(:indeterminate) ~ svg.indeterminateIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ", ";\n    outline-offset: -1px;\n  }\n"])), mixin.primary100);
 
 exports.ToggleInput = ToggleInput;
 exports.ToggleRoot = ToggleRoot;

package/dist/src/Control/BaseToggle/styles.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  :has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n`;\n\nexport const ToggleInput = styled.input`\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:indeterminate ~ svg.offIcon,\n  &:indeterminate ~ svg.onIcon {\n    display: none;\n  }\n\n  &:not(:indeterminate) ~ svg.indeterminateIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ${primary100};\n    outline-offset: -1px;\n  }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;;;;;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;;"}
+{"version":3,"file":"styles.cjs.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  &:has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n`;\n\nexport const ToggleInput = styled.input`\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &[type='checkbox']:indeterminate ~ svg.offIcon,\n  &[type='checkbox']:indeterminate ~ svg.onIcon {\n    display: none;\n  }\n\n  &[type='checkbox']:not(:indeterminate) ~ svg.indeterminateIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ${primary100};\n    outline-offset: -1px;\n  }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;;;;;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;;"}

package/dist/src/Control/BaseToggle/styles.esm.js

@@ -4,11 +4,11 @@ import styled from 'styled-components';
 import { primary100 } from '@remember-web/mixin';
 
 var _templateObject, _templateObject2;
-var ToggleRoot = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ", "\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  :has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n"])), function (_ref) {
+var ToggleRoot = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ", "\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  &:has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n"])), function (_ref) {
   var $gap = _ref.$gap;
   return $gap && "gap: ".concat($gap, "px;");
 });
-var ToggleInput = styled.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:indeterminate ~ svg.offIcon,\n  &:indeterminate ~ svg.onIcon {\n    display: none;\n  }\n\n  &:not(:indeterminate) ~ svg.indeterminateIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ", ";\n    outline-offset: -1px;\n  }\n"])), primary100);
+var ToggleInput = styled.input(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &[type='checkbox']:indeterminate ~ svg.offIcon,\n  &[type='checkbox']:indeterminate ~ svg.onIcon {\n    display: none;\n  }\n\n  &[type='checkbox']:not(:indeterminate) ~ svg.indeterminateIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ", ";\n    outline-offset: -1px;\n  }\n"])), primary100);
 
 export { ToggleInput, ToggleRoot };
 //# sourceMappingURL=styles.esm.js.map

package/dist/src/Control/BaseToggle/styles.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.esm.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  :has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n`;\n\nexport const ToggleInput = styled.input`\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &:indeterminate ~ svg.offIcon,\n  &:indeterminate ~ svg.onIcon {\n    display: none;\n  }\n\n  &:not(:indeterminate) ~ svg.indeterminateIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ${primary100};\n    outline-offset: -1px;\n  }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;"}
+{"version":3,"file":"styles.esm.js","sources":["../../../../src/Control/BaseToggle/styles.ts"],"sourcesContent":["'use client';\n\nimport styled from 'styled-components';\nimport { primary100 } from '@remember-web/mixin';\n\nexport const ToggleRoot = styled.label<{ $gap?: number }>`\n  width: fit-content;\n  height: fit-content;\n  display: flex;\n  ${({ $gap }) => $gap && `gap: ${$gap}px;`}\n\n  cursor: pointer;\n  user-select: none;\n  align-items: center;\n\n  & > svg {\n    transition: filter 0.2s ease-in-out;\n    flex-shrink: 0;\n  }\n\n  &:has(input:disabled) {\n    cursor: default;\n  }\n\n  @media (hover: hover) {\n    &:hover > svg {\n      filter: grayscale(0.05) brightness(0.95);\n    }\n  }\n`;\n\nexport const ToggleInput = styled.input`\n  all: unset;\n  position: absolute;\n  width: 1px;\n  height: 0px;\n  margin-left: -1px;\n\n  &:checked ~ svg.offIcon {\n    display: none;\n  }\n\n  &:not(:checked) ~ svg.onIcon {\n    display: none;\n  }\n\n  &[type='checkbox']:indeterminate ~ svg.offIcon,\n  &[type='checkbox']:indeterminate ~ svg.onIcon {\n    display: none;\n  }\n\n  &[type='checkbox']:not(:indeterminate) ~ svg.indeterminateIcon {\n    display: none;\n  }\n\n  &:disabled ~ svg {\n    filter: grayscale(1) brightness(1.1);\n  }\n\n  &:not(:disabled):active ~ svg {\n    filter: grayscale(0.1) brightness(0.9);\n  }\n\n  &:focus-visible ~ svg {\n    outline: solid 2px ${primary100};\n    outline-offset: -1px;\n  }\n`;\n"],"names":["ToggleRoot","ToggleInput"],"mappings":";;;;;AAAa;AAKAA;AAIT;AAAO;AAAgC;AAsB9BC;;"}

package/dist/src/Logos/RememberServiceLogo/index.cjs.js

@@ -26,7 +26,9 @@ var RememberServiceLogo = function RememberServiceLogo(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'black' : _ref$color,
     props = _objectWithoutProperties__default.default(_ref, _excluded);
-  return /*#__PURE__*/jsxRuntime.jsxs(style.StyledServiceLogoRoot, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsxs(style.StyledServiceLogoRoot, _objectSpread(_objectSpread({
+    $color: color
+  }, props), {}, {
     children: [/*#__PURE__*/jsxRuntime.jsx(index.RememberLogo, {
       color: color
     }), label && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/Logos/RememberServiceLogo/index.tsx"],"sourcesContent":["import type { GetStyledComponentProps } from '@remember-web/shared';\n\nimport type { RememberLogoProps } from '@/Logos/types';\nimport { Divider } from '@/Common';\n\nimport { RememberLogo } from '../RememberLogo';\nimport { StyledServiceLogoRoot } from './style';\n\nexport type GnbNaviLogoProps<As> = GetStyledComponentProps<\n  typeof StyledServiceLogoRoot,\n  As\n> & {\n  label?: string;\n  color?: RememberLogoProps['color'];\n};\n\nexport const RememberServiceLogo = <As,>({\n  label,\n  color = 'black',\n  ...props\n}: GnbNaviLogoProps<As>) => (\n  <StyledServiceLogoRoot {...props}>\n    <RememberLogo color={color} />\n    {label && (\n      <>\n        <Divider decorative orientation=\"vertical\" style={{ height: '15px' }} />\n        <b>{label}</b>\n      </>\n    )}\n  </StyledServiceLogoRoot>\n);\n"],"names":["RememberServiceLogo","_ref","label","_ref$color","color","props","_objectWithoutProperties","_excluded","_jsxs","StyledServiceLogoRoot","_objectSpread","children","_jsx","RememberLogo","_Fragment","Divider","decorative","orientation","style","height"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;IAgBaA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC9BC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,UAAA,GAAAF,IAAA,CACLG,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,UAAA;AACZE,IAAAA,KAAK,GAAAC,yCAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA,CAAA;EAAA,oBAERC,eAAA,CAACC,2BAAqB,EAAAC,aAAA,CAAAA,aAAA,KAAKL,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAM,QAAA,EAAA,cAC9BC,cAAA,CAACC,kBAAY,EAAA;AAACT,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAE,CAAC,EAC7BF,KAAK,iBACJM,eAAA,CAAAM,mBAAA,EAAA;MAAAH,QAAA,EAAA,cACEC,cAAA,CAACG,eAAO,EAAA;QAACC,UAAU,EAAA,IAAA;AAACC,QAAAA,WAAW,EAAC,UAAU;AAACC,QAAAA,KAAK,EAAE;AAAEC,UAAAA,MAAM,EAAE,MAAA;AAAO,SAAA;OAAI,CAAC,eACxEP,cAAA,CAAA,GAAA,EAAA;AAAAD,QAAAA,QAAA,EAAIT,KAAAA;AAAK,OAAI,CAAC,CAAA;AAAA,KACd,CACH,CAAA;AAAA,GAAA,CACoB,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/Logos/RememberServiceLogo/index.tsx"],"sourcesContent":["import type { GetStyledComponentProps } from '@remember-web/shared';\n\nimport type { RememberLogoProps } from '@/Logos/types';\nimport { Divider } from '@/Common';\n\nimport { RememberLogo } from '../RememberLogo';\nimport { StyledServiceLogoRoot } from './style';\n\nexport type GnbNaviLogoProps<As> = GetStyledComponentProps<\n  typeof StyledServiceLogoRoot,\n  As\n> & {\n  label?: string;\n  color?: RememberLogoProps['color'];\n};\n\nexport const RememberServiceLogo = <As,>({\n  label,\n  color = 'black',\n  ...props\n}: GnbNaviLogoProps<As>) => (\n  <StyledServiceLogoRoot $color={color} {...props}>\n    <RememberLogo color={color} />\n    {label && (\n      <>\n        <Divider decorative orientation=\"vertical\" style={{ height: '15px' }} />\n        <b>{label}</b>\n      </>\n    )}\n  </StyledServiceLogoRoot>\n);\n"],"names":["RememberServiceLogo","_ref","label","_ref$color","color","props","_objectWithoutProperties","_excluded","_jsxs","StyledServiceLogoRoot","_objectSpread","$color","children","_jsx","RememberLogo","_Fragment","Divider","decorative","orientation","style","height"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;IAgBaA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC9BC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,UAAA,GAAAF,IAAA,CACLG,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,UAAA;AACZE,IAAAA,KAAK,GAAAC,yCAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA,CAAA;AAAA,EAAA,oBAERC,eAAA,CAACC,2BAAqB,EAAAC,aAAA,CAAAA,aAAA,CAAA;AAACC,IAAAA,MAAM,EAAEP,KAAAA;AAAM,GAAA,EAAKC,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAO,QAAA,EAAA,cAC7CC,cAAA,CAACC,kBAAY,EAAA;AAACV,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAE,CAAC,EAC7BF,KAAK,iBACJM,eAAA,CAAAO,mBAAA,EAAA;MAAAH,QAAA,EAAA,cACEC,cAAA,CAACG,eAAO,EAAA;QAACC,UAAU,EAAA,IAAA;AAACC,QAAAA,WAAW,EAAC,UAAU;AAACC,QAAAA,KAAK,EAAE;AAAEC,UAAAA,MAAM,EAAE,MAAA;AAAO,SAAA;OAAI,CAAC,eACxEP,cAAA,CAAA,GAAA,EAAA;AAAAD,QAAAA,QAAA,EAAIV,KAAAA;AAAK,OAAI,CAAC,CAAA;AAAA,KACd,CACH,CAAA;AAAA,GAAA,CACoB,CAAC,CAAA;AAAA;;;;"}

package/dist/src/Logos/RememberServiceLogo/index.esm.js

@@ -19,7 +19,9 @@ var RememberServiceLogo = function RememberServiceLogo(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'black' : _ref$color,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/jsxs(StyledServiceLogoRoot, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxs(StyledServiceLogoRoot, _objectSpread(_objectSpread({
+    $color: color
+  }, props), {}, {
     children: [/*#__PURE__*/jsx(RememberLogo, {
       color: color
     }), label && /*#__PURE__*/jsxs(Fragment, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/Logos/RememberServiceLogo/index.tsx"],"sourcesContent":["import type { GetStyledComponentProps } from '@remember-web/shared';\n\nimport type { RememberLogoProps } from '@/Logos/types';\nimport { Divider } from '@/Common';\n\nimport { RememberLogo } from '../RememberLogo';\nimport { StyledServiceLogoRoot } from './style';\n\nexport type GnbNaviLogoProps<As> = GetStyledComponentProps<\n  typeof StyledServiceLogoRoot,\n  As\n> & {\n  label?: string;\n  color?: RememberLogoProps['color'];\n};\n\nexport const RememberServiceLogo = <As,>({\n  label,\n  color = 'black',\n  ...props\n}: GnbNaviLogoProps<As>) => (\n  <StyledServiceLogoRoot {...props}>\n    <RememberLogo color={color} />\n    {label && (\n      <>\n        <Divider decorative orientation=\"vertical\" style={{ height: '15px' }} />\n        <b>{label}</b>\n      </>\n    )}\n  </StyledServiceLogoRoot>\n);\n"],"names":["RememberServiceLogo","_ref","label","_ref$color","color","props","_objectWithoutProperties","_excluded","_jsxs","StyledServiceLogoRoot","_objectSpread","children","_jsx","RememberLogo","_Fragment","Divider","decorative","orientation","style","height"],"mappings":";;;;;;;;;;;;;;;;IAgBaA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC9BC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,UAAA,GAAAF,IAAA,CACLG,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,UAAA;AACZE,IAAAA,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA,CAAA;EAAA,oBAERC,IAAA,CAACC,qBAAqB,EAAAC,aAAA,CAAAA,aAAA,KAAKL,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAM,QAAA,EAAA,cAC9BC,GAAA,CAACC,YAAY,EAAA;AAACT,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAE,CAAC,EAC7BF,KAAK,iBACJM,IAAA,CAAAM,QAAA,EAAA;MAAAH,QAAA,EAAA,cACEC,GAAA,CAACG,OAAO,EAAA;QAACC,UAAU,EAAA,IAAA;AAACC,QAAAA,WAAW,EAAC,UAAU;AAACC,QAAAA,KAAK,EAAE;AAAEC,UAAAA,MAAM,EAAE,MAAA;AAAO,SAAA;OAAI,CAAC,eACxEP,GAAA,CAAA,GAAA,EAAA;AAAAD,QAAAA,QAAA,EAAIT,KAAAA;AAAK,OAAI,CAAC,CAAA;AAAA,KACd,CACH,CAAA;AAAA,GAAA,CACoB,CAAC,CAAA;AAAA;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/Logos/RememberServiceLogo/index.tsx"],"sourcesContent":["import type { GetStyledComponentProps } from '@remember-web/shared';\n\nimport type { RememberLogoProps } from '@/Logos/types';\nimport { Divider } from '@/Common';\n\nimport { RememberLogo } from '../RememberLogo';\nimport { StyledServiceLogoRoot } from './style';\n\nexport type GnbNaviLogoProps<As> = GetStyledComponentProps<\n  typeof StyledServiceLogoRoot,\n  As\n> & {\n  label?: string;\n  color?: RememberLogoProps['color'];\n};\n\nexport const RememberServiceLogo = <As,>({\n  label,\n  color = 'black',\n  ...props\n}: GnbNaviLogoProps<As>) => (\n  <StyledServiceLogoRoot $color={color} {...props}>\n    <RememberLogo color={color} />\n    {label && (\n      <>\n        <Divider decorative orientation=\"vertical\" style={{ height: '15px' }} />\n        <b>{label}</b>\n      </>\n    )}\n  </StyledServiceLogoRoot>\n);\n"],"names":["RememberServiceLogo","_ref","label","_ref$color","color","props","_objectWithoutProperties","_excluded","_jsxs","StyledServiceLogoRoot","_objectSpread","$color","children","_jsx","RememberLogo","_Fragment","Divider","decorative","orientation","style","height"],"mappings":";;;;;;;;;;;;;;;;IAgBaA,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAC9BC,KAAK,GAAAD,IAAA,CAALC,KAAK;IAAAC,UAAA,GAAAF,IAAA,CACLG,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,UAAA;AACZE,IAAAA,KAAK,GAAAC,wBAAA,CAAAL,IAAA,EAAAM,SAAA,CAAA,CAAA;AAAA,EAAA,oBAERC,IAAA,CAACC,qBAAqB,EAAAC,aAAA,CAAAA,aAAA,CAAA;AAACC,IAAAA,MAAM,EAAEP,KAAAA;AAAM,GAAA,EAAKC,KAAK,CAAA,EAAA,EAAA,EAAA;IAAAO,QAAA,EAAA,cAC7CC,GAAA,CAACC,YAAY,EAAA;AAACV,MAAAA,KAAK,EAAEA,KAAAA;AAAM,KAAE,CAAC,EAC7BF,KAAK,iBACJM,IAAA,CAAAO,QAAA,EAAA;MAAAH,QAAA,EAAA,cACEC,GAAA,CAACG,OAAO,EAAA;QAACC,UAAU,EAAA,IAAA;AAACC,QAAAA,WAAW,EAAC,UAAU;AAACC,QAAAA,KAAK,EAAE;AAAEC,UAAAA,MAAM,EAAE,MAAA;AAAO,SAAA;OAAI,CAAC,eACxEP,GAAA,CAAA,GAAA,EAAA;AAAAD,QAAAA,QAAA,EAAIV,KAAAA;AAAK,OAAI,CAAC,CAAA;AAAA,KACd,CACH,CAAA;AAAA,GAAA,CACoB,CAAC,CAAA;AAAA;;;;"}

package/dist/src/Logos/RememberServiceLogo/style.cjs.js

@@ -10,7 +10,11 @@ var _taggedTemplateLiteral__default = /*#__PURE__*/_interopDefault(_taggedTempla
 var styled__default = /*#__PURE__*/_interopDefault(styled);
 
 var _templateObject;
-var StyledServiceLogoRoot = styled__default.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ", ";\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ", ";\n    text-decoration: none;\n    line-height: 16px;\n  }\n"])), mixin.contents000, mixin.getTypographyStyles('Title2'));
+var StyledServiceLogoRoot = styled__default.default.a(_templateObject || (_templateObject = _taggedTemplateLiteral__default.default(["\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ", ";\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ", ";\n    text-decoration: none;\n    line-height: 16px;\n  }\n"])), function (_ref) {
+  var _ref$$color = _ref.$color,
+    $color = _ref$$color === void 0 ? mixin.contents000 : _ref$$color;
+  return $color;
+}, mixin.getTypographyStyles('Title2'));
 
 exports.StyledServiceLogoRoot = StyledServiceLogoRoot;
 //# sourceMappingURL=style.cjs.js.map

package/dist/src/Logos/RememberServiceLogo/style.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.cjs.js","sources":["../../../../src/Logos/RememberServiceLogo/style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { contents000, getTypographyStyles } from '@remember-web/mixin';\n\nexport const StyledServiceLogoRoot = styled.a`\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ${contents000};\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ${getTypographyStyles('Title2')};\n    text-decoration: none;\n    line-height: 16px;\n  }\n`;\n"],"names":["StyledServiceLogoRoot","styled","a","_templateObject","_taggedTemplateLiteral","contents000","getTypographyStyles"],"mappings":";;;;;;;;;;;;IAGaA,qBAAqB,GAAGC,uBAAM,CAACC,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,qNAGlCC,iBAAW,EAOhBC,yBAAmB,CAAC,QAAQ,CAAC;;;;"}
+{"version":3,"file":"style.cjs.js","sources":["../../../../src/Logos/RememberServiceLogo/style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { contents000, getTypographyStyles } from '@remember-web/mixin';\n\nexport const StyledServiceLogoRoot = styled.a<{ $color?: string }>`\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ${({ $color = contents000 }) => $color};\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ${getTypographyStyles('Title2')};\n    text-decoration: none;\n    line-height: 16px;\n  }\n`;\n"],"names":["StyledServiceLogoRoot","styled","a","_templateObject","_taggedTemplateLiteral","_ref","_ref$$color","$color","contents000","getTypographyStyles"],"mappings":";;;;;;;;;;;;AAGaA,IAAAA,qBAAqB,GAAGC,uBAAM,CAACC,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,uCAAA,CAAA,CAAA,kEAAA,EAAA,0EAAA,EAAA,8DAAA,CAAA,CAAA,CAAA,EAGlC,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAAC,WAAA,GAAAD,IAAA,CAAGE,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAGE,KAAAA,CAAAA,GAAAA,iBAAW,GAAAF,WAAA,CAAA;AAAA,EAAA,OAAOC,MAAM,CAAA;AAAA,CAAA,EAOzCE,yBAAmB,CAAC,QAAQ,CAAC;;;;"}

package/dist/src/Logos/RememberServiceLogo/style.d.ts

@@ -1,3 +1,5 @@
 /// <reference types="react" />
-export declare const StyledServiceLogoRoot: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>;
+export declare const StyledServiceLogoRoot: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {
+    $color?: string | undefined;
+}>>;
 //# sourceMappingURL=style.d.ts.map

package/dist/src/Logos/RememberServiceLogo/style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../src/Logos/RememberServiceLogo/style.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,qBAAqB,4NAcjC,CAAC"}
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../../src/Logos/RememberServiceLogo/style.ts"],"names":[],"mappings":";AAGA,eAAO,MAAM,qBAAqB;;GAcjC,CAAC"}

package/dist/src/Logos/RememberServiceLogo/style.esm.js

@@ -1,9 +1,13 @@
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import styled from 'styled-components';
-import { contents000, getTypographyStyles } from '@remember-web/mixin';
+import { getTypographyStyles, contents000 } from '@remember-web/mixin';
 
 var _templateObject;
-var StyledServiceLogoRoot = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ", ";\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ", ";\n    text-decoration: none;\n    line-height: 16px;\n  }\n"])), contents000, getTypographyStyles('Title2'));
+var StyledServiceLogoRoot = styled.a(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ", ";\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ", ";\n    text-decoration: none;\n    line-height: 16px;\n  }\n"])), function (_ref) {
+  var _ref$$color = _ref.$color,
+    $color = _ref$$color === void 0 ? contents000 : _ref$$color;
+  return $color;
+}, getTypographyStyles('Title2'));
 
 export { StyledServiceLogoRoot };
 //# sourceMappingURL=style.esm.js.map

package/dist/src/Logos/RememberServiceLogo/style.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.esm.js","sources":["../../../../src/Logos/RememberServiceLogo/style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { contents000, getTypographyStyles } from '@remember-web/mixin';\n\nexport const StyledServiceLogoRoot = styled.a`\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ${contents000};\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ${getTypographyStyles('Title2')};\n    text-decoration: none;\n    line-height: 16px;\n  }\n`;\n"],"names":["StyledServiceLogoRoot","styled","a","_templateObject","_taggedTemplateLiteral","contents000","getTypographyStyles"],"mappings":";;;;;IAGaA,qBAAqB,GAAGC,MAAM,CAACC,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,qNAGlCC,WAAW,EAOhBC,mBAAmB,CAAC,QAAQ,CAAC;;;;"}
+{"version":3,"file":"style.esm.js","sources":["../../../../src/Logos/RememberServiceLogo/style.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { contents000, getTypographyStyles } from '@remember-web/mixin';\n\nexport const StyledServiceLogoRoot = styled.a<{ $color?: string }>`\n  box-sizing: border-box;\n  text-decoration: none;\n  color: ${({ $color = contents000 }) => $color};\n\n  display: flex;\n  align-items: end;\n  gap: 8px;\n\n  > b {\n    ${getTypographyStyles('Title2')};\n    text-decoration: none;\n    line-height: 16px;\n  }\n`;\n"],"names":["StyledServiceLogoRoot","styled","a","_templateObject","_taggedTemplateLiteral","_ref","_ref$$color","$color","contents000","getTypographyStyles"],"mappings":";;;;;AAGaA,IAAAA,qBAAqB,GAAGC,MAAM,CAACC,CAAC,CAAAC,eAAA,KAAAA,eAAA,GAAAC,sBAAA,CAAA,CAAA,kEAAA,EAAA,0EAAA,EAAA,8DAAA,CAAA,CAAA,CAAA,EAGlC,UAAAC,IAAA,EAAA;AAAA,EAAA,IAAAC,WAAA,GAAAD,IAAA,CAAGE,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAGE,KAAAA,CAAAA,GAAAA,WAAW,GAAAF,WAAA,CAAA;AAAA,EAAA,OAAOC,MAAM,CAAA;AAAA,CAAA,EAOzCE,mBAAmB,CAAC,QAAQ,CAAC;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/primitive",
-  "version": "0.1.15",
+  "version": "0.1.17",
   "description": "Remember Web Primitive Components",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",

package/src/Control/BaseToggle/index.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import type { ForwardRefRenderFunction } from 'react';
-import { forwardRef } from 'react';
+import { forwardRef, useCallback } from 'react';
 
 import { Typography } from '@/Common';
 
@@ -36,22 +36,27 @@ const _BaseToggle: ForwardRefRenderFunction<
     _label
   );
 
+  const refCallback = useCallback(
+    (input: HTMLInputElement | null) => {
+      if (ref) {
+        if (typeof ref === 'function') {
+          ref(input);
+        } else {
+          ref.current = input;
+        }
+      }
+
+      if (input) {
+        input.indeterminate = indeterminate ?? false;
+      }
+    },
+    [indeterminate, ref]
+  );
+
   return (
     <ToggleRoot className={className} $gap={labelGap}>
       <ToggleInput
-        ref={(input) => {
-          if (ref) {
-            if (typeof ref === 'function') {
-              ref(input);
-            } else {
-              ref.current = input;
-            }
-          }
-
-          if (input) {
-            input.indeterminate = indeterminate ?? false;
-          }
-        }}
+        ref={refCallback}
         className={inputClassName}
         type={type}
         {...props}
@@ -67,12 +72,14 @@ const _BaseToggle: ForwardRefRenderFunction<
         status="on"
         variant={variant}
       />
-      <ToggleIcon
-        className="indeterminateIcon"
-        size={size}
-        status="indeterminate"
-        variant={variant}
-      />
+      {type === 'checkbox' && (
+        <ToggleIcon
+          className="indeterminateIcon"
+          size={size}
+          status="indeterminate"
+          variant={variant}
+        />
+      )}
       <ToggleIcon
         className="offIcon"
         size={size}

package/src/Control/BaseToggle/styles.ts

@@ -18,7 +18,7 @@ export const ToggleRoot = styled.label<{ $gap?: number }>`
     flex-shrink: 0;
   }
 
-  :has(input:disabled) {
+  &:has(input:disabled) {
     cursor: default;
   }
 
@@ -44,12 +44,12 @@ export const ToggleInput = styled.input`
     display: none;
   }
 
-  &:indeterminate ~ svg.offIcon,
-  &:indeterminate ~ svg.onIcon {
+  &[type='checkbox']:indeterminate ~ svg.offIcon,
+  &[type='checkbox']:indeterminate ~ svg.onIcon {
     display: none;
   }
 
-  &:not(:indeterminate) ~ svg.indeterminateIcon {
+  &[type='checkbox']:not(:indeterminate) ~ svg.indeterminateIcon {
     display: none;
   }
 

package/src/Control/Radio.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Radio } from './Radio';
+import { useState } from 'react';
 
 type Story = StoryObj<typeof Radio>;
 
@@ -20,17 +21,69 @@ export const Default: Story = {
     labelPosition: 'right',
     label: "I'm a Radio",
   },
-  render: ({ ...args }) => (
-    <div>
-      <Radio {...args} name="radio" value="1" label="1번 라디오 입니다." />
-      <Radio {...args} name="radio" value="2" label="2번 라디오 입니다." />
-      <Radio {...args} name="radio" value="3" label="3번 라디오 입니다." />
-      <Radio {...args} name="radio" value="4" label="4번 라디오 입니다." />
-      <Radio {...args} name="radio" value="5" label="5번 라디오 입니다." />
-      <Radio {...args} name="radio" value="6" label="6번 라디오 입니다." />
-      <Radio {...args} name="radio" value="7" label="7번 라디오 입니다." />
-    </div>
-  ),
+  render: ({ ...args }) => {
+    const [value, setValue] = useState<string | null>(null);
+    return (
+      <>
+        <div>
+          <h2>name으로 묶은 uncontrolled 라디오</h2>
+          <Radio {...args} name="radio" value="1" label="1번 라디오 입니다." />
+          <Radio {...args} name="radio" value="2" label="2번 라디오 입니다." />
+          <Radio {...args} name="radio" value="3" label="3번 라디오 입니다." />
+          <Radio {...args} name="radio" value="4" label="4번 라디오 입니다." />
+          <Radio {...args} name="radio" value="5" label="5번 라디오 입니다." />
+          <Radio {...args} name="radio" value="6" label="6번 라디오 입니다." />
+          <Radio {...args} name="radio" value="7" label="7번 라디오 입니다." />
+        </div>
+
+        <div>
+          <h2>state로 관리하는 controlled 라디오</h2>
+          <Radio
+            {...args}
+            checked={value === '1'}
+            onClick={() => setValue('1')}
+            label="1번 라디오 입니다."
+          />
+          <Radio
+            {...args}
+            checked={value === '2'}
+            onClick={() => setValue('2')}
+            label="2번 라디오 입니다."
+          />
+          <Radio
+            {...args}
+            checked={value === '3'}
+            onClick={() => setValue('3')}
+            label="3번 라디오 입니다."
+          />
+          <Radio
+            {...args}
+            checked={value === '4'}
+            onClick={() => setValue('4')}
+            label="4번 라디오 입니다."
+          />
+          <Radio
+            {...args}
+            checked={value === '5'}
+            onClick={() => setValue('5')}
+            label="5번 라디오 입니다."
+          />
+          <Radio
+            {...args}
+            checked={value === '6'}
+            onClick={() => setValue('6')}
+            label="6번 라디오 입니다."
+          />
+          <Radio
+            {...args}
+            checked={value === '7'}
+            onClick={() => setValue('7')}
+            label="7번 라디오 입니다."
+          />
+        </div>
+      </>
+    );
+  },
 };
 
 export default meta;

package/src/Logos/RememberServiceLogo/index.tsx

@@ -19,7 +19,7 @@ export const RememberServiceLogo = <As,>({
   color = 'black',
   ...props
 }: GnbNaviLogoProps<As>) => (
-  <StyledServiceLogoRoot {...props}>
+  <StyledServiceLogoRoot $color={color} {...props}>
     <RememberLogo color={color} />
     {label && (
       <>

package/src/Logos/RememberServiceLogo/style.ts

@@ -1,10 +1,10 @@
 import styled from 'styled-components';
 import { contents000, getTypographyStyles } from '@remember-web/mixin';
 
-export const StyledServiceLogoRoot = styled.a`
+export const StyledServiceLogoRoot = styled.a<{ $color?: string }>`
   box-sizing: border-box;
   text-decoration: none;
-  color: ${contents000};
+  color: ${({ $color = contents000 }) => $color};
 
   display: flex;
   align-items: end;